【Nuxt.js】Vue(2系)とNuxt.js・TypeScriptの環境をDockerで構築する方法

NuxtJS_Docker

SHARE

こんにちはフロントエンドエンジニアのまさにょんです！

今回は、Vue(2系)とNuxt.js・TypeScriptの環境をDockerで構築する方法について解説していきます。

Vue(2系)とNuxt.js・TypeScriptの環境をDockerで構築する方法

プロジェクトで、Vue(2系)とNuxt.jsを使用しているのですが、そのTest環境がほしかったので、DockerでVue(2系)とNuxt.js・TypeScriptの環境を構築してみます。

今回作成するNuxt.jsプロジェクトのディレクトリ構造

今回作成するNuxt.jsプロジェクトのディレクトリ構造をtree -L 2で、2階層まで確認すると次のとおりです。

nuxt_test % tree -L 2
.
├── Dockerfile
├── app
│   ├── README.md
│   ├── assets
│   ├── components
│   ├── jest.config.js
│   ├── layouts
│   ├── node_modules
│   ├── nuxt.config.js
│   ├── package.json
│   ├── pages
│   ├── static
│   ├── store
│   ├── test
│   ├── tsconfig.json
│   └── yarn.lock
└── docker-compose.yml

10 directories, 8 files

プロジェクト・ディレクトリの作成と移動

まずは、次のコマンドでプロジェクト・ディレクトリの作成と移動をします。

プロジェクト・ディレクトリ名は、自由に決めてください。

mkdir プロジェクト名 && cd プロジェクト名

Nuxt.jsをinstallするディレクトリを作成する

Nuxt.jsでは、空のディレクトリにNuxtプロジェクトをinstallする必要があるため、appというディレクトリを作成しておきます。

空じゃないと、Nuxt.jsプロジェクトをSet Upする際に、

Could not create project in src because the directory is not empty.

と注意されます。

mkdir app

Dockerfileを作成する

Dockerfileは、Dockerイメージをビルドするための設定ファイルです。

次のコマンドで、Dockerfileを作成して開きます。

touch Dockerfile && open Dockerfile

openしたDockerfileの内容は、次の内容をコピペしてください。

# Base_Image
FROM node:lts

# 3000番のPortを解放
EXPOSE 3000

# HostマシンからのAccessを受け付ける
ENV HOST 0.0.0.0

RUN apt-get update && \
    apt-get upgrade -y && \
    yarn global add @vue/cli && \
    yarn global add @vue/cli-init && \
    yarn global add nuxt create-nuxt-app

# Docker Cotainer上の作業ディレクトリ
WORKDIR /usr/src/app

docker-compose.yml を作成する

docker-compose.yml は、Docker Composeを使用して、複数のDockerコンテナを定義し、それらを構成・連携するための設定ファイルです。

次のコマンドで、docker-compose.ymlを作成して開きます。

touch docker-compose.yml && open docker-compose.yml

openしたdocker-compose.ymlの内容は、次の内容をコピペしてください。

YAMLファイルは、JSONと違いコメントができるので、コメントを細かく記しています。

# versionは、3系
version: "3"
# Serviceを設定する
services:
  # Service名は、自由に決めていい
  frontend:
    # DockerfileまでのPath
    build: .
    # ホストマシン:コンテナ => ファイルを共有するための設定
    volumes:
      - ./app:/usr/src/app
    # ホストマシンPort番号:コンテナのPost番号
    ports:
      - 3001:3000
    # CLI画面の操作をできるようにする
    tty: true

今回のdocker-compose.yml の内容を解説します。

  1. version は、Docker Composeのバージョンを指定しています。
  2. services は、構築するサービスを動かすための各要素をネストさせて定義します。
    • 最初にサービス名を定義して、続けて設定内容を記述していきます。
  3. build コマンドは、Dockerfileを使用してイメージをビルドするためのPath設定を行います。
    • . は、Dockerfileがあるディレクトリ(Path)を指定しています。
    • 今回の場合、Docker Composeは現在のディレクトリのDockerfileを使用してイメージを構築します。
  4. volumes コマンドは、ホストマシンとDockerコンテナの間でファイルを共有するために使用されます。
    • ホストマシンの./app ディレクトリを、Dockerコンテナの /usr/src/app ディレクトリにマウントしています。
  5. ports コマンドは、Dockerコンテナとホストマシンのポートをマッピングするために使用されます。
    • 今回は、ホストマシンの3001番ポートをDockerコンテナの3000番ポートにマッピングしています。
  6. tty コマンドは、Dockerコンテナ内でTTYを有効にするために使用されます。
    • 最後の行のTTYを有効にすることで、CLIの標準入出力がLockされずに機能して、コンテナ内でコマンドが実行できるようになります。

docker-composeでDockerfileからimageをビルドする

docker-compose buildコマンドは、Dockerファイルから imageを作成してくれるコマンドです。

コンテナは作成しないので、注意です。

docker-compose build

