Docker 上で Next.js のアプリを動かす

Docker 上で Next.js のアプリを動かす

この記事では、Docker のコンテナ（container）内で、Next.js のアプリを動かす手順を紹介します。要領は前回紹介した、Docker を使って Web ホスティングを動かす場合と同じです。

Next.js のアプリを作成する

Docker の設定を行う前に、「中身」の Next.js のアプリを作成します。 まずは、テンプレートとして、「create-next-app」のスクリプトを利用してテンプレート（デモ）のプロジェクトを作成します。

$ npx create-next-app next_sample

Next のアプリで Typescript を利用するために Typescript の設定を行います。 Typescript を利用した方が、変数の型の定義が明確になって、インターフェースなどのミスが起こりにくいので、この連載では Typescript の利用を推奨しています。

$ touch tsconfig.json

$ npm install --save-dev typescript ＠types/react ＠types/node

基本的な設定が完了したら、開発用のサーバーを立ち上げて、テンプレート（デモ）プロジェクトの動作を確認します。

$ npm run dev

これで、Next アプリ側の基本的な設定は完了です。

Docker の設定

続いて、作成したでもプロジェクトを Docker のコンテナ（container）で動かすための設定を行います。

Docker の設定は、Dockerfile に Docker イメージを作るための処理を記述します。

この例では、元になる Docker のイメージに「alpine」という、機能を絞った Linux の上で、「node」を使えるようにしたイメージを利用しています。

このイメージに、「/home/app」というフォルダを作成して、そこに、Next.js のアプリのフォルダをコピーして、必要なパッケージをインストールしたあとに、アプリを起動するという一連の処理を行います。

# Dockerfile for Docker image setting up

# Gets a base image

FROM node:alpine

# Creates and sets working directory

RUN mkdir -p /home/app

WORKDIR /home/app

# copies source files to "app" folder

COPY . /home/app

# installs dependencies (npm modules based on package.json)

RUN npm install

# starts application

RUN npm run build

EXPOSE 3000

CMD npm run start

Docker のイメージの作成

作成した Dockerfile の記述を利用して、Docker のイメージを作成します。 オリジナルのベースとなるイメージに、ファイルを追加するなど変更が加えられているので、新たなイメージを別の名前で作成します。以下の例では「next-app」という名前のイメージを作成します。

$ docker build -t next-app .

イメージが作成されていることを、以下のコマンドを実行して確認します。 ベースイメージの「node」と、新たに作成された、「next-app」のイメージがあるのが確認ｄきます。前回の、シンプルな Web サーバーの場合は、追加した HTML ファイルのサイズが小さかったため、オリジナルイメージとの差がサイズからはわかりませんでしたが、今回は Next.js のプロジェクトをコピーしているのでサイズの違いも確認できます。

$ docker images

REPOSITORY TAG IMAGE ID CREATED SIZE

next-app latest f058bdf7529d 4 seconds ago 273MB

node alpine 171eab95bd9c 10 days ago 113MB

Next のアプリを実行するには、新たに作成した「next-app」のイメージを起動します。 サーバーは、起動したイメジをポート番号「5000」でアクセスできるように指定しています。

$ docker run -d -p 0.0.0.0:5000:3000 next-app

f36f1bd4406cd78b27f2f685a8c8f5c8057b01f75f6031cf7f426062c50b7a4e

従って、Docker が動作している PC 上で「localhost:5000」を指定する事で Next のアプリにアクセスできます。

Docker のコマンドで、イメージが実行されていることが確認できます。

$ docker ps

CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES

f36f1bd4406c next-app "docker-entrypoint.s…" 9 seconds ago Up 8 seconds 0.0.0.0:5000->3000/tcp modest_panini

Next.js のアプリを完成させます

この状態で、Next.js のテンプレート（デモ）アプリが、Docker のコンテナ（container）で動いています。 あとは、通常の Next の開発と同様に、Next のアプリを完成させます。

DockerFile では基本的に作成した Next のイメージを Docker の「alpine」のイメージにコピーしているだけです。従って、このプロジェクトフォルダの Next のアプリの実装を完成させてそのイメージをコピーするだけなので設定は以上で完了です。

まとめ

Docker を利用した実装例をいくつか紹介してきました。 前回までに、

＊　Django のアプリ

＊　静的な Web ホスティング

＊　Next によるサーバサイドレンダリングのアプリ

などを紹介してきました。

Django のアプリの場合、通常の Web ホスティングのサーバ機能の他に、SQL のデータベースや、Python のアプリを動かすアプリケーションサーバーが必要な関係で設定がやや複雑になっていました。そのため、通常の Docker Engine に加えて、Docker Compose を利用して Docker の設定を記述しました。

前回と今回紹介した、一般的な Web ホスティングや、Next などのサーバーサイドのレンダリングを利用したアプリの場合は、ベースになるイメージに必要なデータを追加するだけなので設定もシンプルになります。

どのような情報を追加するかを Dockerfile に記述するだけで、目的の機能を実現する Docker イメージが作成されるという仕組みです。

Docker の利用の基本の流れは、

1. コンテンツの作成

2. Docker の設定（Dockerfile に必要な設定を記述）

3. Docker イメージの起動

です。Docker の設定で必要な処理は、基本的には新規にサーバーを設定するのと同様の手続きが必要になります。サーバーを設定する代わりに、Docker のベースイメージを元に必要な設定を追加して目的の機能を実現するというステップを Dockerfile に書くことです。

Docker を上手く使いこなすには、こうした一連のサーバーの設定などを理解している必要があります。この一連の処理がハッキリしていれば Docker を利用するのは難しくありません。