S3への静的サイトホスティングとAmplify Consoleによるデプロイ比較
この記事はサーバーレスWebアプリ Mosaicを開発して得た知見を振り返り定着させるためのハンズオン記事の1つです。
以下を見てからこの記事をみるといい感じです。
イントロダクション
Amplify Consoleの楽さをより実感するために、あえてS3にもデプロイして静的サイトとしてホストします。
静的サイトといえど、Webアプリとして動作します。
コンテンツ
S3バケットの作成
AWSコンソール > S3 > バケットを作成するボタンを押下
適当なバケット名前を入力し、次へ進んでください。
オプションの設定は、デフォルトのまま進みます。
アクセス許可の設定は、「パブリックアクセスをすべてブロック」チェックをOFFにして進みます。
最後のページ確認でバケット作成ボタン押下により、S3バケットが作成されます。
Webアプリケーションのビルド＆デプロイ
Webアプリケーションをビルドします。
$ npm run build
ビルドエラーなく完了すると、distフォルダにデプロイするファイルが発行されています。
このdistフォルダの中身を作成したS3バケットにアップロードします。
$ aws s3 cp ./dist s3://**********/ --recursive --acl public-read --cache-control "max-age=604800"
(※xxxxxxxxxxは作成したバケット名に置き換えてください。)
S3の作成したバケットに、distフォルダの中身がアップロードされていることを確認しておいてください。
S3バケットのバケットポリシー設定
作成したバケット > アクセス権限 > バケットポリシー と選択してゆき、
バケットポリシーエディターに以下を設定し、保存します。
(※xxxxxxxxxxは作成したバケット名に置き換えてください。)
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadForGetBucketObjects",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::xxxxxxxxxx/*"
}
]
}
保存すると、このように、「このバケットにはパブリックアクセス権限があります」というメッセージが表示されます。(バケットにファイルが1つも存在しない場合、この処理は失敗します。)
S3の Static website hostingを有効にする
作成したバケット > プロパティ > Static website hosting を選択し、以下を設定して保存します。
このバケットを使用してウェブサイトをホストする : チェックON
インデックスドキュメント : index.html
アクセスしてみる
Static website hostingの上部に記載されているエンドポイントにアクセスし、アップロードしたWebサイトが正しく表示され、Webアプリとして問題なく動作することを確認してください。
あとがき
いかがでしょうか。
S3の静的サイト作成に対して、Amplifyのアプリ作成、最初の作成の手間こそさほど違いませんが、デプロイの手間の差は結構大きいと感じます。
S3静的サイトホスティングの場合、まずはアプリをビルドし、ビルドが完了するのを待ち、S3にアップロードする、という一連の作業が必要となります。
Amplify Consoleの場合、リポジトリにコミットするだけです。
ビルドを待つ必要もないし、別途アップロードする手間もない。エラーがあれば中止してくれる。
デプロイは何度もする作業ですので、この差は大きいのです。
独自ドメインの設定をするのも、Amplify Consoleのほうが圧倒的に楽なのですが、それについては別記事にしたいと思います。