AWS Amplifyで始める Reactアプリの自動デプロイ

皆様こんにちは。
AMDlab　Webエンジニアの塚田です。

今回はAWS Amplifyの基本的なデプロイ方法について記述したいと思います。

AWS Amplifyは、フロントエンドとフルスタックのWeb・モバイルアプリケーションを迅速に開発・デプロイできるAWSの開発プラットフォームです。ホスティング、認証、データストア、API、分析などの機能が統合されており、GitHubなどのソースリポジトリと連携することで、CI/CD（継続的インテグレーション/デリバリー）による自動デプロイも簡単に構築できます。

開発者は、Amplifyを使うことでインフラ管理を意識せずにフロントエンド開発に集中できるというメリットがあります。

公式のデプロイ方法などについては

Amplify Docs を参照ください。

Amplifyのデプロイ方法

 

今回はAWS AmplifyにGitHubを連携させて自動でデプロイする方法を取ります。

開発環境などについてはタイトルのみ表示する最小限のReact + TypeScriptの構成となっています。

AWSのアカウントなどは事前に用意してください。IAMユーザーなども適宜ご用意ください。

最初にAWSコンソールにログインし、検索欄に「amplify」と入力して、Amplifyコンソールに遷移します

順を追って設定していきます。

「ソースコードプロバイダーを選択」では「GitHub」を選択し、自分のアカウントなどと紐付けます。

 

テスト用のリポジトリを用意して、ブランチを選択します。

 アプリケーションの設定を行います。

 

「保存してデプロイ」を押します。

 

「デプロイ中」となります。

デプロイに失敗しました。階層がおかしいようです。

修正前

↓

修正後


この修正をするだけだと再度失敗しました。まだ、Amplifyの設定がおかしいようです。

AWS Amplifyのビルド設定を修正する必要があります。ホスティング>ビルドの設定で編集を押す。

以下の設定３つを修正、追加します。

  1. baseDirectory: build （先頭の/を削除）
  2. preBuildフェーズを追加：npm ciで依存関係をインストール
  3. cacheを追加：ビルド速度向上のため

保存します。

概要に戻って「失敗」のリンクを押します。

「このバージョンを再デプロイ」を押します。

 

「デプロイ済み」となりました。amplify-sampleに戻り、「デプロイされたURLにアクセス」を押します。

 

無事表示されました。次に自動デプロイを確認する為、ソースコードのタイトルを変更してGitHubのブランチにプッシュしました。

 

自動でデプロイが実行されていることを確認できます。

変更が反映されたことを確認できました。確認後はAmplify上から削除を忘れないようにしてください。

終わりに

 

今回はAmplifyの基本的なデプロイ方法について紹介しました。他のAWSのサービスについても紹介していきたいと思います。

 

AMDlabでは、開発に力を貸していただけるエンジニアさんを大募集しております。
少しでもご興味をお持ちいただけましたら、カジュアルにお話するだけでも大丈夫ですのでお気軽にご連絡ください！
中途求人ページ: https://www.amd-lab.com/recruit-list/mid-career

カジュアル面談がエントリーフォームからできるようになりました。
採用種別を「カジュアル面談（オンライン）」にして必要事項を記載の上送信してください！
エントリーフォーム: https://www.amd-lab.com/entry

AMDlabのSNSアカウントです！ぜひフォローお願いします✨

■ X（旧Twitter）：https://x.com/amdlabinc
■ Instagram：https://www.instagram.com/amdlabinc/
■ Facebook：https://www.facebook.com/amdlab.lnc/

 

Tech
AWS
ARTICLES