このコマンドを実行すると、Dockerfileに従って各サービスのDockerイメージがビルドされ、イメージ名とタグ名が作成されます。

docker image ls で、buildされたimageを確認すると次のとおりです。

nuxt_test % docker image ls
REPOSITORY            TAG       IMAGE ID       CREATED          SIZE
nuxt_test-frontend    latest    995d9918ff4d   58 minutes ago   2.6GB

Nuxt.js のAppを作成する

次のコマンドで、frontend サービス内で Nuxt.js のAppを作成するために必要なコマンドをDocker コンテナ内で実行させます。

docker-compose run --rm frontend npx create-nuxt-app

上記のコマンドでは、Docker Composeによって定義された frontend サービス内で、一時的なコンテナを起動して、その中で指定されたコマンドを実行しています。

詳細な説明は、次のとおりです。

  1. docker-compose run コマンドを使用して、frontend サービスを実行。
  2. --rm オプションで、コマンドの実行が終了したらコンテナを自動的に削除されるように設定。
  3. npx create-nuxt-app は一時的なコンテナ内で実行されるコマンドです。
    • このコマンドは、Nuxt.js のAppを作成するために使用されます。

ちなみに、npx create-nuxt-app コマンドを実行すると、Nuxt.jsを立ち上げるためのいくつかの質問が聞かれます。

これは、そのプロジェクトに合わせた設定を選択します。

nuxt_test % docker-compose run --rm frontend npx create-nuxt-app
[+] Running 1/1
 ⠿ Network nuxt_test_default  Created                                                                                                                                                                                                    0.1s

create-nuxt-app v5.0.0
✨  Generating Nuxt.js project in .
? Project name: app
? Programming language: TypeScript
? Package manager: Yarn
? UI framework: Vuetify.js
? Template engine: HTML
? Nuxt.js modules: (Press <space> to select, <a> to toggle all, <i> to invert selection)
? Linting tools: ESLint, Prettier
? Testing framework: Jest
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: 
? Continuous integration: None
? Version control system: Git
yarn run v1.22.19

$ prettier --write --list-different . && yarn lint:js --fix
.eslintrc.js
components/NuxtLogo.vue
components/Tutorial.vue
components/VuetifyLogo.vue
jest.config.js
layouts/default.vue
layouts/error.vue
nuxt.config.js
package.json
pages/index.vue
pages/inspire.vue
README.md
tsconfig.json
$ eslint --ext ".js,.ts,.vue" --ignore-path .gitignore . --fix
Done in 7.16s.

🎉  Successfully created project app

  To get started:

	yarn dev

  To build & start for production:

	yarn build
	yarn start

  To test:

	yarn test


  For TypeScript users. 

  See : https://typescript.nuxtjs.org/cookbook/components/
npm notice 
npm notice New minor version of npm available! 9.5.1 -> 9.6.7
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.6.7
npm notice Run npm install -g npm@9.6.7 to update!
npm notice

これで、Nuxt.jsプロジェクトは立ち上がりました。

Docker コンテナを実行する

次のコマンドで、Docker Composeファイルに定義されたサービスをバックグラウンドで起動できます。

docker-compose up -d

docker-compose up -d コマンドは、Docker Composeファイルに定義されたサービスをバックグラウンドで起動するために使用されます。

このコマンドを実行すると、Docker Composeファイルに定義されたすべてのサービスが起動し、Dockerイメージが必要に応じて自動的にダウンロードされます。

Nuxt.js のAppを起動する

Nuxt.js のAppを起動するために、frontend (今回のNuxt.jsアプリのDocker Composeでのサービス名) の Bashを起動します。

docker-compose exec frontend bash

Bashを起動すると、WORKDIRとして設定した/usr/src/app からCurrentがStartするはずです。

nuxt_test % docker-compose exec frontend bash
root@48762e70d917:/usr/src/app#

yarn dev で、Local Serverを立ち上げます。

root@48762e70d917:/usr/src/app# yarn dev
yarn run v1.22.19
$ nuxt

   ╭──────────────────────────────────────────╮
   │                                          │
   │   Nuxt @ v2.16.3                         │
   │                                          │
   │   ▸ Environment: development             │
   │   ▸ Rendering:   server-side             │
   │   ▸ Target:      server                  │
   │                                          │
   │   Listening: http://192.168.32.2:3000/   │
   │                                          │
   ╰──────────────────────────────────────────╯

ℹ Preparing project for development                                                                                                                                                                                                 12:26:51
ℹ Initial build may take a while                                                                                                                                                                                                    12:26:51
ℹ Discovered Components: .nuxt/components/readme.md                                                                                                                                                                                 12:26:51
✔ Builder initialized                                                                                                                                                                                                               12:26:51
✔ Nuxt files generated                                                                                                                                                                                                              12:26:52

✔ Client
  Compiled successfully in 9.86s

✔ Server
  Compiled successfully in 8.00s

