概要
以前の記事で作成したWebアプリケーションをAWS S3とRoute53を使ってWeb上に公開してみたいと思います。
具体的にはAWSの静的ウェブサイトホスティング機構を利用します。以下は公式のドキュメントです。
https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/WebsiteHosting.html
リポジトリ
https://github.com/enuswi/react-app
本投稿時点のcommit
https://github.com/enuswi/react-app/commit/a74409890292c4e96140361d682a4ec869510a89
＊cloud9(EC2)環境上であれば上記リポジトリのREADME「開発セットアップ(Cloud9)」の通りで動作確認できると思います(2020.01.06)
前提
- AWSアカウントを所持
- 自由に使える独自ドメインを所持
- VPCの設定やホストゾーンの作成は済み
大まかな流れ
- ビルドして出力されたdist以下のファイルをS3バケットにアップロード
- S3バケットの公開
- Route53にレコードを新規作成
- 動作確認
1. S3バケットのセットアップ
まずはS3のコンソールからバケットを作成します。
とりあえずバケット名とリージョンを指定し「作成」をクリックします。
バケット名は後ほどRoute53で作成するレコードセットにつける名前と一致させる必要があります。そうしないとレコードセットのエイリアス先の候補に出て来ません。
ちなみに今回は「s3.react-app.xxxxx.yyy」と名付けました。
＊「xxxxx.yyy」の部分は独自ドメイン
Static website hostingの設定
上記で作成したバケットの「プロパティ」タブを開き「Static website hosting」の設定をします。
- 「このバケットを使用してウェブサイトをホストする」にチェック
- 「インデックスドキュメント」の項目に「index.html」と入力
- 「保存」
- エンドポイントの内容は後ほどRoute53のレコードセット作成の際に利用します。
＊ index.htmlは適宜書き換えてください。
バケットへのアップロード
以前、作成したプロジェクトをビルドし、出力されたファイルをこのバケットにアップロードします。
Static website hostingのインデックスドキュメントに設定した「index.html」が存在しないとアクセス時に404エラーとなるので最低限アップロードする必要があります。
2. S3バケットの公開
アクセス権の設定を行います。
バケットの「アクセス権限」タブを開き以下2つの設定をしていきます。
- ブロックパブリックアクセス
- バケットポリシー
ブロックパブリックアクセス
静的ウェブサイトをホストする場合は
「パブリックアクセスをすべてブロック」の項目のチェックを外します。
保存時に確認画面が表示されるのでその通りにします。
バケットポリシー
公式チュートリアルの通りですが、
以下のバケットポリシーの「example-bucket」の部分を上記で指定したバケット名に変更したものを「バケットポリシーエディター」に貼り付け保存します。
https://docs.aws.amazon.com/ja_jp/AmazonS3/latest/dev/HostingWebsiteOnS3Setup.html#step3-add-bucket-policy-make-content-public
{
"Version":"2012-10-17",
"Statement":[{
"Sid":"PublicReadForGetBucketObjects",
"Effect":"Allow",
"Principal": "*",
"Action":["s3:GetObject"],
"Resource":["arn:aws:s3:::example-bucket/*"
]
}
]
}
3. Route53にレコードを新規作成
続いてRoute53の設定です。
Route53コンソールから使用するホストゾーンへ移動し「レコードセットの作成」をクリックします。
すると右側に作成フォームが表示されるので内容を埋めていき最後に「作成」をクリックします。
名前
...S3バケット作成時につけた名前を入力します。
＊ 私の場合は、「s3.react-app」を入力します
タイプ
...今回はタイプ「A-IPv4アドレス」を選択します。
＊ 他のタイプ含め、Route53については今度時間をとって学びたいです。
エイリアス
...「はい」を選択し、さらにエイリアス先を選択します。レコードセット名とバケット名が異なると候補に出てこないようです。今回はその2つを併せているので正しい選択肢が表示されていると思います。
4. 動作確認
Route53で設定したアドレスにアクセスするとS3バケットに設置したindex.htmlが表示されているはずです。
その他、プロパティから「サーバーアクセスのログ記録」を設定すればアクセスログを記録できたりCloudFrontと組み合わせて高速にしたりできるようです。
さいごに
今までLaravel等のフレームワーク(以下、FW)を利用していて、FWがよしなにやってくれていることがたくさんあることは理解していました。
2020年は、基本的にはFWが頑張ってくれている部分を勉強する年にしたいと思っての備忘録をアップしていければと思っております。
間違い等ございましたらご指摘くださいますと幸いです。
次回は、githubとcode3兄弟を組み合わせてビルド・デプロイの仕組みを作ってみたいと思います。