10分で完成。AWS Amplifyを利用したNext.jsデプロイ環境の構築

2024/11/05に公開

はじめに

Next.jsのデプロイ先として一番最初に上がる選択肢はVercelになるかと思います。

Next.jsの最新の機能も使えるため非常に便利ですが、企業によってはプラットフォームをAWSやAzureに寄せているケースがあり、Vercelは使えないケースも多々あるかと思います。

Next.jsをAWSにデプロイすることは以前から可能となっていましたが、デプロイする先にはさまざまなサービスが候補として挙げられます。

ただ、デプロイするとなるとそれなりにAWSの知識を要することとなり、フロントエンドをメインに担当しているエンジニアには少し敷居が高くなります。

今回は比較的簡単にAWSの知識が薄くてもデプロイが可能なAWS Amplifyを使ってNext.jsのデプロイを行います。

公式ドキュメント

AWS Amplifyの公式ドキュメントにNext.js App Routerのはじめ方が記載されています。

こちらのドキュメントをベースにデプロイ作業を進めていきます。

https://docs.amplify.aws/nextjs/start/quickstart/nextjs-app-router-client-components/

そして、こちらが今回使うAWS Amplify Next.js (App Router) Starter Templateとなります。

2024/11月現在だとNext.jsはVersion 14を使っているようです。

https://github.com/aws-samples/amplify-next-template

Amplifyにデプロイするためのいくつかの設定ファイルがありますが、詳しい解説は必要となったタイミングで行います。

今回のゴール

AWS公式が用意しているNext.jsテンプレートのリポジトリを使ってAWS Amplifyにデプロイし実際にアクセスできることを確認します。

その後にローカル環境でNext.jsのコード修正を行い、再びAmplifyにデプロイし修正内容が反映されているところまで確認します。

下記のようなTodoを管理するアプリをデプロイしていきます。

Image from Gyazo

事前準備

  • ローカル環境で開発するために、gitnode.jsが使える状態であること
  • AWS アカウントを持っていること

デプロイ手順

それでは早速、デプロイ作業を開始していきます。

まずはテンプレートアプリを自分のリポジトリにコピーします。

公式ドキュメントの「Create repository from template」をクリックするとコピーできます。

Image from Gyazo

AWS Amplifyの画面でGitHubを選択

Image from Gyazo

先ほど作成したリポジトリを選択。

Image from Gyazo

アプリの設定をすることが可能です。

まずはデプロイできることを最優先ということで、そのままでいきます。

Image from Gyazo

設定内容の最終確認です。

画面に記載がありますが、初回のデプロイには2〜5分程度かかります。

Image from Gyazo

デプロイが完了するとアクセス可能なURLがAWSから割り当てられます。

Image from Gyazo

アクセスして下記のような画面が出ましたらデプロイ完了です。

今回提供されているテンプレートアプリはTodoアプリのようです。

+newをクリックして出てきたダイアログに書き込むとTodoが記録されます。

Image from Gyazo

「宿題をやる」というTodoを追加しました。(1件ブランクのTodoを追加したので謎の空白が発生しています。後ほど消します)

Image from Gyazo

以上、簡単ではありましたがデプロイ手順となります。

デプロイ時間によって多少前後しますが、10分もあれば説明を読みながらでも十分完了したかと思います。

これだけでは開発現場で役に立たない。という方に向けていくつか実践的な内容をご紹介していきます。

ローカル環境で開発

ローカル環境で開発する手順をご紹介していきます。

今回は公式ドキュメントに書いてある削除ボタンの追加を行ってみようと思います。

リポジトリのローカルにコピー

まずは最初にコピーしたリポジトリをローカルに落としてきます。

そして、必要なパッケージをダウンロードします。

git clone git@github.com:shinagawa-web/amplify-next-template.git
cd amplify-next-template && npm install

バックエンドの設定情報をダウンロード

一旦、Amplifyの画面に戻ります。

