docker

【Vue.js 2.9】Vue.js CLI の環境構築（Dockerとdocker-compose使用）

  /

・Dockerを使ったVue.jsの環境構築の紹介

はじめに

Railsの学習も一区切り付いたのでVue.jsの学習を始めようと考えています。
今回はDockerを用いた環境構築の紹介となります。

フォルダ構成

root
├─.devcontainer
│  └─devcontainer.json
├─docker
│  ├─web
│  │  ├─Dockerfile
│  │  └─package.json
│  └─docker-compose.yml
├─workspace
└─README.md

Dockerfileやdocker-compose.ymlなどのDocker関係のファイルはdockerディレクトリの中に入れています。

Dockerfileと同じ位置にpackage.jsonを置いてある理由ですが、Dockerfileの中で行っているコマンドを解消するのにWORKDIR命令とpackage.jsonをコピーするCOPY命令が必要です。
COPY命令はDockerfileの場所以外を指定出来ないため、Dockerfileと同じ場所にpackage.jsonを格納しています。

【Vue.js 2.9】DockerでVue.jsをインストールしたらエラー発生 ・Vue.jsをDockerにインストール時のエラー内容紹介・エラー解決方法の紹介 はじめに Railsの学習も一区切り付...

Dockerfileとdocker-compose.yml

Dockerfile

# Node.jsをインストール
FROM node:16-alpine

# docker-compose.ymlに合わせておく
WORKDIR /var/www
COPY ./package.json /var/www/
RUN apk update && \
    npm install && \
    npm install -g npm && \
    npm install -g vue-cli

Vue.jsにはnpmパッケージが必要であり、npmパッケージにはNode.jsが必要です。
そのためDockerfileにはNode.jsのベースイメージを定義しています。

WORKDIR命令以降は前述の通りRUN命令のためにWORKDIR・COPY命令を定義しています。

docker-compose.yml 

version: "3"

services:
  web:
    container_name: vuejs
    build: ./web
    ports:
      - "8080:8080"
    privileged: true
    stdin_open: true
    tty: true
    volumes:
      - ../workspace:/var/www
    command: /bin/sh

docker-compose.ymlは特に無く、強いていうならportsは8080を定義しています。

参考記事

docker-composeでシンプルにvue.js環境構築
https://qiita.com/A-Kira/items/ed12de84dda0230a4eae

RELATED POST