SPAアプリケーションをCloudFrontで公開¶

第３回目で扱ったS3＋CloudFrontで静的Webサイトを公開してみると同じ方法でSPAのリソース一式をインターネット上に公開します。

■ビルド¶

Cloud9上で下記コマンドを実行し、ReactのSPAをビルドします。

cd ~/environment/study2-4-sources/spa-client
npm run build

ビルドが成功すると"build"というフォルダにindex.htmlとminifyされたjsやcssのリソースが出力されています。

■デプロイ¶

下記コマンドでS3バケットを作成してbuild成果物をアップロードします。

ACCOUNT_ID=`aws sts get-caller-identity | jq -r ".Account"`
aws s3 mb s3://study2-4-${ACCOUNT_ID}

aws s3 cp ./build s3://study2-4-${ACCOUNT_ID} --recursive

参考:s3コマンドラインリファレンス

■CloudFrontで公開¶

S3＋CloudFrontで静的Webサイトを公開してみると同じ手順で、作成したS3バケット上のWebリソースをCloudFrontで公開します。