概要
今回はTerraformを使ってAWS Amplifyを構築し、Reactアプリケーションを自動でデプロイする方法について解説していきたいと思います。
目次
やったこと
-
TerrafoemでAmplifyを構築する
-
構築したAmplifyに対して、Reactアプリをデプロイする
今回は「2」について解説する内容となっております。
構成イメージ
構成イメージは下記になります。
手順
ステップ1：Reactプロジェクトを作成
appディレクトリに対してReactプロジェクトを作成していきましょう。
（今回はViteを使ったReactプロジェクトを使用します）
Reactプロジェクトを作成後、npmもインストールしておきましょう。
cd プロジェクト名
npm create vite@7.0.0 app -- --template react-ts
cd app
npm install
npm install --save-dev @aws-amplify/backend@1.16.1 @aws-amplify/backend-cli@1.8.0
プロジェクト作成後、バックエンドを構築できるようappディレクトリ配下で以下準備をします。
└── amplify/ # バックエンドを構築するためのディレクトリ
├── auth/ # リソースごとにディレクトリを分ける
│ └── resource.ts # リソースを定義するファイル
└── backend.ts # バックエンドを構築するためのファイル
backend.ts
バックエンド全体の基本設定を定義します。
import { defineBackend } from "@aws-amplify/backend";
import { auth } from "./auth/resource";
export const backend = defineBackend({
auth,
});
resource.ts
リソースを構築します。
今回はAmazon Cognitoを試しに構築してみましょう。
import { defineAuth } from "@aws-amplify/backend";
export const auth = defineAuth({
loginWith: {
email: true,
},
});
ステップ2：Amplifyにデプロイ
構築したReactプロジェクトをAmplifyにデプロイしていきましょう。
これまでの作業内容をコミットし、リモートリポジトリに反映していきます。
cd プロジェクト名
git add .
git commit -m "任意のコメント"
## コメント規則：
## init: プロジェクト作成
## fix：バグ修正
## add：新規（ファイル）機能追加
## update：機能修正（バグではない）
## remove：削除（ファイル）
git branch -M main
git push -u origin main
マネコン上にて構築したAmplifyを押下します。
OAuthの代わりにGithubアプリを使用してリポジトリにアクセスすることを推奨されていますが今回はスルーさせて頂きます。
下の方にブランチが表示されているので、「main」を押下します。
「ジョブを実行」を押下し、デプロイを実行しましょう。
初回のみの操作になります。
下記画像のように「デプロイ済み」と表示されたら成功です！
ドメインに表示されているURL押下すると、ブラウザ上でアプリの画面が表示されます。
Cognito側でも認証機能が作成されていることが確認できました。
まとめ
今回はReactアプリをAmplifyにデプロイすることができました。
Amplifyとアプリを明確に分担することで保守性が担保されつつ、全スコープをコード管理できることに利点を感じられました。