10分で完成。AWS Amplifyを利用したNext.jsデプロイ環境の構築
はじめに
Next.jsのデプロイ先として一番最初に上がる選択肢はVercelになるかと思います。
Next.jsの最新の機能も使えるため非常に便利ですが、企業によってはプラットフォームをAWSやAzureに寄せているケースがあり、Vercelは使えないケースも多々あるかと思います。
Next.jsをAWSにデプロイすることは以前から可能となっていましたが、デプロイする先にはさまざまなサービスが候補として挙げられます。
ただ、デプロイするとなるとそれなりにAWSの知識を要することとなり、フロントエンドをメインに担当しているエンジニアには少し敷居が高くなります。
今回は比較的簡単にAWSの知識が薄くてもデプロイが可能なAWS Amplifyを使ってNext.jsのデプロイを行います。
公式ドキュメント
AWS Amplifyの公式ドキュメントにNext.js App Routerのはじめ方が記載されています。
こちらのドキュメントをベースにデプロイ作業を進めていきます。
そして、こちらが今回使うAWS Amplify Next.js (App Router) Starter Templateとなります。
2024/11月現在だとNext.jsはVersion 14を使っているようです。
Amplifyにデプロイするためのいくつかの設定ファイルがありますが、詳しい解説は必要となったタイミングで行います。
今回のゴール
AWS公式が用意しているNext.jsテンプレートのリポジトリを使ってAWS Amplifyにデプロイし実際にアクセスできることを確認します。
その後にローカル環境でNext.jsのコード修正を行い、再びAmplifyにデプロイし修正内容が反映されているところまで確認します。
下記のようなTodoを管理するアプリをデプロイしていきます。
事前準備
- ローカル環境で開発するために、
gitやnode.jsが使える状態であること - AWS アカウントを持っていること
デプロイ手順
それでは早速、デプロイ作業を開始していきます。
まずはテンプレートアプリを自分のリポジトリにコピーします。
公式ドキュメントの「Create repository from template」をクリックするとコピーできます。
AWS Amplifyの画面でGitHubを選択
先ほど作成したリポジトリを選択。
アプリの設定をすることが可能です。
まずはデプロイできることを最優先ということで、そのままでいきます。
設定内容の最終確認です。
画面に記載がありますが、初回のデプロイには2〜5分程度かかります。
デプロイが完了するとアクセス可能なURLがAWSから割り当てられます。
アクセスして下記のような画面が出ましたらデプロイ完了です。
今回提供されているテンプレートアプリはTodoアプリのようです。
+newをクリックして出てきたダイアログに書き込むとTodoが記録されます。
「宿題をやる」というTodoを追加しました。（1件ブランクのTodoを追加したので謎の空白が発生しています。後ほど消します）
以上、簡単ではありましたがデプロイ手順となります。
デプロイ時間によって多少前後しますが、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ファイルをダウンロードします。
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ファイルを開くと下記のコードが確認できます。
import outputs from "@/amplify_outputs.json";
(※一部省略)
Amplify.configure(outputs);
これらによってNext.jsからAmplifyのバックエンドサービスに接続が可能となっています。
このファイル自体はデプロイ時には必要ないため、.gitignoreファイルに登録されています。
# amplify
.amplify
amplify_outputs*
amplifyconfiguration*
画面に削除ボタンをつける
ローカル環境で開発する準備が整いました。
/app/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もこのタイミングで削除しておきました）
本番環境に反映
ローカル環境で動作確認できましたので本番環境に反映します。
リポジトリとAWS Amplifyは既に連携されていて、mainブランチの内容が常に本番環境になる状態です。
ですので下記コマンドでmainブランチにコミットするだけで本番環境に反映される仕組みとなっています。
git add .
git commit -m "add delete button"
git push origin HEAD
一旦、Amplifyの画面に戻るとデプロイ中であることがわかります。
Amplifyの画面ではデプロイ履歴なるものも用意されています。
ようやく終わったようです。5分。。。意外とかかりました。
本番環境のURLにアクセスして同じようにdeleteボタンが表示され、クリックすると削除されればOKです。
データの管理
AWS Amplifyで便利な機能を少しだけご紹介します。
Data managerというページでは先ほどNext.jsで表示していたTodoをこちらでも確認できるようになっています。（確認だけでなく追加、削除も可能）
開発を行なっていく中でサンプルデータが必要なケースが多々あるかと思いますが、こちらで作成してから開発を進めることができます。
また、API playgroundというページでは、GraphQLのコードを書いてデータを取得することも可能となっています。
ローカル環境で開発を進める前にこちらでデータ取得のクエリを試すことが可能です。
サンプルアプリの削除
継続して起動しているとAWSの費用が発生しますので今回は削除しておきます。
左メニューの「General settings」を選択するとアプリ削除の画面が表示されます。
さいごに
今回は公式ドキュメントに従ってAWS Amplifyを使ってNext.jsのデプロイを実施しました。
AWSに精通していなくとも比較的短時間、少ない知識でもデプロイできることがイメージできたかと思います。
PoCなど新規アプリ開発の際にはAWS Amplifyを活用して素早くデモ画面を提供できるかと思います。
AmplifyにはCognitoとの連携も簡単にできるようになっておりますのでAmplifyを使った認証の仕組みについても別の記事で今後ご紹介できればと思います。