Deployed backend resourcesというタブを開くと、Download amplify_outputs.json fileというボタンが現れますのでクリックしてjsonファイルをダウンロードします。

Image from Gyazo

amplify_outputs.jsonについて少し解説します。

{
  "auth": {
    "user_pool_id": "ap-northeast-1_GWrP6bLZW",
    "aws_region": "ap-northeast-1",
    "user_pool_client_id": "4i56nhb28ftc251lp6fdn92r6e",
    "identity_pool_id": "ap-northeast-1:743f1a0f-b4dc-4f91-89e3-bd10b01f700e",
    "mfa_methods": [],
    "standard_required_attributes": [
      "email"
    ],
    "username_attributes": [
      "email"
    ],
    "user_verification_types": [
      "email"
    ],
    "mfa_configuration": "NONE",
    "password_policy": {
      "min_length": 8,
      "require_lowercase": true,
      "require_numbers": true,
      "require_symbols": true,
      "require_uppercase": true
    },
    "unauthenticated_identities_enabled": true
  },
  "data": {
    "url": "https://jx3glrsb7na3dfhorqyb3hl5ne.appsync-api.ap-northeast-1.amazonaws.com/graphql",
    "aws_region": "ap-northeast-1",
    "api_key": "xxx-xxxxxxxxxxxxxxxxxxxxxxxxxx",
    "default_authorization_type": "API_KEY",
    "authorization_types": [
      "AMAZON_COGNITO_USER_POOLS",
      "AWS_IAM"
    ],
    "model_introspection": {
      "version": 1,
      "models": {
        "Todo": {
          "name": "Todo",
          "fields": {
            "id": {
              "name": "id",
              "isArray": false,
              "type": "ID",
              "isRequired": true,
              "attributes": []
            },
            "content": {
              "name": "content",
              "isArray": false,
              "type": "String",
              "isRequired": false,
              "attributes": []
            },
            "createdAt": {
              "name": "createdAt",
              "isArray": false,
              "type": "AWSDateTime",
              "isRequired": false,
              "attributes": [],
              "isReadOnly": true
            },
            "updatedAt": {
              "name": "updatedAt",
              "isArray": false,
              "type": "AWSDateTime",
              "isRequired": false,
              "attributes": [],
              "isReadOnly": true
            }
          },
          "syncable": true,
          "pluralName": "Todos",
          "attributes": [
            {
              "type": "model",
              "properties": {}
            },
            {
              "type": "auth",
              "properties": {
                "rules": [
                  {
                    "allow": "public",
                    "provider": "apiKey",
                    "operations": [
                      "create",
                      "update",
                      "delete",
                      "read"
                    ]
                  }
                ]
              }
            }
          ],
          "primaryKeyInfo": {
            "isCustomPrimaryKey": false,
            "primaryKeyFieldName": "id",
            "sortKeyFieldNames": []
          }
        }
      },
      "enums": {},
      "nonModels": {}
    }
  },
  "version": "1.1"
}

これは今回私がデプロイした時の設定情報なのですが、jsonファイルは大きく2つの構成になっています。

  • auth: AWSの認証サービスであるCognitoに関する設定情報
  • data: AWSのGraphQLサービスであるApp Syncに関する設定情報

このようにAmplifyで構築したバックエンドサービスの設定情報をダウンロードしておくことで、
ローカル環境でNext.jsを起動したときもバックエンドサービスにアクセスして開発できるようになります。

※api_keyに関してはダミーに置き換えています。

/app/page.tsxファイルを開くと下記のコードが確認できます。

page.tsx

import outputs from "@/amplify_outputs.json";

(※一部省略)

Amplify.configure(outputs);

これらによってNext.jsからAmplifyのバックエンドサービスに接続が可能となっています。

このファイル自体はデプロイ時には必要ないため、.gitignoreファイルに登録されています。

# amplify
.amplify
amplify_outputs*
amplifyconfiguration*

