[AWS]S3でReact.jsを超爆速簡易型Webホスティングする

Reactを勉強中、それとなくおもしろおかしいWebページをスクラッチで作成することができたので、メンバーに自慢公開した。

今までメンバーに自慢公開する際には、Heroku、GitHub ioなどを使用していたが、S3で爆速にできることが判明したので備忘録として残す。

はじめに

ドメインとの紐付けやSSL対応などは実施しておりません。
なので公開する際には十分に気をつけてください。

ReactPjの準備

公式ドキュメント参照。

$ npx create-react-app my-app
$ cd my-app/
$ yarn build

S3で公開するデプロイようのバケットを作成

S3のコンソールから「バケットを作成する」を押下。

バケット名は任意の値を入力。
※ Route53の独自ドメインを割り当てたい場合は、ドメイン名と同じ値を入力すること。
　ドメイン名はアカウント関係なく、プライマリーなので。。。

リージョンは思いがなければ「アジアパシフィック（東京）」を選択。

入力したら「次へ」を押下。
オプションの設定は特に行わないので、さらに「次へ」を押下。

「パブリックアクセスをすべてブロック」のチェックボックスを外す。

「次へ」を押下し、問題がなければ「バケットを作成」を押下

バケットの作成は完了。

S3の設定を変更

先ほど作成したバケットの「プロパティ」を選択。

Static website hostingを選択し、「このバケットを使用してウェブサイトをホストする」を押下。
インデックスドキュメントに「index.html」と入力し「保存」を押下。

次に、「アクセス権限」を選択し、バケットポリシーを押下。
バケットポリシーには下記文字列を入力する。
[BucketName]には今回作成したバケット名を入力すること。

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

「保存」を押下したら、S3バケットの設定は完了。

ソースコードをアップロード

AWS CLIでやった方がかっこいいけど、手動で。
先ほど作成したReactPJの配下に「build」というディレクトリができているので、開く。

そして、配下のファイルを一括選択して、S3の「概要」めがけてドラッグ&ドロップ。

そしてアップロード。

これで、完了。

確認

StaticWebsiteHostingに記載のあるエンドポイントのURLにアクセス。
http://[BucketName].s3-website-ap-northeast-1.amazonaws.com/
でも可。

無事ブラウザで表示。

まとめ

身内で公開してキャッキャうふふするのであればこれでOKかな？と思う。
次は独自ドメイン化してみようかな。