JamstackのAPPをS3とCloudFrontでホスト

Gatsbyを触り始めてからJamstackを知り、Jamstackのメリットをたくさん実感しました。Jamstackプログラムを静的なhtmlに出力でき、進化しつつあるブラウザとJavaScriptに恵まれ、ただの表示だけではなく、ユーザが様々なことを行えるようになりました。プラグイン（例えば本ブログのDISQUS）を使用（作る）すれば、低コストだが無限大なウェブサイトを構築できるでしょう。実は2020 Jamstack Conf開催後のTシャツオンラインショップはJamstackのGatsbyで作られました。

Jamstackのデプロイというと、定番のNetlifyの方軍配が上がると思いますが（NetlifyへのCD方法へ）、今日は熱熱のAWSへデプロイしてみましょう。

S3

1. S3 Bucketの作成

   ※このS3 Bucketをウェブサイトとして公開するため、「Block all public access」をオフにしましょう。

   

2. S3 Bucketに生成された静的なファイルをアップロード

   

3. BucketのPropertiesにStatic website hostingを有効へ

   

4. BucketのPermissionsにBucket policyの編集

   下記のポリシーを追加（Bucket名を合わせてください）

   123456789101112{
       "Version": "2012-10-17",
       "Statement": [
           {
               "Sid": "PublicReadGetObject",
               "Effect": "Allow",
               "Principal": "*",
               "Action": "s3:GetObject",
               "Resource": "arn:aws:s3:::my-aws-bucket/*"
           }
       ]
   }
   

   

5. S3でJamstackウェブサイトの公開が完了

   Properties → Static website hostingでEndpointのURLを確認できます。

   ※1. my-aws-bucket

   ※2. リージョン

   

CloudFront

Static websiteなら、CDNは必須となるでしょう。Netlifyにアップロードすると、CDNの設定は自動的に行ってくれるけど、AWSならCloudFrontの設定が必要となります。例として、一番シンプルな方向でいきましょう。

1. Distributionを作成

   

   • Origin Domain Nameに先ほど作ったS3 Bucketを選ぶ

   

   • Default Root Objectにindex.htmlへ

   

2. 作成完了

   

3. 確認

   Domain Nameのところに自動生成されたドメイン名があります。アクセスしてみてください

その他

Jamstackで生成した静的なhtmlなどの公開手続きが完了しました。管理コンソールではかなり面倒なので、CLIを使ったらCDできるでしょう。そして、Route53でカスタマイズドメインの設定とACMでSSL証明書の取得と設定は必要でしょう。今度は割愛します。ではでは。