docker 搭建vue-cli开发环境

目标

开发机上0环境，全都由容器实现

开始

1） 创建一个项目目录

2）编写一个 Dockerfile 文件（区分大小写），创建一个开发环境镜像

Dockerfile

FROM node:10.19.0-stretch-slim

# system local config
RUN true \
    # debian china mirrors
    && sed -i 's/deb.debian.org/mirrors.ustc.edu.cn/g' /etc/apt/sources.list \
    && sed -i 's/security.debian.org/mirrors.ustc.edu.cn/g' /etc/apt/sources.list \
    # timezone to china
    && ln -sf /usr/share/zoneinfo/PRC /etc/localtime 

RUN apt-get update \
    && apt-get install -y \
    # node-sass 等编译依赖
    make gcc g++ python \
    # 命令行工具
    zsh curl wget vim git

# RUN wget https://github.com/robbyrussell/oh-my-zsh/raw/master/tools/install.sh -O - | zsh || true
RUN sh -c "$(wget https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh -O -)"

RUN true \
    && npm config set registry https://registry.npm.taobao.org \
    && npm install webpack -g \  
    && npm install -g @vue/cli

RUN mkdir /workspace

WORKDIR /workspace

# 给这个目录执行权限，x是执行权限
RUN chmod +x /workspace

VOLUME /workspace

EXPOSE 8080

CMD ["zsh"]

 * 以上需要注意的是nodejs版本 ， 和 vue-cli 版本

   执行 docker 命令生成镜像, 镜像名可随便定义

$ docker build -t nirvana72/vue-dev:nodejs-10_vuecli-4 .

3）写一个docker-compose.yml 文件，利用刚才创建的镜像生成一个容器

docker-compose.yml 

version: '3'
services:
  vue-dev:
    image: nirvana72/vue-dev:nodejs-10_vuecli-4
    container_name: vue-dev
    ports:
     - "8080:8080"
    # restart: always
    volumes: 
     - .:/workspace
    stdin_open: true
    tty: true

* 这里注意  volumes 设置，. 为当前目录，映射到容器的工作目录。在容器中访问 /workspace 就相当于访问本机的当前目录

执行 docker-compose 生成容器

$ docker-compose up -d

如果是windons 或 mac 安装了 dockerDesktop, 则工具中会显示出已创建的容器

4）到此 nodejs + vue-cli环境已经创建好了

 

使用

1）进入容器环境

$ docker exec -it vue-dev zsh

2) 现在已经进入到容器的开发环境中， 现在可以使用vue ,npm 等命令创建vue 项目了

# 创建 vue-cli 项目
/ vue create vue-demo

# 进入项目目录
/ cd vue-demo

# 安装依赖
/ npm install

# 运行项目
/ npm run serve

由于容器的工作目录与本机有映射关系， 所以在容器中创建的vue项目，实则创建在本机的目录下

3） 访问项目

http://localhost:8080

现在应该可以正常访问到容器里运行的vue项目，由于项目原码在本机目录下， 所以可以在本机使用开发工具操作代码， 同样支持热更

维护

由于本机0环境，所有环境都在容器里，所以可以让开发机环境一直保持干净

只要操作dockerDesktop 中的容器开始停止就可以切换工作状态了