Deploy Next.js Monorepo using Nx on AWS Amplify Gen 2.

AWS Amplify Gen 2 (Amplify) について

GA になったため、使い方を学んでいく

進めるにあたり、前提は以下の通り

• TypeScript の Monorepo
• Managed Service を使う。極力

Code はこれ

Configure Monorepo

• Nx¹ を使用する。Turborepo² にも興味がある
  • Org: candy
  • Next.js
  • e2e: Playwright
  • CSS: Tailwind CSS

npx create-nx-workspace

npx nx build front-a
npx nx start front-a

Install Amplify dependencies³

• Nx に Amplify 関連の dependencies を追加する

npx nx add @aws-amplify/backend-cli aws-amplify @aws-amplify/ui-react
npx nx add @aws-amplify/backend
npx nx add @aws-amplify/ui-react
npx nx add aws-cdk-lib

• 公式の template から Code を持ってくる

Monorepo を deploy する

• Console に従う。モノレポにチェックを入れて Directory を入力する apps/front-a
• Build 設定を一部変更する
  • Before: buildPath: dist/apps/front-a
  • After: buildPath: apps/front-a

amplify.yml

version: 1
applications:
  - backend:
      phases:
        build:
          commands:
            - npm ci --cache .npm --prefer-offline
            - npx ampx pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_ID
    frontend:
      phases:
        build:
          commands:
            - npx nx build front-a
      artifacts:
        baseDirectory: .next
        files:
          - '**/*'
      cache:
        paths:
          - .next/cache/**/*
          - .npm/**/*
      buildPath: apps/front-a
    appRoot: apps/front-a

BTW

転職して 2 ヶ月が過ぎようとしている

個人的には Mission への共感は日に日に増している

そして、お互いを労い、望ましい言動に報酬を送り合う制度は、Value をより強化していると思う

私にとって、Respect し合える Member の存在こそが最大の福利厚生だと思う。福利厚生や報酬に目が向きがちですが

1. https://nx.dev/ ↩

2. https://turbo.build/ ↩

3. https://docs.amplify.aws/react/deploy-and-host/fullstack-branching/mono-and-multi-repos/ ↩