ReactをAmazon S3にデプロイして公開する

ローカル環境の構築⇒Reactをビルド⇒Amazon S3をホスティングサーバにしデプロイして公開するまでの手順です。

※https対応やドメイン紐づけは行っていません。

Node.jsインストール

何はともあれ、Node.jsのインストールからです。
※Node.jsはサーバーサイドで JavaScript を動かすためのツール。ただ、最近はフロントエンドの JavaScriptフレームワーク（React、Vue、Angular）の開発のために使われることが多いです。

以下から最新版のLTSを取得し、インストールします。

https://nodejs.org/ja/

Reactインストール&サンプルアプリダウンロード

Node.jsの環境ができたらReactをインストールします。
任意のディレクトに移動し、以下のコマンドを実行することで Reactインストールと初期公開用のアプリケーションがダウンロードされます。
※時間かかります。

# npx create-react-app my-app

サンプルアプリビルド

完了したら、以下のコマンドでビルドします。
※ビルドが完了し、buildフォルダを参照すると、html,CSS,Javascriptができているのがわかります。

# cd my-app/
# npm run build

Amazon S3設定

S3のバケットをホスティング環境として設定していきます。
任意のバケットを作成し、以下の設定を行います。

１．S3のコンソールから[静的ウェブサイトホスティング] で [編集] を選択し、有効化します。
インデックスドキュメントには「index.html」を入力します。

２．[アクセス許可]⇒[ブロックパブリックアクセスの(バケット設定)]からチェックを外し保存します。
※この設定を行うと、バケットは公開されます。保存されているファイルの内容を踏まえたうえで設定します。

３．[バケットポリシー]に以下を入力し、保存します。
※ Bucket-Name の箇所を作成したバケット名に置換します。6

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