メインコンテンツまでスキップ

8. Deploy

Next.jsアプリケーションを公開するためには、適切なデプロイメント手順を踏む必要があります。ここでは、Vercelへのデプロイ、その他のデプロイメントオプション、環境変数の管理について説明します。

Vercelへのデプロイ​

Vercelは、Next.jsを開発した企業が提供するホスティングサービスで、Next.jsアプリケーションのデプロイに最適です。Vercelを使用すると、設定が簡単で、自動的なデプロイとプレビュー環境が提供されます。

手順​

  1. Vercelアカウントの作成: Vercelの公式サイトでアカウントを作成します。

  2. 新しいプロジェクトの作成: ダッシュボードから「New Project」をクリックします。

  3. リポジトリのインポート: GitHub、GitLab、またはBitbucketからリポジトリをインポートします。

  4. ビルド設定:

    • フレームワークプリセット: Next.jsを選択します。
    • ビルドコマンド: npm run build
    • パブリッシュディレクトリ: .next

  5. デプロイ: 「Deploy」をクリックしてデプロイを開始します。

その他のデプロイメントオプション​

Next.jsアプリケーションは、Vercel以外にもさまざまなプラットフォームにデプロイできます。ここでは、Netlify、AWS、Dockerを使用したデプロイメント方法を紹介します。

Netlify​

Netlifyは、静的サイトおよびサーバーレスアプリケーションのためのホスティングサービスです。

手順​

  1. Netlifyアカウントの作成: Netlifyの公式サイトでアカウントを作成します。

  2. 新しいサイトの作成: ダッシュボードから「New site from Git」をクリックします。

  3. リポジトリの選択: GitHub、GitLab、またはBitbucketからリポジトリを選択します。

  4. ビルド設定:

    • ビルドコマンド: npm run build
    • パブリッシュディレクトリ: .next

  5. デプロイ: 「Deploy site」をクリックしてデプロイを開始します。

AWS​

AWSは、クラウドベースのホスティングおよびインフラストラクチャサービスを提供します。Next.jsアプリケーションは、Amazon S3、Amazon CloudFront、AWS Amplifyなどを使用してデプロイできます。

手順​

  1. AWSアカウントの作成: AWSの公式サイトでアカウントを作成します。

  2. AWS Amplifyの設定:

    • AWS Amplifyコンソールで新しいアプリを作成します。
    • GitHub、GitLab、またはBitbucketからリポジトリを接続します。
    • ビルド設定を行い、デプロイします。

Docker​

Dockerを使用すると、Next.jsアプリケーションをコンテナ化し、任意の環境にデプロイできます。

手順​

  1. Dockerfileの作成:

    # ベースイメージ
    FROM node:14-alpine

    # 作業ディレクトリの設定
    WORKDIR /app

    # パッケージファイルをコピー
    COPY package*.json ./

    # 依存関係のインストール
    RUN npm install

    # ソースコードをコピー
    COPY . .

    # ビルド
    RUN npm run build

    # ポートを公開
    EXPOSE 3000

    # アプリケーションの起動
    CMD ["npm", "start"]

  2. Dockerイメージのビルドと実行:

    docker build -t my-next-app .
    docker run -p 3000:3000 my-next-app

環境変数の管理​

Next.jsでは、環境変数を使用してアプリケーションの設定を管理できます。環境変数は、.env.localファイルに定義します。

使用例​

  1. .env.localファイルの作成:

    API_URL=https://api.example.com

  2. 環境変数の使用:

    // pages/index.js
    export async function getStaticProps() {
      const res = await fetch(`${process.env.API_URL}/data`);
      const data = await res.json();

      return {
        props: {
          data,
        },
      };
    }

    export default function Home({ data }) {
      return (
        <div>
          <h1>Data from API</h1>
          <pre>{JSON.stringify(data, null, 2)}</pre>
        </div>
      );
    }

このように進めていきます。他に追加や修正の希望があればお知らせください。