Docker+VSCodeでVue.js環境構築 - 山下誠二郎のITとフォートナイトと野球ブログ

ディレクトリ事情

Vue-myappフォルダ以下です。

|--Vue-myapp
|  |--docker
|  |   |--Dockerfile
|  |--docker-compose.yml
|  |--.devcontainer.json
|  |--.vscode
|  |   |--launch.json

Dockerコンテナ作成

Dockerfile

実行コマンドをここで表記。
ローカル環境を汚したくないので、
ここで表記。

FROM node:12.16-alpine

WORKDIR /app

RUN apk update && \
    npm install -g npm && \
    npm install -g @vue/cli

CMD  ["/bin/sh"]

docker-compose.yml

言わばDockerで環境を構築する際の設計書といったところです。
ここで重要なのはservice: webを活用します。
vueを用いることも可能ですが、VSCodeとの連携ができません。

 version: '3'
 services:
   web:
     build:
       context: ./docker
     container_name: myapp-vue
     ports:
       - 8080:8080
     volumes:
       - .:/app
     tty: true

$ docker-compose build

#変なNodeに関する警告が出てきますが、無視。

$ docker-compose up -d

Creating network "vue-app_default" with the default driver
Creating myapp-vue ... done

コンテナでvue-cliテンプレートを生成

作成したコンテナに入ります。

$ docker exec -it myapp-vue /bin/sh

vueコマンドでvue-cliのテンプレートを生成できます。

/app # vue create myapp

#Yを押す(選択モード)
?  Your connection to the default yarn registry seems to be slow.
   Use https://registry.npm.taobao.org for faster installation? Yes

Vue CLI v4.3.1
? Please pick a preset: default (babel, eslint)
? Pick the package manager to use when installing dependencies: Yarn

Vue CLI v4.3.1
✨  Creating project in /app/myapp.
⚙️  Installing CLI plugins. This might take a while...

以下のコマンドを実行。

/app # cd myapp
/app/myapp # yarn serve

yarn run v1.22.4
$ vue-cli-service serve
 INFO  Starting development server...
98% after emitting CopyPlugin

 DONE  Compiled successfully in 19697ms

これでhttp://127.0.0.1:8080/で以下の画面が出てきたらOKです。

f:id:electric-city:20200419233437p:plain — http://127.0.0.1:8080/

VSCodeとの連携

.devcontainer.json

ここでservice: webを設定。
.devcontainer.json

{
    "dockerComposeFile": "docker-compose.yml",
    "service": "web",
    "workspaceFolder": "/app",
    "extensions": [
        "msjsdiag.debugger-for-chrome",
        "octref.vetur",
        "dbaeumer.vscode-eslint",
        "editorconfig.editorconfig"
    ]
}

launch.json

.vscode/launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]
}