使用Docker部署Vue项目的完整指南

开篇：为什么选择Docker部署Vue项目？

作为前端开发者，我们经常遇到这样的场景："这代码在我本地跑得好好的，怎么到服务器上就不行了？" Docker就是为了解决这类"在我机器上能跑"的问题而生的。今天就用Docker部署一个Vue项目，从此告别环境配置的烦恼。

一、准备工作

1. 确保你的开发环境有：

• Node.js（建议14.x或以上）

• Docker Desktop（Mac/Windows）或 Docker Engine（Linux）

• 一个现成的Vue项目（没有的话可以用vue create my-project快速创建一个）

2. 项目结构预览

这是我们的Vue项目结构，后面会逐步添加Docker相关文件：

my-vue-project/
├── public/
├── src/
├── package.json
└── (其他Vue项目原有文件)

二、配置文件

1. 创建Dockerfile

在项目根目录下创建Dockerfile（没有后缀名）：

# 第一阶段：构建应用
FROM node:16-alpine as build-stage

WORKDIR /app

# 先拷贝package.json（利用Docker缓存层）
COPY package*.json ./

# 安装依赖
RUN npm install

# 拷贝项目文件
COPY . .

# 构建生产环境应用
RUN npm run build

# 第二阶段：运行应用
FROM nginx:alpine as production-stage

# 从构建阶段拷贝构建好的文件
COPY --from=build-stage /app/dist /usr/share/nginx/html

# 暴露80端口
EXPOSE 80

# 启动Nginx
CMD ["nginx", "-g", "daemon off;"]

2. 创建.dockerignore文件

为了避免把不必要的文件拷贝到Docker镜像中：

查看代码

 node_modules
.git
.gitignore
dist
.DS_Store

3. 构建Docker镜像

在项目根目录运行：

docker build -t my-vue-app .

4. 运行容器

docker run -d -p 8080:80 --name my-vue-container my-vue-app

现在打开浏览器访问 http://localhost:8080 就能看到你的Vue应用了！

三、高级配置

1. 使用多阶段构建

上面的Dockerfile已经使用了多阶段构建，这样做的好处是：

• 最终镜像只包含运行需要的文件（没有node_modules等）

• 镜像体积更小（从几百MB减少到几十MB）

2. 自定义Nginx配置

默认的Nginx配置可能不满足需求，我们可以自定义：

1. 在项目根目录创建nginx/default.conf：

 

server {
    listen 80;
    server_name localhost;
    
    location / {
        root /usr/share/nginx/html;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
    
    # 其他自定义配置...
}

2. 修改Dockerfile，替换Nginx配置：

 

# ...其他内容保持不变...

FROM nginx:alpine as production-stage

# 拷贝自定义Nginx配置
COPY nginx/default.conf /etc/nginx/conf.d/default.conf

# 从构建阶段拷贝构建好的文件
COPY --from=build-stage /app/dist /usr/share/nginx/html

EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

3. 使用Docker Compose

对于更复杂的项目，推荐使用docker-compose：

1. 创建docker-compose.yml：

 

version: '3'

services:
  web:
    build: .
    ports:
      - "8080:80"
    restart: always

2. 运行：

 

docker-compose up -d

四、常见问题解决

1. 构建时内存不足

如果遇到JavaScript堆内存不足的错误：

# 在Dockerfile的构建阶段添加环境变量
FROM node:16-alpine as build-stage

ENV NODE_OPTIONS=--max_old_space_size=4096

# ...其余内容不变...

2. 容器启动后访问空白页

检查：

• 确认dist目录已正确生成

• 检查Nginx配置是否正确

• 查看容器日志：docker logs my-vue-container

3. 开发环境热更新

要在开发时使用Docker并保持热更新：

# 开发环境Dockerfile
FROM node:16-alpine

WORKDIR /app

COPY package*.json ./

RUN npm install

COPY . .

EXPOSE 8080

CMD ["npm", "run", "serve"]

然后运行：

docker run -it -p 8080:8080 -v $(pwd):/app -v /app/node_modules --name my-vue-dev my-vue-app-dev

五、生产环境最佳实践

1. 使用特定版本的Node基础镜像

    

   FROM node:16.14.2-alpine

2. 定期更新基础镜像：定期检查并更新Node和Nginx的基础镜像版本

3. 添加健康检查：检查容器内部用的应用是否正常运行，如果应用出现故障，可以重启容器

    

   HEALTHCHECK --interval=30s --timeout=3s \
     CMD curl -f http://localhost/ || exit 1

4. 使用非root用户运行：

    

   RUN chown -R nginx:nginx /usr/share/nginx/html
   USER nginx

六、部署到云服务器

假设你已经有一个Linux服务器并安装了Docker：

1. 将项目代码上传到服务器（或用Git直接clone）

2. 在服务器项目目录下构建镜像：

    

   docker build -t my-vue-app .

3. 运行容器：

    

   docker run -d -p 80:80 --name vue-app my-vue-app

总结

通过Docker部署Vue项目，我们实现了：

• 一致的运行环境

• 简化的部署流程

• 方便的版本管理和回滚