ℹ Waiting for file changes                                                                                                                                                                                                          12:27:04
ℹ Memory usage: 373 MB (RSS: 563 MB)                                                                                                                                                                                                12:27:04
ℹ Listening on: http://192.168.32.2:3000/                                                                                                                                                                                       12:27:04
No issues found.

最終的な動作確認

Dockerコンテナの起動状況はdocker container psで確認できます。

localhost: 3001 から Containerの3000番Portにコネクションがあることがわかります。

docker container ps
CONTAINER ID   IMAGE                 COMMAND                  CREATED          STATUS          PORTS                    NAMES
48762e70d917   nuxt_test-frontend    "docker-entrypoint.s…"   27 seconds ago   Up 24 seconds   0.0.0.0:3001->3000/tcp   nuxt_test-frontend-1

今回は http://localhost:3001/ にアクセスして、次のような NuxtApp が立ち上がっていれば成功です。

volume マウントによる Docker ContainerとLocalのファイル共有もしているので、

VSCodeでappのディレクトリの中を確認すると、次のような Nuxt.jsのプロジェクトができているはずです。

Nuxt.js (v2.16.3) のpackage.json を確認する

Nuxt.js (v2.16.3) のpackage.json を確認すると、Defaultで"@nuxtjs/composition-api": "^0.33.1" があったり、

TypeScriptを選択して環境をSet Upしたので、"@nuxt/types": "^2.15.8" や"@nuxt/typescript-build": "^2.1.0" があることがわかります。

{
  "name": "app",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate",
    "lint:js": "eslint --ext \".js,.ts,.vue\" --ignore-path .gitignore .",
    "lint:prettier": "prettier --check .",
    "lint": "yarn lint:js && yarn lint:prettier",
    "lintfix": "prettier --write --list-different . && yarn lint:js --fix",
    "test": "jest"
  },
  "dependencies": {
    "@nuxtjs/composition-api": "^0.33.1",
    "core-js": "^3.25.3",
    "nuxt": "^2.15.8",
    "vue": "^2.7.10",
    "vue-server-renderer": "^2.7.10",
    "vue-template-compiler": "^2.7.10",
    "vuetify": "^2.6.10"
  },
  "devDependencies": {
    "@babel/eslint-parser": "^7.19.1",
    "@nuxt/types": "^2.15.8",
    "@nuxt/typescript-build": "^2.1.0",
    "@nuxtjs/eslint-config-typescript": "^11.0.0",
    "@nuxtjs/eslint-module": "^3.1.0",
    "@nuxtjs/vuetify": "^1.12.3",
    "@vue/test-utils": "^1.3.0",
    "babel-core": "7.0.0-bridge.0",
    "babel-jest": "^29.1.2",
    "eslint": "^8.24.0",
    "eslint-config-prettier": "^8.5.0",
    "eslint-plugin-jest": "^27.0.4",
    "eslint-plugin-nuxt": "^4.0.0",
    "eslint-plugin-vue": "^9.5.1",
    "jest": "^29.1.2",
    "jest-environment-jsdom": "^29.1.2",
    "prettier": "^2.7.1",
    "ts-jest": "^29.0.3",
    "vue-jest": "^3.0.4"
  }
}

Docker Composeで建てた Docker Container を停止 & 削除する

docker-compose down コマンドを使用して、Docker Composeで建てたすべてのコンテナを停止し、削除することができます。

docker-compose down

JavaScript書籍 Ver. 中級-上級者向け

JavaScript書籍 Ver. 初級者向け

プログラミング学習・エンジニア転職関連の情報

自宅で現役エンジニアから学べる『TechAcademy』 (エンジニア転職保証)

『GEEK JOBキャンプ』スピード転職コース（無料）

【IT道場】入校時0円！ 就職目的プログラミングスクール

エンジニア転職なら100％「自社開発」求人に強い【クラウドリンク】

『techgym』 (Python特化・無料)

Twitterやってます！Follow Me！

神聖グンマー帝国の逆襲🔥

神聖グンマー帝国の科学は、世界一ぃぃぃぃぃぃ！！！！！

参考・引用

  1. docker-composeでNuxt.js環境構築

最近の投稿

【SQL】1回のINSERTで、複数行のレコードを一括挿入・一括追加する方法 JS_uuid JavaScriptでランダムなuuidを作成する方法(randomUUIDの使い方) py_csv_to_json PythonでCSVをJSONに変換する方法 py_csv_cut PythonでCSV・Dataframeを指定の行数まで切り取る方法 js_for_of JavaScript(TypeScirpt)のfor-of文でindexの値も取得する方法と、Type IterableIteratorエラーの解決方法 Python_VSCode VSCode上のPython import文の「インポート “XXXXX” をソースから解決できませんでした」エラーの解決方法

前の記事

Node_Npm_Error
Node・プロジェクトでパッケージ関係のエラーなど原因不明のn…

次の記事

React・TypeScript・Material-UI(MU…
MUI_React_Table