はじめに

Next.jsを使用したアプリケーションはVercelにデプロイすることが多いと思います。

しかしVercelのHobbyプランでは、規約として商用利用をすることができません。(赤字は筆者)

Hobby teams are restricted to non-commercial personal use only. All commercial usage of the platform requires either a Pro or Enterprise plan.

Commercial usage is defined as any Deployment that is used for the purpose of financial gain of anyone involved in any part of the production of the project, including a paid employee or consultant writing the code. Examples of this include, but are not limited to, the following:

• Any method of requesting or processing payment from visitors of the site
• Advertising the sale of a product or service
• Receiving payment to create, update, or host the site
• Affiliate linking is the primary purpose of the site
• The inclusion of advertisements, including but not limited to online advertising platforms like Google AdSense

そのため、広告を載せたブログや、ユーザへの課金を行うWebアプリケーションなどを運営する際は、VercelのPro/Enterpriseプランを契約するか、他のホスティングサービスを使う必要があります。

本記事では他のホスティングサービスにNext.jsアプリケーションをデプロイするための前段として、Next.jsをコンテナ化する方法を解説します。

追記

こちらに記載のある通り、以下のコマンドでNext.jsアプリケーションを作成すれば、Dockerfileが含まれているNext.jsプロジェクトを作成することができます。

npx create-next-app --example with-docker nextjs-docker

コンテナ化したいNext.jsアプリケーションを新しく作成する際は、このコマンドだけで完結します。

既存のNext.jsアプリケーションにDockerfileを追加する場合は、「Next.jsアプリケーションのコンテナ化」の手順を参考にDockerfileを準備します。

Next.jsアプリケーションの作成

まずNext.jsアプリケーションの作成を行います。

1. Terminalで以下のコマンドを実行します。

公式ドキュメントの「Automatic installation」手順に従い、操作を行います。

npx create-next-app@latest

インストールにあたって、以下のことを聞かれるので好みの応じてYes / Noを選択してください。

What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like your code inside a `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to use Turbopack for `next dev`?  No / Yes
Would you like to customize the import alias (`@/*` by default)? No / Yes
What import alias would you like configured? @/*

Next.jsアプリケーションの起動

公式ドキュメントの「Run the development server」の手順に従って、開発サーバを起動します。

1. 開発サーバを起動する

npm run dev

2. Webブラウザから以下のアドレスにアクセスする

http://localhost:3000

3. 以下のような画面が表示されることを確認する

Next.jsアプリケーションのコンテナ化

公式ドキュメントの「Docker Image」を参考にDockerfileを作成します。

1. Dockerfileを作成する

Vercelが提供している公式のDockerfileサンプルを使用します。

2. next.config.jsファイルを更新する

Dockerfileの使い方は、同サンプルリポジトリのREADME内に記載があるので、それに従います。

// next.config.js
module.exports = {
  // ... rest of the configuration.
  output: "standalone",
};

3. Dockerイメージの作成する

docker build -t nextjs-docker .

nextjs-dockerはイメージ名です。お好きな名前で大丈夫です。

4. Dockerコンテナの実行

docker run -p 3000:3000 nextjs-docker

このコマンドでは、コンテナのポート3000にローカルホストのポート3000をマッピングしています。

実行後、http://localhost:3000にWebブラウザからアクセスすることができます。

おわりに

以上でNext.jsアプリケーションをコンテナ化することができました。

公式ドキュメントで用意されているDockerfileを使うことで、簡単にコンテナ化することができました。

コンテナ化しておくことで、様々なコンテナプラットフォームにデプロイすることができるようになります。

次の記事ではコンテナ化したNext.jsアプリケーションをGoogle CloudのCloud Runにデプロイする手順を解説します。

ご覧いただきありがとうございました。