Zenn
🚢

Next.js v14 + pnpm + AWS Amplify v6でデプロイする

2024/05/02に公開
AWS
Next.js
Amplify
hosting
tech

目的

Next.js v14をAWS Amplify v6でデプロイする
パッケージマネージャーはpnpmを使う

環境

"node": "^20",
"aws-amplify": "^6.0.28",
"next": "14.1.4",

Next.jsプロジェクトの作成

すでにプロジェクトGitHub上にある場合はそれを用いて良い

  1. プロジェクトを作成する。
npx create-next-app@latest
  1. 諸々の設定をしていく。
What is your project named? sample
Would you like to use TypeScript? Yes
Would you like to use ESLint? Yes
Would you like to use Tailwind CSS? Yes
Would you like to use `src/` directory? Yes
Would you like to use App Router? (recommended) Yes
Would you like to customize the default import alias (@/*)? Yes
What import alias would you like configured? @/*

これで完了！

  1. GitHub上にリポジトリを作成してpushする。

Amplifyでデプロイ

Amplify CLIを使えるようにする

*すでにinstallしている場合はスキップ

npm install -g @aws-amplify/cli

AmplifyとAWSアカウントを接続する

amplify configure

上記のコマンドを実行するとAWSコンソールにとぶのでIAMユーザーを作成する。

  1. ユーザー名は適当につける。（例：amplify-dev）
  2. 許可ポリシーを設定する。
  3. 「ポリシーを直接アタッチする」を選択し、アクセス許可ポリシーとして 「AdministratorAccess-Amplify」を選択する。
  4. 作成後ユーザー詳細の 「セキュリティ認証情報」に移動し、「アクセスキー作成」でアクセスキーを作成する。
    （説明タグ値は適当につける（例：amplify-dev））
  5. アクセスキーを作成後、Access keyとSecret access keyはコピーしておく。
    （「Download .csv file」を押してcsvをダウンロードするのがおすすめ）
    CLIに戻ってプロンプトで先ほど作成したAccess keyとSecret access keyの入力を求められるので入力する。
Enter the access key of the newly created user:
? accessKeyId:  # YOUR_ACCESS_KEY_ID
? secretAccessKey:  # YOUR_SECRET_ACCESS_KEY
This would update/create the AWS Profile in your local machine
? Profile Name:  # (default)

Successfully set up the new user.

Next.jsプロジェクトにAmplifyをセットアップ

作成したNext.jsプロジェクトでAmplifyバックエンドサービスを使えるようにするために初期化する。

amplify init

コマンドを実行すると以下の入力が求められるので入力していく。

? Enter a name for the project (nextamplified)
The following configuration will be applied:

Project information
| Name: next-amplified
| Environment: dev
| Default editor: Visual Studio Code
| App type: javascript
| Javascript framework: react
| Source Directory Path: src
| Distribution Directory Path: build
| Build Command: npm run-script build
| Start Command: npm run-script start

? Initialize the project with the above configuration? Yes
Using default provider  awscloudformation
? Select the authentication method you want to use: AWS profile

For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-configure-profiles.html

? Please choose the profile you want to use: default

これで初期化完了

初期化で行われること

  • amplifyというトップレベルのディレクトリが作成される。ここでバックエンドの定義をする。
    Webホスティングなどのクラウド機能を追加するとフォルダーが拡張されていく。
  • srcディレクトリの下aws-exports.jsにという名前のファイルが作成される。
    （amplifyconfiguration.jsonも同様の内容、AndroidとiOSのプロジェクト用）
    これにより、Amplifyのjsライブラリがバックエンドサービスに接続するために必要な情報を取得できるようになる。
  • .gitignoreが更新される。amplify initで生成されたいくつかのファイルをリストに追加してくれている。
  • AWS Amplifyコンソールでアプリケーションのプロジェクトを作成する。ここでAmplifyプロジェクトの管理ができる。

AWS Amplifyコンソール上でデプロイ

  1. Amplifyコンソールに移動する。
  2. 作成したプロジェクトを選択する。
  3. 「Frontend environments」を選択する。
  4. 「select a Git provider」を選択する。
  5. 接続するリポジトリとブランチ名を選択する。
    ＊このとき、リポジトリの管理者権限が必要になる。
  6. 今回はpnpmでパッケージ管理をしているのでアプリのbuild設定を変更する必要がある。
    ビルド設定の preBuild段階でpnpmをインストールする。
  version: 1
backend:
  phases:
    build:
      commands:
        - '# Execute Amplify CLI with the helper script'
        - amplifyPush --simple
frontend:
  phases:
    preBuild:
      commands:
        - npm install -g pnpm
        - pnpm install
    build:
      commands:
        - pnpm run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - .next/cache/**/*
      - node_modules/**/*
  1. build設定後再ビルドするとデプロイが成功する

ここまでするとアプリがS3にホスティングされている状態になる。
次にS3でホスティングしていたものをClooudFrontを前においてホスティングする。

ClooudFront+S3にするメリット

  • CloudFront経由でS3にアクセスすることでS３への負荷を減らすことができる。
  • CloudFrontにはCDNなのでキャッシュによる表示速度の高速化の恩恵を受けることができる。
  • 独自ドメインでSSL/TSL経由での配信が可能になる。

ClooudFront+S3でホスティングする

ホスティング設定をする。

amplify add hosting

「Amazon CloudFront and S3」を選択する。

? Select the plugin module to execute …  (Use arrow keys or type to filter)
 Hosting with Amplify Console (Managed hosting with custom domains, Continuous deployment)
❯  Amazon CloudFront and S3

追加されたかどうかを確認する。

amplify status

Hostingが追加されていることを確認できる。

┌──────────┬────────────────────────┬───────────┬───────────────────┐
│ Category │ Resource name          │ Operation │ Provider plugin   │
├──────────┼────────────────────────┼───────────┼───────────────────┤
│ Hosting  │ S3AndCloudFront        │ No Change │ awscloudformation │
└──────────┴────────────────────────┴───────────┴───────────────────┘

設定を反映させる。

amplify push

これでClooudFront+S3でのホスティングが構築完了。

以下、ホスティング環境

参考

https://nextjs.org/docs/getting-started/installation
https://docs.amplify.aws/nextjs/start/getting-started/installation/
https://github.com/aws-amplify/amplify-cli/issues/6382

Discussion