[NuxtJS]Dockerfile の作り方

NuxtJS で作成したプロジェクトで Dockerfile を作成してみました。
その時の Dockerfile をメモしておきます。

Dockerfile の中身

FROM node:16.13.0 as build-stage

COPY . /app
WORKDIR /app

RUN npm install
RUN npm run generate

FROM nginx:1.20.0
COPY --from=build-stage /app/dist/ /usr/share/nginx/html

やってることとしてはまず、

FROM node:16.13.0 as build-stage

で node のビルドステージを宣言します。

次に、

COPY . /app
WORKDIR /app

でカレントディレクトリを app ディレクトリにコピーし、 app ディレクトリを WORKDIR に設定します。
WORKDIR である app ディレクトリに対して下記のコマンドを実行します。

RUN npm install
RUN npm run generate

これで NuxtJS のプロジェクトがビルドされます。
次に、 Nginx のビルドステージを宣言します。

FROM nginx:1.20.0

最後に node のビルドステージからビルドしたファイルを Nginx のドキュメントルートにコピーします。

COPY --from=build-stage /app/dist/ /usr/share/nginx/html

docker build してみる

下記のコマンドを実行して Docker をビルドします。ビルドが成功すると Docker のイメージが作成されます。

$ docker build -t <project-name>:<tag> .

「 <project-name> 」と「 <tag> 」は適宜置き換えて実行します。「 <tag> 」は省略可能です。
下記のコマンドを実行することで Docker のイメージが作成されたか確認できます。

$ docker images

コンテナを起動する

作成された Docker イメージを使用してコンテナを起動してみます。

$ docker run -p 8080:8080 <project-name>:<tag>

「 <project-name> 」と「 <tag> 」については先程の「 docker images 」で確認できたリポジトリ名とタグを設定します。
「 -p オプション」ではポート番号を入力しますが、ここは環境に応じて書き換えます。

最後に

今後、 NuxtJS で作成したプロジェクトはこの Dockerfile をベースにしてイメージの作成とコンテナの起動ができるようになりました。