👣

vuetify v2の環境をDockerで気軽に作る

12 min read

はじめに

経緯

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

手順

概要

大まかな流れは以下のとおり

  1. WorkSpace準備(フォルダ構成作成、dockerイメージビルド)
  2. vuetifyプロジェクト作成
  3. 起動・動作確認

実行手順

(1) WorkSpace準備

  1. 任意の環境用フォルダを作成
    ※ここでは「C:\Development\VueWorkspace」としている。
    PS C:\Development> mkdir VueWorkspace
    
  2. 利用する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"]
    
  3. イメージをビルド
    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プロジェクト作成

  1. プロジェクト作成用の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
    
  2. 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 features
    

    vuetify 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 #
    
  3. プロジェクト作成用のdockerコンテナから切断

    /app # exit
    
  4. プロジェクト用コンテナの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を変更
  5. プロジェクトフォルダで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
    
  6. docker-composeでコンテナに接続

    PS C:\Development\VueWorkspace\vuetify-sample> docker-compose exec vue_app sh
    
  7. 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)からの続き

  1. 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.
    
  2. 動作確認
    ブラウザで以下にアクセス
    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

ログインするとコメントできます