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

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

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

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

無料枠があるので、実際に試してみたい人にも使いやすいですね。

引用
aws.amazon.com

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

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

$ npx create-react-app react-amplify

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

使い方

AWSのページからAmplifyと検索すると、目的のサービスがでてきます。

そしてDeployのほうのGET STARTEDをクリック。

GitHubにチェックをいれて、CONTENUEをクリック。

リポジトリを追加します。先程作成したGitHubのレポジトリを選択します。

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

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

無事にできました。