hiro08gh

FYI

AWS Amplify ConsoleにReactをデプロイする

最近静的サイトをホスティングするサービス(netlify、now etc...)が増えていますが、AWSにもAmplify Consoleというホスティングできるサービスがあることを知りました。ざっとドキュメントを読んだ感じ、非常に簡単に扱えそうなので、Reactアプリケーションをデプロイしていきたいと思います。

Amplify Consoleの記事はこちらでも書いています。
microcms.io

料金体系(記事を書いた時点(2019年9月26日)

無料枠があるので、実際に試してみたい人にも使いやすいですね。
f:id:kamimura-dev:20190926075202p:plain
引用
aws.amazon.com

ベースのプロジェクト作成

create-react-appで作ったプロジェクトをベースとしていきます。ターミナルで作成してみましょう。

$ npx create-react-app react-amplify

これをGitHubにpushしていきます。

使い方

AWSのページからAmplifyと検索すると、目的のサービスがでてきます。
f:id:kamimura-dev:20190926081400p:plain

そしてDeployのほうのGET STARTEDをクリック。
f:id:kamimura-dev:20190926075725p:plain

GitHubにチェックをいれて、CONTENUEをクリック。
f:id:kamimura-dev:20190926081517p:plain

リポジトリを追加します。先程作成したGitHubのレポジトリを選択します。
f:id:kamimura-dev:20190926081621p:plain

ビルドの設定は特に必要なさそうです。設定の拡張で、環境変数を設定できたりします。今回はデフォルトの設定でも大丈夫です。
f:id:kamimura-dev:20190926081832p:plain

デプロイが完了しました。左にあるmaster...amplifyapp.comから始めるURLを飛んでみると、Reactアプリケーションがデプロイできていることがわかります。
f:id:kamimura-dev:20190926082226p:plain

無事にできました。
f:id:kamimura-dev:20190926082547p:plain