導入

AWS Code Build、Code Deploy、GitLab で AWS (アマゾン ウェブ サービス) Elastic Beanstalk、Docker、CI/CD パイプラインを活用すると、Next.js ウェブ アプリケーションの本番環境へのデプロイを合理化かつ効率的に行うことができます。このガイドでは、アプリが堅牢でスケーラブルで、保守が容易であることを保証するための最新のデプロイメント パイプラインのセットアップについて説明します。

前提条件

展開プロセスに入る前に、次のことを確認してください:

• AWS 内に Elastic Beanstalk 環境を作成する権限を持つ AWS ルート アカウントまたは IAM アカウント

• ローカル マシンにインストールされた Docker

• Next.js アプリのリポジトリを含む GitLab または GitHub アカウント

• デプロイの準備ができた Next.js プロジェクト

ステップ 1: AWS Elastic Beanstalk をセットアップする

• Elastic Beanstalk 環境の作成 - AWS マネジメントコンソールにログインし、Elastic Beanstalk に移動して、新しいアプリケーションを作成します。

• アプリケーション名を入力し、[作成]をクリックします。

• アプリケーションを作成したら、次は新しい環境を作成します。 「新しい環境の作成」をクリックします。

• Webサーバー環境を選択します。環境名にはアプリケーション名とともに env というサフィックスが付き、必要に応じて編集できます。

• 有効な環境名をドメインとともに入力します。ドメイン名を入力してください。

• 適切なプラットフォームを選択してください。この場合、プラットフォームとしてマネージド プラットフォームと Docker を選択します。

• AWS Code Pipeline を通じて独自のコードをデプロイするため、アプリケーション コードで [サンプル アプリケーション] を選択します。

• プリセットではデフォルトのままにすることができますが、実稼働アプリケーションの場合は、高可用性インスタンスを使用することをお勧めします。プリセットを選択したら、「次へ」をクリックします。

• 既存のサービス ロールを作成または使用します。 EC2 インスタンスの作成を続行する前に、Elastic Beanstalk サービス ロールと EC2 サービス ロールをセットアップすることが重要です。
  ただし、ターミナルから EC2 インスタンスに SSH 接続する場合は、EC2 キー ペアを追加し、必要な操作を実行するために EC2 インスタンス プロファイルを作成します。

• EC2 インスタンスをデプロイする VPC を選択します。

• VPC を選択した後、各アベイラビリティーゾーンのサブネットを選択します。ロード バランサーとインスタンスを同じパブリック サブネットで実行するには、図に示すようにインスタンスにパブリック IP アドレスを割り当てます。

• データベースを設定する必要がないため、[次へ]をクリックして次のステップに進むことができます。

• ルート ボリュームには、汎用 SSD を選択します。

• セキュリティ グループから、既存のセキュリティ グループから選択するか、そのままにしておくことができます。EC2 インスタンスのセットアップ中に Elastic Beanstalk がセキュリティ グループを作成します。

• 運用目的でデプロイする場合は、自動スケーリングを設定し、トラフィックを処理するために Elastic Beanstalk が作成するインスタンスのタイプを選択することを常にお勧めします。 t3ファミリーと一緒に行きます。

• [次へ]をクリックします。

• 健康レポートでは基本レポートを使用しますが、必要なレポートの種類に基づいて利用可能なオプションから自由に選択してください。

• デモ ウェブサイトには必要ないため、マネージド プラットフォームのアップデートのチェックも外します。

• 残りの設定はそのままにして、「次へ」をクリックします。

• 最後に、変更内容を確認して、[送信] をクリックします。

• Elastic Beanstalk が環境を起動しますが、しばらく時間がかかります。

• 起動が成功すると、おめでとう画面が表示されます。

ステップ 2: Next.js アプリを作成する (または既存のアプリを使用する)

• Next.js アプリを作成するには、ターミナルを開き、アプリを作成するディレクトリに移動し、次のコマンドを実行します。

npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter" 

