【AWS Amplify】React アプリケーションの構築
近頃 React 等で開発した際に、ホスティング方法として「Cloud Front + S3」を手動で構成する手法をよく使用していましたが、手動めんどくさいなぁなんて思っていたところに「AWS Amplify」を見つけたので、今回は フルスタック React アプリケーションを構築する で「AWS Amplify」について学習した内容を備忘録として残しておきたいと思います。
今回は、React アプリケーションをデプロイ + コードの変更の自動デプロイまで行いたいと思います！
AWS Amplify とは
まあ要するに、ウェブアプリでアプリ開発した後に、「AWS Amplify」を使えば、ホスティングやその他認証やストレージなどまるっと簡単に構築できてしまうよって感じのやつだと思います。
React アプリケーションの作成
node.js の環境があることが前提ですが、まずは React アプリケーションの作成を行います。
$ node -v
v18.16.0
$ npx create-react-app amplifyapp
$ cd amplifyapp
$ npm start
React アプリケーションが立ち上がります。
次に、GitHub リポジトリにコードをコミットします。
ですので、ここで GitHub アカウントが必要となります。
Amplify ホスティング
次に、AWS アカウントにログインし、「AWS Amplify」のページから「Amplify ホスティング 使用を開始する」を選択する。
ですので、ここで AWS アカウントが必要となります。
「GitHub」を選択し、「続行」を選択する。
無事認証できたので、「次へ」を選択します。
ビルドの設定はデフォルトのまま「次へ」を選択しました。
次の確認画面でも「保存してデプロイ」を選択すると、私の環境では約 3 分ほどでデプロイ完了しました！
画像左下の https://...amplifyapp.com にアクセスると無事に React アプリケーションが表示されていることを確認できました！
デプロイしたアプリケーションの更新
最後に main ブランチ に変更を加えて、それが自動的にデプロイされるか見てみたいと思います。
下記の変更を コミット + プッシュ します。
- <p>
- Edit <code>src/App.js</code> and save to reload.
- </p>
- <a
- className="App-link"
- href="https://reactjs.org"
- target="_blank"
- rel="noopener noreferrer"
- >
- Learn React
- </a>
+ <h1>Hello from V2</h1>
コミットから、わずか 3 分ほどで再度 https://...amplifyapp.com にアクセスすると更新されていることが確認できました！
所感
初めて「AWS Amplify」を使用していましたが、わざわざローカルでビルドして「S3」にアップロードするという手順を踏まなくても、ホスティングができるのはすごく楽だなと思いました！
また、 GitHub と連携できるのも Good だと感じました！
これから「AWS Amplify」も活用して良き、開発ライフを楽しみたいと思います！
Discussion