はじめに
Dockerを使用して、Nuxt.jsの環境構築を行います。
前提事項
-
Dockerがインストールしてあること
-
本記事ではWindowsを使用
使用ツール
- Docker Desktop for Windows
Install Docker Desktop on Windows
Get started with Docker for Windows. This guide covers system requirements, where to download, and instructions on how t...
docs.docker.com
- Visual Studio Code
https://azure.microsoft.com/ja-jp/products/visual-studio-code
azure.microsoft.com
手順1 プロジェクトのルートディレクトリの作成
Nuxt.jsで開発するための任意のディレクトリの作成します。本記事では「nuxt-project」とします。
mkdir nuxt-project手順2 Dockerfileの作成
手順1で作成したプロジェクトのルートディレクトリに移動します。
cd nuxt-projectDocker関連のファイルを作成するためのディレクトリを作成します。
mkdir dockerNuxt.jsで初期プロジェクトを作る際に指定するディレクトリを作成します。
mkdir src作成した「docker」ディレクトリに移動します。
cd docker「docker」ディレクトリ内に「Dockerfile」を作成します。
# Node.jsのイメージを使用
FROM node:latest
# 作業ディレクトリを設定
WORKDIR /app
# bashシェルを起動
CMD ["/bin/bash"]手順3 Dockerイメージのビルド
Dockerイメージのビルドをします。Dockerfileがあるディレクトリと同じ場所で以下のコマンドを実行してください。
docker build -t nuxt .実行結果は以下のようになります。
[+] Building 1.8s (6/6) FINISHED
=> [internal] load build definition from Dockerfile 0.0s
=> => transferring dockerfile: 189B 0.0s
=> [internal] load .dockerignore 0.0s
=> => transferring context: 2B 0.0s
=> [internal] load metadata for docker.io/library/node:latest 1.6s
=> [1/2] FROM docker.io/library/node:latest@sha256:73a9c498369c6e6f864359979c8f4895f28323c07411605e6c870d696a0143fa 0.0s
=> CACHED [2/2] WORKDIR /app 0.0s
=> exporting to image 0.1s
=> => exporting layers 0.0s
=> => writing image sha256:b689cdaa0766749a2137859704f7ae5952728f9f923d8fd9052fdb8888330f8c 0.0s
=> => naming to docker.io/library/nuxt 0.0s
Use 'docker scan' to run Snyk tests against images to find vulnerabilities and learn how to fix them手順4 Nuxt.jsの初期プロジェクトを作成
ルートディレクトリに戻ります。
cd ..Dockerコンテナを起動します。
docker run -it -v ${PWD}/src:/app nuxt以下のように表示されたらコンテナの起動までは成功です。
root@f122e6330afe:/app#Nuxt.jsの初期プロジェクトを作成します。
npx nuxi init .yを入力して、Enterしてください。
Need to install the following packages:
nuxi@3.10.0
Ok to proceed? (y) ynpmを選択して、Enterしてください。
Need to install the following packages:
nuxi@3.10.0
Ok to proceed? (y) y
❯ Which package manager would you like to use?
● npm
○ pnpm
○ yarn
○ bunnoを選択して、Enterしてください。
Need to install the following packages:
nuxi@3.10.0
Ok to proceed? (y) y
✔ Which package manager would you like to use?
npm
◐ Installing dependencies... 1:16:44 PM
> postinstall
> nuxt prepare
✔ Types generated in .nuxt 1:18:17 PM
added 732 packages, and audited 734 packages in 2m
122 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
✔ Installation completed. 1:18:18 PM
❯ Initialize git repository?
○ Yes / ● No
最終的に、以下のように表示されれば成功です。
Need to install the following packages:
nuxi@3.10.0
Ok to proceed? (y) y
✔ Which package manager would you like to use?
npm
◐ Installing dependencies... 1:16:44 PM
> postinstall
> nuxt prepare
✔ Types generated in .nuxt 1:18:17 PM
added 732 packages, and audited 734 packages in 2m
122 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
✔ Installation completed. 1:18:18 PM
✔ Initialize git repository?
No
1:21:22 PM
✨ Nuxt project has been created with the v3 template. Next steps:
› Start development server with npm run dev 1:21:22 PM
npm notice
npm notice New patch version of npm available! 10.2.4 -> 10.2.5
npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.2.5
npm notice Run npm install -g npm@10.2.5 to update!
npm noticeコンテナから一旦抜けます。
exit手順5 docker-compose.ymlの作成
dockerディレクトリに移動します。
cd dockerdocker-compose.ymlを作成します。
version: "3"
services:
nuxt-app:
build:
context: ../
dockerfile: ./docker/Dockerfile
volumes:
- ../src:/app # ローカルディレクトリをコンテナの/appにマウント（コードの変更がリアルタイムで反映される）
- /app/node_modules # node_modulesはコンテナ内に留める
ports:
- "3000:3000" # ローカルのポート3000をコンテナのポート3000にマッピング
environment:
- HOST=0.0.0.0 # コンテナのホストアドレスを0.0.0.0に設定（外部からのアクセスを可能にする）手順6 Dockerfileの修正
Dockerfileを修正します。
# Node.jsのイメージを使用
FROM node:latest
# 作業ディレクトリを設定
WORKDIR /app
# アプリケーションのソースコードをコピー
COPY ./src/ /app/
# 依存関係をインストール
RUN npm install
# アプリケーションを実行
CMD ["npm", "run", "dev"]手順7 ローカルのnode_modulesを削除する
ローカルにnode_modulesは不要なので削除します。
srcディレクトリに移動します。
cd ../srcnode_modulesを削除します。
sudo rm -r node_modules -f手順8 Dockerイメージをビルド・起動
dockerディレクトリに移動します。
cd ../dockerDockerイメージをビルドして起動します。
docker-compose up -d --build以下のように表示されれば成功です。
Building nuxt-app
[+] Building 124.4s (9/9) FINISHED
=> [internal] load build definition from Dockerfile 0.0s
=> => transferring dockerfile: 341B 0.0s
=> [internal] load .dockerignore 0.1s
=> => transferring context: 2B 0.0s
=> [internal] load metadata for docker.io/library/node:latest 1.7s
=> [1/4] FROM docker.io/library/node:latest@sha256:73a9c498369c6e6f864359979c8f4895f28323c07411605e6c870d696a0143fa 0.0s
=> [internal] load build context 0.0s
=> => transferring context: 1.44kB 0.0s
=> CACHED [2/4] WORKDIR /app 0.0s
=> [3/4] COPY ./src/ /app/ 0.1s
=> [4/4] RUN npm install 119.9s
=> exporting to image 2.6s
=> => exporting layers 2.5s
=> => writing image sha256:3e49e7644bcaa24243a555fef6048e13c46fecb2e0db9af3640a25358bcaeafb 0.0s
=> => naming to docker.io/library/docker_nuxt-app 0.0s
Use 'docker scan' to run Snyk tests against images to find vulnerabilities and learn how to fix them
Creating docker_nuxt-app_1 ... done手順9 動作確認
以下のURLにアクセスします。
http://localhost:3000/以下のように表示されれば成功です。
手順10 コンテナの停止とリソースの削除
コンテナの停止とリソースの削除を行います。dockerディレクトリ内で以下のコマンド実行します。
docker-compose downリソースが解放されたか確認します。
docker ps -a何もなければ成功です。
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
コメント