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をベースにしてイメージの作成とコンテナの起動ができるようになりました。
