Docker 化 Vue2 应用开发
随着越来越多的项目使用 Vue3 ,前端项目可能面临新旧版本的问题,需要在本地切换 node.js
的版本,甚至出现一些依赖冲突的问题,为了避免这些问题最佳的方式是用 Docker 容器化来隔离每个开发环境。本文将介绍如何使用 Docker 对 Vue2 前端项目进行 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.json
RUN npm install
RUN npm install @vue/cli@3.7.0 -g
# start app
CMD ["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
运行容器命令解释:
docker run
命令从刚刚创建的镜像中创建一个新的容器实例并运行它。-v ${PWD}:/app
将项目代码挂载到容器中的路径/app
下。{PWD}
可能无法在 Windows 上运行,需要使用%cd%
来替代。- 由于要使用容器中的
node_modules
内容,需要挂载另一个路径:-v /app/node_modules
,这样安装的依赖就不在本地文件夹node_modules
中。 -p 8080:8080
将端口8080
暴露给同一网络上的其他 Docker 容器(用于容器间通信),并将端口 8081 暴露给主机。--rm
在容器退出后删除容器和卷。-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开发中还是可以带来很多的便利和好处,在正式的生产环境也可以使用容器化部署,可以将应用进行隔离。