使用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 这个必要