画面に削除ボタンをつける

ローカル環境で開発する準備が整いました。

/app/page.tsxファイルを開いてコード書いていきます。

page.tsx

(※一部省略)

  function createTodo() {
    client.models.Todo.create({
      content: window.prompt("Todo content"),
    });
  }

+   function deleteTodo(id: string) {
+     client.models.Todo.delete({ id });
+   }

  return (
    <main>
      <h1>My todos</h1>
      <button onClick={createTodo}>+ new</button>
      <ul>
        {todos.map((todo) => (
-           <li key={todo.id}>{todo.content}</li>
+           <li key={todo.id} style={{ display: 'flex', justifyContent: 'space-between' }}>
+             {todo.content}
+             <button onClick={() => deleteTodo(todo.id)}>delete</button>
+             </li>
        ))}
      </ul>
      <div>
        🥳 App successfully hosted. Try creating a new todo.
        <br />
        <a href="https://docs.amplify.aws/nextjs/start/quickstart/nextjs-app-router-client-components/">
          Review next steps of this tutorial.
        </a>
      </div>
    </main>
  );
}

削除用のボタンを作成し、削除ボタンがクリックされると、deleteTodoにて対象のIDのTodoを削除します。

動作確認

削除ボタンが作成できましたのでNext.jsをローカルで起動して動作確認を行います。

npm run dev

下記の画面のようにdeleteをクリックして削除されればOKです。(ブランクのTodoもこのタイミングで削除しておきました)

Image from Gyazo

本番環境に反映

ローカル環境で動作確認できましたので本番環境に反映します。
リポジトリとAWS Amplifyは既に連携されていて、mainブランチの内容が常に本番環境になる状態です。
ですので下記コマンドでmainブランチにコミットするだけで本番環境に反映される仕組みとなっています。

git add .
git commit -m "add delete button"
git push origin HEAD

一旦、Amplifyの画面に戻るとデプロイ中であることがわかります。

Image from Gyazo

Amplifyの画面ではデプロイ履歴なるものも用意されています。
ようやく終わったようです。5分。。。意外とかかりました。

Image from Gyazo

本番環境のURLにアクセスして同じようにdeleteボタンが表示され、クリックすると削除されればOKです。

データの管理

AWS Amplifyで便利な機能を少しだけご紹介します。

Data managerというページでは先ほどNext.jsで表示していたTodoをこちらでも確認できるようになっています。(確認だけでなく追加、削除も可能)

開発を行なっていく中でサンプルデータが必要なケースが多々あるかと思いますが、こちらで作成してから開発を進めることができます。

Image from Gyazo

また、API playgroundというページでは、GraphQLのコードを書いてデータを取得することも可能となっています。

ローカル環境で開発を進める前にこちらでデータ取得のクエリを試すことが可能です。

Image from Gyazo

サンプルアプリの削除

継続して起動しているとAWSの費用が発生しますので今回は削除しておきます。

左メニューの「General settings」を選択するとアプリ削除の画面が表示されます。

Image from Gyazo

さいごに

今回は公式ドキュメントに従ってAWS Amplifyを使ってNext.jsのデプロイを実施しました。

AWSに精通していなくとも比較的短時間、少ない知識でもデプロイできることがイメージできたかと思います。

PoCなど新規アプリ開発の際にはAWS Amplifyを活用して素早くデモ画面を提供できるかと思います。

AmplifyにはCognitoとの連携も簡単にできるようになっておりますのでAmplifyを使った認証の仕組みについても別の記事で今後ご紹介できればと思います。

記事に関するお問い合わせ📝

記事の内容に関するご質問、ご意見などは、下記よりお気軽にお問い合わせください。
ご質問フォームへ

技術支援などお仕事に関するお問い合わせ📄

技術支援やお仕事のご依頼に関するお問い合わせは、下記よりお気軽にお問い合わせください。
お問い合わせフォームへ