AWS CopilotでS3+CloudFrontによる静的サイトを作成してみる

それでは早速やってみます。

$ copilot --version
copilot version: v1.28.0

任意の場所でcopilotの作業を行うディレクトリを作成してその中に移動します。

$ mkdir static-site-test
$ cd $_

最初にCopilotアプリケーションの初期化を行います。

$ copilot app init

アプリケーション名が聞かれるので、任意のアプリケーション名を入力します。

Application name: static-site-app
✔ Proposing infrastructure changes for stack static-site-app-infrastructure-roles
- Creating the infrastructure for stack static-site-app-infrastructure-roles                    [create complete]  [53.0s]
  - A StackSet admin role assumed by CloudFormation to manage regional stacks                   [create complete]  [20.2s]
  - An IAM role assumed by the admin role to create ECR repositories, KMS keys, and S3 buckets  [create complete]  [21.4s]
✔ The directory copilot will hold service manifests for application static-site-app.

Recommended follow-up action:
  - Run `copilot init` to add a new service or job to your application.

次にCopilotサービスを初期化しますが、その前にホスティングするHTML等を配置するディレクトリを作ります。

$ mkdir src

作れたらCopilotサービスを初期化します。
コマンド実行後にサービスのタイプが聞かれるので「Static Site」を選択します。

$ copilot svc init
Note: It's best to run this command in the root of your workspace.

  Which service type best represents your service's architecture?  [Use arrows to move, type to filter, ? for more help]
    Request-Driven Web Service  (App Runner)
    Load Balanced Web Service   (Internet to ECS on Fargate)
    Backend Service             (ECS on Fargate)
    Worker Service              (Events to SQS to ECS on Fargate)
  > Static Site                 (Internet to CDN to S3 bucket)

サービス名は任意のものを入力します。

Service name: static-site

ホスティングするディレクトリ、またはファイルが聞かれるので先程作ったディレクトリを選択します。

Source(s): src

次にホスティングを行う環境の初期化を行います。
任意の環境名を入力（下記の場合はdev）、プロファイルを選択し、構成はデフォルトを選択しました。

$ copilot env init
Environment name: dev
Credential source: [profile your-profile-name]
Default environment configuration? Yes, use default.

この段階でディレクトリの中は以下のようになっています。

