使用docker容器化开发部署Vue项目

最近几年，docker可以说是火的不得了，作为前端我们也需要去了解它，知道它解决了什么问题，以及对我们来说有什么可用之处。

今天我将会使用Vue CLI创建一个项目，使用Docker，Docker Compose容器化方式来开发和部署一个Vue项目。

我们将会实现：

1.开发环境支持代码热重载

2.配置生产环境镜像多重构建

我所使用的版本

Docker：20.10.5

Vue-CLI：4.5.9

Node：v12.6.0

源码在Github：https://github.com/cmdfas/docker-vue-app

项目创建

全局安装Vue CLI：

npm install -g @vue/cli

创建一个全新Vue项目, （要选vue-router，history模式，后面有用）

vue create my-app
cd my-app

开发环境

Docker

在项目根目录中创建Dockerfile文件

# 基础 image
FROM node:12.6.0-alpine

# 设置项目目录
WORKDIR /app

# 安装项目依赖
COPY package.json .
RUN npm install

# 运行
CMD ["npm", "run", "serve"]

创建.dockerignore文件

node_modules
.git
.gitignore

构建Docker image

docker build -t my-app:dev .

运行

docker run -v ${PWD}:/app -v /app/node_modules -p 8081:8080 -rm my-app:dev

Tips:

1.docker run 创建一个基于my-app:dev镜像的容器并运行

2.-v ${PWD}:/app 挂载当前项目目录到容器内的/app文件夹

windows用户可能不支持${PWD}，请使用绝对路径代替

3.-v /app/node_modules 这个必要的，因为我们要用容器内的node_modules依赖，前面我们我们已经将项目目录${PWD}:/app挂载，所以我们要创建这个匿名卷，防止使用项目目录的node_modules。

4.-p 8081:8080 将容器内的8080映射到当前机器的8081

5.-rm 容器将在退出后删除

然后我们访问http://localhost:8081/，尝试修改src/App.vue中的代码。浏览器将会自动刷新，触发热重载。

Docker Compose

在根目录创建docker-compose.yaml文件

version: '3.7'

services:

  my-app:
    container_name: my-app
    build:
      context: .
      dockerfile: Dockerfile
    volumes:
      - '.:/app'
      - '/app/node_modules'
    ports:
      - '8081:8080'

然后构建镜像并启动容器

docker-compose up -d --build

同样打开浏览器访问http://localhost:8081/，尝试修改src/App.vue中的代码。浏览器将会自动刷新，触发热重载。

停止docker-compose

docker-compose stop

生产环境

Docker

在项目根目录创建Dockerfile-prod文件

# 构建容器
FROM node:12.6.0-alpine as build
WORKDIR /app

COPY package.json .
RUN npm install
COPY . /app
RUN npm run build

# 生产容器
FROM nginx:1.16.0-alpine
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

使用生产环境的Dockerfile，来构建image

docker build -f Dockerfile-prod -t my-app:prod .

运行容器

docker run -it -p 80:80 --rm my-app:prod

然后访问http://localhost/或者http://你的ip

Docker Compose

在根目录创建docker-compose-prod.yaml文件

version: '3.7'

services:

  my-app-prod:
    container_name: my-app-prod
    build:
      context: .
      dockerfile: Dockerfile-prod
    ports:
      - '80:80'

运行docker-compose

docker-compose -f docker-compose-prod.yaml up -d --build

停止

docker-compose -f docker-compose-prod.yaml stop

然后访问http://localhost/或者http://你的ip

Vue Router的history模式Nginx配置

前面我们切换路由，并刷新页面发现是404，我们需要修改对应nginx的配置

创建nginx配置文件夹

└── nginx
    └── nginx.conf

nginx:conf

server {

  listen 80;

  location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }

  error_page   500 502 503 504  /50x.html;

  location = /50x.html {
    root   /usr/share/nginx/html;
  }

}

我们需要增加配置新的nginx配置文件

RUN rm /etc/nginx/conf.d/default.conf
COPY nginx/nginx.conf /etc/nginx/conf.d

新的Dockerfile-prod文件

# 构建容器
FROM node:12.6.0-alpine as build
WORKDIR /app

COPY package.json .
RUN npm install
COPY . /app
RUN npm run build

# 生产容器
FROM nginx:1.16.0-alpine
COPY --from=build /app/dist /usr/share/nginx/html
RUN rm /etc/nginx/conf.d/default.conf
COPY nginx/nginx.conf /etc/nginx/conf.d
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

重新构建image，运行容器或者docker-compose。

欢迎大家讨论遇到的问题.