👣
vuetify v2の環境をDockerで気軽に作る
はじめに
経緯
SPA(single page application)をvue.js + vuetifyで作成し、Laravelで作成したAPIサーバーと連携する環境をよく構築する。
それと関連して、ちょっとしたクリーンな検証環境をサクッと作りたくなることがあるため、dockerでそれらしい環境を作成しようと思ったのがことの始まり。
以下、"それらしい環境"の作成手順を残す。
前提
環境や使うツールは以下のとおり
環境
- Windows 10 Pro 64bit
- Docker Desktop for Windows (on Hyper-V), Version 3.6.0
使っているツール
- Windows PowerShell
手順
概要
大まかな流れは以下のとおり
- WorkSpace準備（フォルダ構成作成、dockerイメージビルド）
- vuetifyプロジェクト作成
- 起動・動作確認
実行手順
(1) WorkSpace準備
- 任意の環境用フォルダを作成
※ここでは「C:\Development\VueWorkspace」としている。PS C:\Development> mkdir VueWorkspace - 利用するdockerイメージをビルドするDockerfileを準備
C:\Development\VueWorkspace\Dockerfile
※必要に応じて内容を調整
FROM node:16.7-alpine3.11 WORKDIR /app RUN \ apk update && \ apk add git && \ npm install -g npm && \ npm install @vue/cli -g CMD ["/bin/sh"] - イメージをビルド※タグ名は任意
PS C:\Development\VueWorkspace> docker image build . --tag vue-workspace-base実行イメージ
[+] Building 2.4s (7/7) FINISHED => [internal] load build definition from Dockerfile 0.0s => => transferring dockerfile: 32B 0.0s => [internal] load .dockerignore 0.0s => => transferring context: 2B 0.0s => [internal] load metadata for docker.io/library/node:16.7-alpine3.11 2.3s => [1/3] FROM docker.io/library/node:16.7-alpine3.11@sha256:38bf6b2cf675a64bbd7531c4a6da026473a70b377d0fd708e4846c725fc40740 0.0s => CACHED [2/3] WORKDIR /app 0.0s => CACHED [3/3] RUN apk update && apk add git && npm install -g npm && npm install @vue/cli -g 0.0s => exporting to image 0.0s => => exporting layers 0.0s => => writing image sha256:19fad838a22574077edaea703a5f6141298177b6633ac4c0188909316d320868 0.0s => => naming to docker.io/library/vue-workspace-base 0.0s
(2) vuetifyプロジェクト作成
-
プロジェクト作成用のdockerコンテナを作成し接続
PS C:\Development\VueWorkspace> docker run -v ${PWD}:/app -it vue-workspace-base /app #※ファイル共有許可通知が表示されるため許可（Share it）する
参考
/app # node -v v16.7.0 /app # npm -v 7.21.0 /app # vue -V @vue/cli 4.5.13 -
vueのプロジェクトを新規作成
任意の名称でプロジェクトを作成
※ここでは「vuetify-sample」で作成/app # vue create vuetify-sample Vue CLI v4.5.13 ? Please pick a preset: (Use arrow keys) ❯ Default ([Vue 2] babel, eslint) Default (Vue 3) ([Vue 3] babel, eslint) Manually select featuresvuetify v2 は Vue 3に対応していないため、Vue 2を選択
Vue CLI v4.5.13 ? Please pick a preset: Default ([Vue 2] babel, eslint) ? Pick the package manager to use when installing dependencies: Use Yarn ❯ Use NPM任意のパッケージマネージャーを指定、ここではNPMを選択
Vue CLI v4.5.13 ✨ Creating project in /app/vuetify-sample. 🗃 Initializing git repository... ⚙️ Installing CLI plugins. This might take a while...以降の実行イメージ
added 1278 packages, and audited 1279 packages in 53s 80 packages are looking for funding run `npm fund` for details 11 moderate severity vulnerabilities To address issues that do not require attention, run: npm audit fix To address all issues (including breaking changes), run: npm audit fix --force Run `npm audit` for details. 🚀 Invoking generators... 📦 Installing additional dependencies... added 49 packages, and audited 1328 packages in 6s 85 packages are looking for funding run `npm fund` for details 11 moderate severity vulnerabilities To address issues that do not require attention, run: npm audit fix To address all issues (including breaking changes), run: npm audit fix --force Run `npm audit` for details. ⚓ Running completion hooks... 📄 Generating README.md... 🎉 Successfully created project vuetify-sample. 👉 Get started with the following commands: $ cd vuetify-sample $ npm run serve WARN Skipped git commit due to missing username and email in git config, or failed to sign commit. You will need to perform the initial commit yourself. /app # -
プロジェクト作成用のdockerコンテナから切断
/app # exit -
プロジェクト用コンテナのdocker-composeファイルを設置
C:\Development\VueWorkspace\vuetify-sample\docker-compose.yml
※必要に応じて内容を調整
version: '3.8' services: vue_app: image: vue-workspace-base ports: - 9080:8080 volumes: - .:/app stdin_open: true tty: true- 9080以外のポートを使う場合、portsを修正
- 使用するdockerイメージを変更する場合、imageを変更
-
プロジェクトフォルダでdocker-composeでコンテナ起動
PS C:\Development\VueWorkspace> cd vuetify-sample PS C:\Development\VueWorkspace\vuetify-sample> docker-compose up -d [+] Running 2/2 - Network vuetify-sample_default Created 0.0s - Container vuetify-sample_vue_app_1 Started 1.9s -
docker-composeでコンテナに接続
PS C:\Development\VueWorkspace\vuetify-sample> docker-compose exec vue_app sh -
vuetifyパッケージを追加
/app # vue add vuetify WARN There are uncommitted changes in the current repository, it's recommended to commit or stash them first.以降の実行イメージ・入力内容
※環境によっては確認されない項目もある
? Still proceed? (y/N) y(気にせず)'y'を入力して続行
📦 Installing vue-cli-plugin-vuetify... ? Your connection to the default npm registry seems to be slow. Use https://registry.npm.taobao.org for faster installation? (Y/n) Y(気にせず)'Y'を入力して続行
added 9 packages in 6s 85 packages are looking for funding run `npm fund` for details ✔ Successfully installed plugin: vue-cli-plugin-vuetify ? Choose a preset: (Use arrow keys) ❯ Default (recommended) Preview (Vuetify 3 + Vite) Prototype (rapid development) V3 (alpha) Configure (advanced)おすすめのままエンターを押して続行
? Choose a preset: Default (recommended) 🚀 Invoking generator for vue-cli-plugin-vuetify... 📦 Installing additional dependencies... ⚓ Running completion hooks... added 15 packages in 14s ✔ Successfully invoked generator for plugin: vue-cli-plugin-vuetify vuetify Discord community: https://community.vuetifyjs.com vuetify Github: https://github.com/vuetifyjs/vuetify vuetify Support Vuetify: https://github.com/sponsors/johnleider /app #これでプロジェクト作成完了
(3) 起動・動作確認
(2)からの続き
-
vueの開発サーバーを起動
/app # npm run serve > vuetify-sample@0.1.0 serve > vue-cli-service serve以降の実行イメージ
INFO Starting development server... DONE Compiled successfully in 26046ms 5:27:01 AM App running at: - Local: http://localhost:8080/ It seems you are running Vue CLI inside a container. Access the dev server via http://localhost:<your container's external mapped port>/ Note that the development build is not optimized. To create a production build, run npm run build. -
動作確認
ブラウザで以下にアクセス
http://localhost:9080/VuetifyのWelcome画面が表示されれば終了
Welcom画面
その他補足
別のvuetifyプロジェクトの追加
-
(2) vuetifyプロジェクト作成から手順を実行すれば良い - 複数のvuetify環境を共存させるときには、docker-compose.ymlのポート変更を忘れずに
各種操作
プロジェクトコンテナの起動
PS C:\Development\VueWorkspace\vuetify-sample> docker-compose up -d
プロジェクトコンテナへの接続
PS C:\Development\VueWorkspace\vuetify-sample> docker-compose exec vue_app sh
vue開発サーバーの起動
/app # npm run serve
起動したvue開発サーバーの停止
-
ctrl + cを押す
dockerコンテナからの切断
/app # exit
※ctrl + d を押すでもOK
dockerコンテナの停止
PS C:\Development\VueWorkspace\vuetify-sample> docker-compose down
[+] Running 2/2
- Container vuetify-sample_vue_app_1 Removed 10.2s
- Network vuetify-sample_default Removed 0.1s
作成した環境の削除
イメージの削除
※vuetifyプロジェクトのdockerコンテナをすべて停止した状態で実行
PS C:\Development\VueWorkspace> docker images
REPOSITORY TAG IMAGE ID CREATED SIZE
vue-workspace-base latest 19fad838a225 3 hours ago 354MB
PS C:\Development\VueWorkspace> docker rmi vue-workspace-base
Untagged: vue-workspace-base:latest
Deleted: sha256:19fad838a22574077edaea703a5f6141298177b6633a...
dockerリソース共有の除去
※Hyper-Vを利用している場合
Docker Desktop
Settings -> Resources -> FILE SHARING を開いて、該当ディレクトリ(C:\Development\VueWorkspace)のファイル共有の許可を削除し、Apply & Restartを押下
各フォルダ・ファイルの削除
Explorerなどから不要なフォルダやファイルを手動で削除
以上
更新メモ
- 2021/09/16
- 構成の見直し
- typoの修正
Discussion