.
|- copilot
|   |- environments
|   |   `- dev
|   |       `- manifest.yml
|   `- static-site
|       `- manifest.yml
`- src

サービスの manifest.yml にそのサービスの設定などが書かれています。

$ cat copilot/static-site/manifest.yml
# The manifest for the "static-site" service.
# Read the full specification for the "Static Site" type at:
# https://aws.github.io/copilot-cli/docs/manifest/static-site/

# Your service name will be used in naming your resources like S3 buckets, etc.
name: static-site
type: Static Site
files:
  - source: src
    recursive: true

# You can override any of the values defined above by environment.
# environments:
#   test:
#     files:
#       - source: './blob'
#         recursive: true
#         destination: 'assets'
#         exclude: '*'
#         reinclude:
#           - '*.txt'
#           - '*.png'

このファイルを編集することでデプロイするファイルの設定や、環境ごとに使用するディレクトリを切り替えたりなどができます。（今回はデフォルトのまま使用します）

今回はまだHTMLファイルなどを配置していませんが、この状態で一度デプロイしてみます。
環境→サービスの順にデプロイします。
今回はそれぞれ1つづつしかないので、あるものがデプロイされます

$ copilot env deploy
Only found one environment, defaulting to: dev
✔ Proposing infrastructure changes for the static-site-app-dev environment.
- Creating the infrastructure for the static-site-app-dev environment.        [update complete]  [75.7s]
  - An ECS cluster to group your services                                     [create complete]  [3.8s]
  - A security group to allow your containers to talk to each other           [create complete]  [2.7s]
  - An Internet Gateway to connect to the public internet                     [create complete]  [16.5s]
  - Private subnet 1 for resources with no internet access                    [create complete]  [2.1s]
  - Private subnet 2 for resources with no internet access                    [create complete]  [2.1s]
  - A custom route table that directs network traffic for the public subnets  [create complete]  [9.8s]
  - Public subnet 1 for resources that can access the internet                [create complete]  [2.1s]
  - Public subnet 2 for resources that can access the internet                [create complete]  [2.1s]
  - A private DNS namespace for discovering services within the environment   [create complete]  [49.0s]
  - A Virtual Private Cloud to control networking of your AWS resources       [create complete]  [13.3s]

$ copilot svc deploy
Only found one service, defaulting to: static-site
Only found one environment, defaulting to: dev
✔ Proposing infrastructure changes for stack static-site-app-dev-static-site
- Creating the infrastructure for stack static-site-app-dev-static-site                     [create complete]  [249.9s]
  - A bucket policy to grant CloudFront read access to the Static Site bucket               [create complete]  [1.1s]
  - An S3 Bucket to store the static site's assets                                          [create complete]  [23.9s]
  - A CloudFront distribution for global content delivery                                   [create complete]  [202.7s]
  - Access control to make the content in the S3 bucket only accessible through CloudFront  [create complete]  [0.0s]
  - CloudFront Function to rewrite viewer request to index.html                             [create complete]  [0.0s]
  - An IAM Role for the state machine that moves source files to the S3 bucket              [create complete]  [24.6s]
  - A state machine that moves source files to the S3 bucket                                [create complete]  [3.1s]
  - A policy that gives the Env Manager role access to this site's S3 Bucket                [create complete]  [21.7s]
  - A custom resource that starts the process of moving files to the S3 bucket              [create complete]  [2.4s]
  - An IAM Role for the lambda that starts the process of moving files to the S3 bucket     [create complete]  [23.9s]
  - A lambda that starts the process of moving files to the S3 bucket                       [create complete]  [8.8s]
✔ Deployed service static-site.
Recommended follow-up action:
  - You can access your service at *****.cloudfront.net over the internet.

成功すると最後にホスティングされるURLが表示されます。
しかしこの段階ではまだなにもファイルを配置していないためアクセスしてもエラーになります。

それではここまで成功した状態でHTMLファイルを作成しデプロイしてみます。
以下の3ファイルを作成します。

$ echo "<h1>Hello, Static-Site.</h1>" >src/hello.html
$ echo "<h1>Hello, Static-Site TEST.</h1>" >src/test.html
$ echo "<h1>Index</h1>" >src/index.html
$ ls src/
hello.html	index.html	test.html

デプロイします。（以降は copilot deploy でデプロイ可能です）

$ copilot deploy
Only found one workload, defaulting to: static-site
Only found one environment, defaulting to: dev
✔ Proposing infrastructure changes for stack static-site-app-dev-static-site
- Updating the infrastructure for stack static-site-app-dev-static-site                  [update complete]  [41.8s]
  - An IAM Role for the state machine that moves source files to the S3 bucket           [update complete]  [21.8s]
  - A state machine that moves source files to the S3 bucket                             [update complete]  [0.0s]
  - A custom resource that starts the process of moving files to the S3 bucket           [update complete]  [5.0s]
  - An IAM Role for the lambda that starts the process of moving files to the S3 bucket  [not started]
  - A lambda that starts the process of moving files to the S3 bucket                    [not started]
✔ Deployed service static-site.
Recommended follow-up action:
  - You can access your service at *****.cloudfront.net over the internet.

成功するとそれぞれのファイルにアクセスできることが確認できました。

• https://*****.cloudfront.net/
• https://*****.cloudfront.net/hello.html
• https://*****.cloudfront.net/test.html

不要になったら以下のコマンドですべて削除されます。

$ copilot app delete
Sure? Yes
✔ Delete stack static-site-app-dev-static-site
- Update regional resources with stack set "static-site-app-infrastructure"  [succeeded]        [8.3s]
  - Update resources in region "ap-northeast-1"                              [update complete]  [2.2s]

✔ Deleted service static-site from application static-site-app.
✔ Retained IAM roles for the "dev" environment
✔ Delete environment stack static-site-app-dev
✔ Deleted environment "dev" from application "static-site-app".
✔ Cleaned up deployment resources.
✔ Deleted regional resources for application "static-site-app"
✔ Delete application roles stack static-site-app-infrastructure-roles
✔ Deleted application configuration.
✔ Deleted local .workspace file.