プログラミング

[NuxtJS]Dockerfileの作り方

プログラミング
この記事は約3分で読めます。
スポンサーリンク

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

スポンサーリンク
スポンサーリンク
スポンサーリンク
KoEをフォローする
CodeLab

コメント

タイトルとURLをコピーしました