🪨

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

2024/05/20に公開

Next.js

AWS Amplify Gen 2 (Amplify) について

alt text

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

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

TypeScript の Monorepo
Managed Service を使う。極力

Code はこれ

https://github.com/danny-yamamoto/candy

Configure Monorepo

https://nx.dev/

Nx^[1] を使用する。Turborepo^[2] にも興味がある
- 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^[3]

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

alt text

error log

2024-05-20T00:08:56.701Z [INFO]: # Cloning repository: git@github.com:danny-yamamoto/candy.git
2024-05-20T00:08:57.692Z [INFO]:
2024-05-20T00:08:57.692Z [INFO]: Cloning into 'candy'...
2024-05-20T00:08:57.693Z [INFO]: # Checking for Git submodules at: /codebuild/output/src/src/candy/.gitmodules
2024-05-20T00:08:57.703Z [ERROR]: !!! CustomerError: Build path does not exist, please check the 'buildPath' value in BuildSpec
2024-05-20T00:08:57.703Z [INFO]: # Starting environment caching...
2024-05-20T00:08:57.703Z [INFO]: # Environment caching completed

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

Tips

Amplify 特有の設定です。Amplify フォルダが必要で、そこに resource を追加していく必要がある

GraphQL の Playground が付いてくる

BTW

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

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

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

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

脚注

GitHubで編集を提案

Configure Monorepo

Install Amplify dependencies[3]

Monorepo を deploy する

Tips

BTW

Discussion

Install Amplify dependencies^[3]