Announcing AWS Amplify integration with Amazon S3 for static website hosting というリリースが出ていたので、早速使ってみました。
タイトルの通りなのですが、S3には以前から、静的ウェブホスティングの機能がありました。これも簡単だったのですが、今回の発表により、Amplify Hosting を使ったサイト公開の手順をおすすめするボタンが追加されました。
実際にバケットを作って簡単なサイトを公開してみます。 new-amplify-hosting-site というバケットを用意しました。
簡単なHTMLを書いて、バケットにアップロードします。
プロパティのタブを開いて、ページの一番下までスクロールすると、静的ウェブサイトホスティング の項目があります。ここに【Amplifyアプリを作成】のボタンが追加されています。
ボタンを押すと、Amplify Hosting で新しいアプリを作成 というページに遷移します。
先ほど開いていたS3バケットのロケーションが自動セットされています。
アプリケーションの名前やブランチ名は、任意のものに変更することができます。
ブランチ名は最初に設定したものが本番環境のブランチとして扱われるようなので、mainに変更しておきました。
保存してデプロイをクリックすると、デプロイ中の表示に変わるのですが、一瞬すぎてスクリーンショットを撮り逃しました。デプロイが終わったところの画面がこちらです。
デプロイされたURLにアクセスしてみると、It Works！期待通りに動いているようです。
S3のコンソールに戻って、バケットポリシーを確認すると、このように設定されていました。（AWSアカウントIDの部分はサンプルのものに置換してあります）
{
"Version": "2008-10-17",
"Statement": [
{
"Effect": "Deny",
"Principal": "*",
"Action": "s3:*",
"Resource": "arn:aws:s3:::new-amplify-hosting-site/*",
"Condition": {
"Bool": {
"aws:SecureTransport": "false"
}
}
},
{
"Sid": "AllowAmplifyToListPrefix_d1814ix96z1jau_main_",
"Effect": "Allow",
"Principal": {
"Service": "amplify.amazonaws.com"
},
"Action": "s3:ListBucket",
"Resource": "arn:aws:s3:::new-amplify-hosting-site",
"Condition": {
"StringEquals": {
"aws:SourceAccount": "12345678912",
"aws:SourceArn": "arn%3Aaws%3Aamplify%3Aap-northeast-1%3A12345678912%3Aapps%2Fd1814ix96z1jau%2Fbranches%2Fmain",
"s3:prefix": ""
}
}
},
{
"Sid": "AllowAmplifyToReadPrefix_d1814ix96z1jau_main_",
"Effect": "Allow",
"Principal": {
"Service": "amplify.amazonaws.com"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::new-amplify-hosting-site/*",
"Condition": {
"StringEquals": {
"aws:SourceAccount": "12345678912",
"aws:SourceArn": "arn%3Aaws%3Aamplify%3Aap-northeast-1%3A12345678912%3Aapps%2Fd1814ix96z1jau%2Fbranches%2Fmain"
}
}
}
]
}
従来のS3 静的ウェブホスティングではバケット名の成約があったり、独自ドメインやCDNを使いたい場合はさらにCloudFrontの設定が追加で必要です。Amplify Hostingではこれらの機能が既に統合されているため、CloudFrontの知識がなくても簡単にドメインの設定を画面上で行うことができます。
SSL証明書を外部から持ち込んでAmplify Hostingで利用する場合はこちらの記事も参考になりそうなのでご紹介しておきます。
静的ウェブホスティングの機能はAWS初心者がとっつきやすそうな課題の一つです。今回のUpdateで、より簡単にサイト公開ができるようになりました。いままでバケットポリシーやCloudFrontの設定が難解で挫折してしまった方も、かなりハマりどころが減ったので再チャレンジしてみてほしいと思います。
Discussion