Dockerコンテナ内でNext.jsのアプリを動かす方法を紹介します。やり方はいくつかありますが、ここではdocker composeでDockerfileを使用します。
DockerコンテナでNext.jsアプリを動かすために
必要なのは、DockerコンテナとNext.jsのアプリです。
Next.jsを実行するのにNode.jsを使用します。
Dockerでコンテナを作成する方法は、Dockerfileのみを使用する方法とDocker Composeを使用する方法があります。
今回はDocker Composeを使用する方法で実施します。
なのでコンテナ作成用に、DockerfileとYAMLファイルを作成します。
Next.jsアプリ作成とDocker関連ファイル作成
Next.jsアプリ
今回は新規アプリの雛形をそのまま使用します。以下コマンドで作成。
(プロジェクト名：mynextapp)
npx create-next-app mynextapp
アプリ構築後は以下コマンドでビルドします。
npm run build
DockerfileとYAMLファイル
Dockerファイルは以下の通り。Nodeは18-alpineを使用しました。
# Node.jsの公式イメージをベースにする FROM node:18-alpine # コンテナ内で作業ディレクトリを設定 WORKDIR /usr/src/app # ローカルのpackage.jsonとpackage-lock.jsonをコピーして依存関係をインストール COPY package*.json ./ RUN npm install # ローカルのソースコードをコンテナにコピー COPY . . # ポート番号を指定（Next.jsのデフォルトは3000） EXPOSE 3000 # アプリケーションの起動コマンド CMD ["npm", "start"]
Docker Compose用のYAMLファイルは以下の通り。
services:
nextjs-app:
build: ./mynextapp
container_name: nextjs-app
working_dir: /usr/src/app
volumes:
- ./mynextapp:/usr/src/app # ローカルのソースコードをコンテナにマウント
ports:
- "3000:3000" # ポート番号のマッピング（ホスト:コンテナ）
environment:
- NODE_ENV=production # Node.jsをプロダクションモードで実行
command: ["npm", "run", "start"] # アプリケーションの起動コマンド
Dockerコンテナの作成
Dockerコンテナを使用できる環境にて以下コマンドを実行。
(私の場合は、Windows＋DockerDesktop)
docker compose up -d
しばらく待つとコンテナが起動します。
ブラウザで「http://localhost:3000」アクセスすればアプリが表示されます。
ちなみに用済みになったコンテナは以下コマンドで削除できます。
docker compose down
さいごに
Dockerコンテナ上でNext.jsで作成したアプリを動かせました。デプロイの仕方が分かると実用に向けてかなり近づくのでアプリ開発と並行して学んでいきたいですね。
ところでDockerfileでNextアプリをbuildしようと思ったのですが私にはできませんでした。できる気がするのですが何故なのか・・・
また時間があるときに調べます。
以下関連記事です。
コメント