Amazon CodeCatalyst で SPA を東京リージョンでホスティングする

こんにちは！アプリケーションサービス部ディベロップメントサービス 1 課の滝澤です。

本記事をご覧いただき、ありがとうございます。

本記事では、Amazon CodeCatalyst（以下、CodeCatalyst）で Single Page Application（以下、SPA）を東京リージョンでホスティングする方法をご紹介します。

はじめに
SPA を東京リージョンでホスティングする方法
- Blueprint からプロジェクトを作成する
- デプロイ先を東京リージョンに変更する
東京リージョンでデプロイされたことを確認する
（オプション）初回の Workflow でデプロイされたアプリを削除する
まとめ

はじめに

想定読者

本記事は、以下の方を対象としています。

AWS の CodeCatalyst の概要をなんとなく理解している方
SPA を AWS（東京リージョン）でホスティングしたい方

本記事のスコープ

本記事では、以下の内容について説明します。

Blueprint を使用して SPA を東京リージョンでホスティングする方法

本記事の除外範囲

CodeCatalyst の概要についての説明

概要が知りたい方は、以下の弊社ブログをご参照ください。

blog.serverworks.co.jp

SPA を東京リージョンでホスティングする方法

Blueprint からプロジェクトを作成する

任意の Space で create project をクリックする

Start with a blueprint を選択する

CodeCatalyst blueprint の Single-page application を選択する

Project details を入力する

Project name：任意のプロジェクト名
Repository provider：CodeCatalyst

Project resources を入力する

Web Application Framework：今回は React を選択
CI/CD Workflow Options：Continuous Delivery (Build, Test, and Deploy)
AWS account ID：任意のアカウント

IAM role：任意のロール
- view role requirements をクリックすると、必要な権限が表示されるので満たすロールを選択する
- Space が使用できるロールがないときは、Add IAM role から新規作成することも可能
  - Admin 権限のついたロールが作成されるので権限を絞りたい場合は、後で編集することをおすすめする

Trust Policy

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Sid": "CodeCatalyst",
      "Effect": "Allow",
      "Principal": {
        "Service": [
          "codecatalyst-runner.amazonaws.com",
          "codecatalyst.amazonaws.com"
        ]
      },
      "Action": "sts:AssumeRole"
    }
  ]
}

Inline Policy

{
  "Version": "2012-10-17",
  "Statement": [
    {
      "Effect": "Allow",
      "Action": [
        "amplify:*",
        "cloudformation:*",
        "ecr:*",
        "ssm:*",
        "s3:*",
        "iam:Get*",
        "iam:PassRole",
        "iam:CreateRole",
        "iam:DeleteRole",
        "iam:TagRole",
        "iam:UpdateRole",
        "iam:AttachRolePolicy",
        "iam:DetachRolePolicy",
        "iam:PutRolePolicy",
        "iam:CreatePolicy",
        "iam:DeletePolicy",
        "iam:CreatePolicyVersion",
        "iam:DeletePolicyVersion",
        "iam:PutRolePermissionsBoundary",
        "iam:DeleteRolePermissionsBoundary",
        "sts:AssumeRole",
        "sts:GetCallerIdentity"
      ],
      "Resource": "*"
    }
  ]
}

AWS Region：任意のリージョン
- ここでは、us-west-1, us-west-2, us-east-1, ap-southeast-1 しか選択できない（2024/08/27 時点）
- 後からこの設定部分に関しては上書きするため、この段階では任意のリージョンで問題ない
Repository name：任意のリポジトリ名
Stack name：任意のスタック名

デプロイ先を東京リージョンに変更する

※ この時点で CI/CD Workflow が実行され、先ほど選択したリージョンの Amplify で SPA がホスティングされています。

※ 今回は GUI で操作しますが、もちろんコードを編集して設定することも可能です。

その場合は、以下のように編集してください
- 対象ファイル：.codecatalyst/workflows/onPushToMainPipeline.yaml
- 編集箇所：DeployToAmplifyHosting.Configuration.AWSRegion を ap-northeast-1 に変更

作成されたプロジェクトの CI/CD Workflow を開く

onPushToMainPipeline を開き、Edit を押下する　

DeployToAmplifyHosting > Configuration > AWS Region を Asia Pacific (Tokyo) に変更する

Commit する

東京リージョンでデプロイされたことを確認する

（オプション）初回の Workflow でデプロイされたアプリを削除する

プロジェクト作成時に選択したリージョンに初回の Workflow でデプロイされたアプリが残っているため、必要に応じて削除してください

まとめ

本記事では、CodeCatalyst で SPA を東京リージョンでホスティングする方法をご紹介しました。

CodeCatalyst を使用することで、簡単に SPA をホスティングすることができます。

CodeCatalyst を使って SPA を東京リージョンでホスティングしたい方は、ぜひ本記事を参考にしてみてください。

Amazon CodeCatalyst で SPA を東京リージョンでホスティングする

はじめに