すでに既存のコードの準備ができている場合は、次のパートに進んでください

• nextjs-blog という新しいディレクトリが作成されました。それに cd してみましょう:

cd nextjs-blog 

次に、次のコマンドを実行します:

npm run dev 

これにより、Next.js アプリの「開発サーバー」 (詳細は後ほど) がポート 3000 で起動します。

動作するか確認してみましょう。ブラウザで http://localhost:3000 を開きます。

• 今度は、アプリケーション内に Dockerfile を作成します。

• アプリケーションのルートに Dockerfile という名前のファイルを作成し、次のコードを追加します。
  

FROM node:18-alpine 

RUN mkdir -p /app 

WORKDIR /app 

COPY . . 

RUN npm install 

RUN npm run build 

EXPOSE 3000 

CMD ["npm", "start"] 

• 変更を加えた後、ビルドが成功したかどうかを確認することが重要です。 Docker エンジンを起動し、次のコマンドを実行します。

docker build -t testapp . 

ビルドが成功したら、次のコマンドを使用してアプリケーションを実行します:

docker run -p 3000:3000 testapp 

• アプリケーションのルートに buildspec.yml という名前のファイルを作成し、次のコードを追加します。このファイルは、後の段階で AWS 内でコード パイプラインを設定するときに使用されます。

version: 0.2 

artifacts: 

  type: zip 

  files: 

    - '**/*' 

• これらのファイルを新規または既存のコードに追加した後、これらの変更を Gitlab または GitHub のリモート リポジトリにプッシュします。

ステップ 3: コード パイプラインのセットアップ

• AWS マネジメント コンソールにログインし、[コード パイプライン] に移動して、[パイプラインの作成] をクリックします。

• 有効なパイプライン名を入力し、パイプラインの実行モードを選択します。この例では、[Queued] (パイプライン タイプ V2 が必要) を選択します。

• 新しいサービス ロールが存在しない場合は作成するか、既存のサービス ロールから選択して [次へ] をクリックします。

• ソースプロバイダーから、アーティファクトの保存場所を選択します。 「Gitlab」を選択します。

• 接続リストから既存の接続を選択するか、新しい接続を作成します。

• 接続が成功したら、コードが使用されるリポジトリ名とブランチを選択します。

• トリガー タイプとして [フィルターなし] を選択し、[次へ] をクリックします。

• 次に、ビルド プロバイダーを選択します。この例では、AWS Code Build を選択します。リージョンを選択するか、デフォルトの AWS リージョンのままにします。

• 次に、[プロジェクトの作成] をクリックして、Code Build で新しいプロジェクトを作成します。新しいウィンドウが開きます。プロジェクト名を入力し、環境内のすべてをデフォルトのままにします。

• ビルド仕様を指定する場合は、必ず [Buildspec ファイルを使用する] を選択してください。これは前に作成したのと同じファイルです。他の設定はデフォルトのままにして、次のステップに進みます。

• [コード パイプラインの続行] をクリックすると、ウィンドウが自動的に閉じて、コード パイプライン画面に戻ります。

• ビルド タイプを単一ビルドとして指定し、[次へ] をクリックします。

• デプロイの追加ステージで、デプロイ プロバイダーを選択します。この場合、アプリケーションを最終的にデプロイするのは AWS Elastic Beanstalk になります。

• アプリケーション名、環境名を選択し、ロールバック設定を構成し、「次へ」をクリックします。コード パイプラインの設定を確認し、[パイプラインの作成] をクリックします。

ステップ 4: ウェブサイトが公開されました!

Next.js ウェブアプリケーションを本番環境にデプロイするのは非常に簡単で、AWS Code Build、Code Deploy、GitLab を使用した AWS Elastic Beanstalk、Docker、CI/CD パイプラインを使用するとより効率的に実行できます。

Elastic Beanstalk が提供する URL を使用してアクセスできます。ローカルで変更を加えると、ブランチにプッシュすると自動的にデプロイされます。

コーディングを楽しんでください!!