フロントエンドチームとバックエンドチームを分離する
フロントエンドチームとバックエンドチームが独立したリポジトリを維持している場合があります。Amplify Gen 2 では、バックエンドのみのコードを含むリポジトリをデプロイできるため、フロントエンドチームとバックエンドチームは相互に独立して運用できます。
バックエンドアプリをデプロイする
-
mkdir backend-app && cd backend-app && npm create amplify@latestを実行してバックエンドのみの Amplify プロジェクトをセットアップします。コードを選択した Git プロバイダーにコミットします。 -
新しいコンソールで
backend-appを接続します。Amplify コンソールに移動して、Create new app を選択します。 -
リポジトリを接続すると、自動検出されるフレームワークは Amplify のみであることに注意してください。
- Save and deploy を選択すると、バックエンドプロジェクトがビルドされます。
フロントエンドアプリをデプロイする
- それでは、フロントエンドアプリをセットアップしてデプロイされたバックエンドに接続しましょう。
Terminal
npm create next-app@14 -- multi-repo-example --typescript --eslint --no-app --no-src-dir --no-tailwind --import-alias '@/*'- Amplify の依存関係をインストールします。
Terminal
cd multi-repo-examplenpm add @aws-amplify/backend-cli aws-amplify @aws-amplify/ui-react- デプロイされたバックエンドに接続するために、以下のコマンドを実行します。バックエンドアプリケーションの
App IDを見つけるには、Amplify コンソールに移動して backend-app を選択します。Overview ページで、App IDはプロジェクト名の下に表示されます。
Terminal
npx ampx generate outputs --branch main --app-id <your-backend-app-id>これにより、プロジェクトのルートにバックエンドに関するすべての情報を含む amplify_outputs.json ファイルが生成されます。
- フロントエンドがバックエンドに接続できることを検証するために、
Authenticatorログインフォームをアプリに追加します。
pages/_app.tsx
import { withAuthenticator } from '@aws-amplify/ui-react';import { Amplify } from 'aws-amplify';import outputs from '@/amplify_outputs.json';import '@aws-amplify/ui-react/styles.css';import '@/styles/globals.css';import type { AppProps } from 'next/app';
// configure the Amplify client library with the configuration generated by `ampx sandbox`Amplify.configure(outputs);
function App({ Component, pageProps }: AppProps) { return <Component {...pageProps} />;}
export default withAuthenticator(App);- リポジトリに
amplify.ymlビルドスペックも追加しましょう。
version: 1backend: phases: build: commands: - npm ci --cache .npm --prefer-offline - npx ampx generate outputs --branch main --app-id BACKEND-APPIDfrontend: phases: build: commands: - npm run build artifacts: baseDirectory: .next files: - '**/*' cache: paths: - .next/cache/**/* - .npm/**/* - node_modules/**/*- それでは、アプリをデプロイしましょう。Amplify コンソールで Create new app を選択します。デフォルト設定でリポジトリを接続します。ビルドが出力を生成し、フロントエンドをデプロイしていないことが表示されます。アプリが正常に機能していることを確認します。
バックエンドの更新でフロントエンドビルドをトリガーする
理想的なシナリオは、バックエンドコードに変更があるたびに、フロントエンドが自動的にバックエンドから最新の更新を取得することです。
-
Amplify コンソールを使用して受信 webhookを作成します。
-
multi-repo-example アプリに移動し、Hosting > Build settings で Create webhook を選択します。webhook の名前を指定し、受信 webhook リクエストでビルドするターゲットブランチを選択します。
- 次に、webhook を選択し、multi-repo-example アプリのビルドをトリガーするために使用される
curlコマンドをコピーします。
- 次に、
backend-appのビルド設定を更新して、バックエンドが変更されるたびにフロントエンドビルドをトリガーするcurlコマンドを含めます。
amplify.yml
version: 1backend: phases: build: commands: - npm ci --cache .npm --prefer-offline - npx ampx pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_IDfrontend: phases: build: commands: - mkdir ./dist && touch ./dist/index.html - curl -X POST -d {} "https://webhooks.amplify.ca-central-1.amazonaws.com/prod/webhooks?id=WEBHOOK-ID&token=TOKEN&operation=startbuild" -H "Content-Type:application/json" artifacts: baseDirectory: dist files: - '**/*' cache: paths: - node_modules/**/*