Docker 化 Vue2 应用开发

随着越来越多的项目使用 Vue3 ，前端项目可能面临新旧版本的问题，需要在本地切换 node.js 的版本，甚至出现一些依赖冲突的问题，为了避免这些问题最佳的方式是用 Docker 容器化来隔离每个开发环境。本文将介绍如何使用 Docker 对 Vue2 前端项目进行 Docker 化，用于项目开发过程。

开始之前可以参阅一下文章熟悉并安装 Docker 环境。

• 《面向 WEB 开发人员的 Docker（八）：将 Docker 镜像推送到仓库》

• 《面向 WEB 开发人员的 Docker（七）：使用 Docker 开发 Node 应用程序》

• 《面向 WEB 开发人员的 Docker（六）：使用 nginx 部署静态网站》

• 《面向 WEB 开发人员的 Docker（五）：部署开发 WordPress》

• 《面向 WEB 开发人员的 Docker（四）：启动 MySQL 数据库》

• 《面向 WEB 开发人员的 Docker（三）：安装 Docker》

• 《面向 WEB 开发人员的 Docker（二）：什么是 Docker、镜像、编排？》

• 《面向 WEB 开发人员的 Docker（一）》

进入本文的主题，在项目根目录下增加文件 Dockerfile，代码如下：

FROM node:14.19-alpine3.15
WORKDIR /app
ENV PATH /app/node_modules/.bin:$PATH
# 安装并缓存应用程序依赖项COPY package.json /app/package.jsonRUN npm installRUN npm install @vue/cli@3.7.0 -g
# start appCMD ["npm", "run", "serve"]

再增加文件 .dockerignore，内容如下：

node_modules.git.gitignore

这将加快 Docker 构建过程，因为本地依赖项和 git repo 不会被发送到 Docker 守护进程。

构建并标记 Docker 映像：

docker build -t vue2-app:dev .

在构建完成后运行容器：

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

运行容器命令解释：

1. docker run 命令从刚刚创建的镜像中创建一个新的容器实例并运行它。

2. -v ${PWD}:/app 将项目代码挂载到容器中的路径 /app 下。{PWD} 可能无法在 Windows 上运行，需要使用 %cd% 来替代。

3. 由于要使用容器中的 node_modules 内容，需要挂载另一个路径：-v /app/node_modules，这样安装的依赖就不在本地文件夹 node_modules 中。

4. -p 8080:8080 将端口 8080 暴露给同一网络上的其他 Docker 容器（用于容器间通信），并将端口 8081 暴露给主机。

5. --rm 在容器退出后删除容器和卷。

6. -it ：容器的 Shell 映射到当前的 Shell，然后在本机窗口输入的命令，就会传入容器，这样需要终止项目调试只需要 Ctrl+c ，即可退出。

打开浏览器访问 http://localhost:8080，跟在本机调试一样，更改代码自动重新编译并重载（为了避免重载问题，建议映射的端口号和容器暴露的端口号一致）。

如果想使用 Docker Compose，可以在项目根目录下创建文件 docker-compose.yml ：

version: '3.7'services:
  vue2-app:    container_name: vue2-app    build:      context: .      dockerfile: Dockerfile    volumes:      - '.:/app'      - '/app/node_modules'    ports:      - '8080:8080'

如果没有匿名卷/app/node_modules，node_modules 目录将被运行时主机目录的挂载路径覆盖。换句话说，这会发生：

• 构建时，将在映像中创建 node_modules 目录。

• 运行时，当前目录被挂载到容器中，覆盖在构建期间安装的 node_modules。

构建镜像并启动容器：

docker-compose up -d --build

正常运行后将可以在浏览器中正常访问并调试。如果需要停止调试或者退出可以执行一下命令：

docker-compose stop

总结

Docker 在 WEB 开发中还是可以带来很多的便利和好处，在正式的生产环境也可以使用容器化部署，可以将应用进行隔离。