从0到1搭建舒适的docker前端开发环境

博客
,

目的

本文意在使用 docker 帮助前端同学搭建统一的前端开发环境—解决因为不同的开发环境（mac、windows、linux）导致的各种依赖相关或者运行中丢失某些文件的问题；

技术栈

docker docker-compose node nginx 以及前端的项目（vue 项目）

起步

首先全局安装docker 客户端以 mac 系统为例；

看到这个就代表安装成功了

打开 docker 设置找到 docker engine 配置一下国内代理加速

1
2
3
4
5
6
7
{
  "features": {
    "buildkit": true
  },
  "experimental": false,
  "registry-mirrors": ["https://docker.mirrors.ustc.edu.cn", "https://hub-mirror.c.163.com"]
}

安装 vscode 的 Docker 插件-用于帮助我们管理我们的 docker 镜像以及容器等；

下面初始化一个 vue 项目作为 demo（vue-cli）

1
vue create vue-docker

开发

在项目根目录中创建一个名为 Dockerfile 的文件，用于 docker 相关的配置；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#设置构建的基础镜像
FROM node
#创建一个名为vue-docker的文件夹
RUN  mkdir -p  /vue-docker
#进入到这个目录中（当我们打开镜像终端的时候会自动进入这个目录中去）
WORKDIR /vue-docker
#拷贝当前目录下所有东西到vue-docker目录中
COPY . .
#设置npm下载依赖来源为淘宝源
RUN npm config set registry https://registry.npm.taobao.org
#安装项目依赖
RUN npm i
#在启动镜像时执行启动项目的命令
CMD npm run serve
#暴露端口用于外部访问
EXPOSE 8080

然后在根目录中执行构建命令
-t: 设置容器的名称
.:是打包当前目录所有东西（不包括.dockerignore 中的文件）

1
docker build -t vue-docker .

构建过程长这样

构建完成后我们可以查看构建后的镜像列表

然后我们执行 run 命令去启动一个容器
-d: 后台运行
-p: 映射容器内的 8080 端口到主机的 8080 端口
-i: 交互式操作
-t: 终端
-v: 文件映射，将主机本地的文件映射到容器中，这样我们本地修改文件内容，可以动态看到页面的变化了
vue-docker: 这是指用 vue-docker 镜像为基础来启动容器
/bin/bash：放在镜像名后的是命令，这里我们希望有个交互式 Shell

1
2
3
docker run -d -p 8080:8080 -v /src:/vue-docker/src vue-docker
# 进入命令行
docker run -it vue-docker /bin/bash

然后看到 af28efc278be5ae44f83511522cfb375a6f6811b573c33565c22ab087b415d90 这个说明容器已经启动了

我们打开浏览器访问http://localhost:8080，就能看到页面内容了，本地代码更改，页面也会随之改变

docker-compose

目前仅仅是启动了一个 vue 的服务，我们如果想使用其他服务怎么呢？比如我们想使用 node 做中间层，使用 nginx 转发的代理怎么办呢（当然我们可以使用 webpack—proxy 去做代理）？

有的同学可能会这样写

1
2
3
4
5
6
7
8
9
10
11
12
13
14

FROM nginx
COPY nginx.conf /home/work/app/nginx/conf/nginx.conf
CMD /home/work/app/nginx/sbin/nginx

FROM node
RUN  mkdir -p  /vue-docker
WORKDIR /vue-docker
COPY . .
RUN npm config set registry https://registry.npm.taobao.org
RUN npm i
CMD npm run serve
EXPOSE 8080

然后在一个 Dockerfile 文件中并不会把两个 from 一起构建，最终构建的还是带有 node 环境的镜像;

为了解决这个问题我们需要引入 docker-compose，去一起构建我们所需环境的依赖的镜像；

安装

1
sudo curl -L https://github.com/docker/compose/releases/download/1.16.1/docker-compose-`uname -s`-`uname -m` -o /usr/local/bin/docker-compose

看到这个说明安装成功了

然后我们需要编写 docker-compose 的配置文件了，在项目跟目录中创建一个名为 docker-compose.yml 的文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
version: "3" # 指定版本(不同的版本存在语法差异，这边使用最新的版本)
services: # 服务名称
  nginx: # 用户自定义的服务名称
    image: nginx # 使用的nginx最新的镜像
    volumes:
      - /default.conf:/etc/nginx/conf.d/default.conf # 拷贝default.conf目录到容器里的
    ports:
      - "80:80" # 暴露端口用于外部访问
  vue: # 用户自定义的服务名称
    build: # 构建相关的配置 也可以直接使用image:xxx去构建
      context: .
      dockerfile: vue # 使用dockerfile配置的文件名
    working_dir: /vue-docker # 进入工作的目录中
    command: npm run serve # 在启动镜像时执行启动项目的命令
    volumes: # 指定映射的路径（可指定多个）
      - ./x'x'x:/xxx
      - /src:/vue-docker/src
    ports: # 暴露端口用于外部访问（可指定多个）
      - 8080:8080
      - 8081:8081

接下来在项目跟目录中创建 default.conf，用于 nginx 相关的配置；

1
2
3
4
5
6
7
8
9
10
11
12
server {
    listen       80;
    server_name  localhost;

    location / {
       proxy_pass http://vuedocker:8080; # 这里的vueDocker就是docker-compose中自定义的services名
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

接下来在项目跟目录中创建 vue 文件，用于 Dockerfile 相关的配置；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
#设置构建的基础镜像
FROM node
#创建一个名为vue-docker的文件夹
RUN  mkdir -p  /vue-docker
#进入到这个目录中（当我们打开镜像终端的时候会自动进入这个目录中去）
WORKDIR /vue-docker
#拷贝当前目录下所有东西到vue-docker目录中
COPY . .
#设置npm下载依赖来源为淘宝源
RUN npm config set registry https://registry.npm.taobao.org
#安装项目依赖
RUN npm i
#在启动镜像时执行启动项目的命令
CMD npm run serve
#暴露端口用于外部访问
EXPOSE 8080

然后 vue.config.js 中添加 disableHostCheck，不去检测域名；

1
2
3
4
5
module.exports = {
  devServer: {
    disableHostCheck: true,
  },
};

接着执行 docker-compose -d up 指令启动 docker-compose 构建

1
2
3
# -d: 后台执行
docker-compose -d up

看到绿色的箭头说明我们的容器全都启动了，然后访问http://localhost 就可以看到页面了

下期主题—Dockerfile 的多阶段构建