手把手教你用 Docker 部署 Vue 项目（含国内镜像加速 + 踩坑指南）

"很多前端同学写完 Vue 项目后，面对'如何部署上线'一脸懵。传统方式配置 nginx、传文件、配域名，步骤繁琐还容易出错。今天我用一篇实战笔记，教你用 Docker 一键部署 Vue 项目，真正做到'写完即上线'。"

准备一台云服务器

我用的是 CentOS 7 ，IP 假设为 49.233.249.191，你换成自己的即可。

1.1 SSH 连接

bash 复制代码

Windows / Mac / Linux 通用
ssh root@49.233.249.191

安装 Docker（含国内镜像加速）

1.2. 卸载可能存在的旧版本（可选）

bash 复制代码

sudo yum remove docker \
                docker-client \
                docker-client-latest \
                docker-common \
                docker-latest \
                docker-latest-logrotate \
                docker-logrotate \
                docker-engine

1.3. 安装依赖工具

bash 复制代码

sudo yum install -y yum-utils device-mapper-persistent-data lvm2

1.4. 添加 Docker 官方仓库

bash 复制代码

sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo

1.5. 安装 Docker 最新版本

bash 复制代码

sudo yum install -y docker-ce docker-ce-cli containerd.io

如果执行这个语句报错：Error downloading packages:containerd.io-1.6.33-3.1.el7.x86_64: [Errno 256] No more mirrors to try.

用下面的方法：

手动下载 containerd.io，用腾讯云的镜像（它支持直接 HTTP 下载，不会403或reset）：

bash 复制代码

cd /tmp
wget https://mirrors.cloud.tencent.com/docker-ce/linux/centos/7/x86_64/stable/Packages/containerd.io-1.6.33-3.1.el7.x86_64.rpm

安装 containerd.io

bash 复制代码

sudo yum install -y ./containerd.io-1.6.33-3.1.el7.x86_64.rpm

再装 docker-ce 和 docker-ce-cli

sudo yum install -y docker-ce docker-ce-cli

1.6. 查看是否安装成功

bash 复制代码

docker --version

如果安装成功，会输出类似：Docker version 20.10.7, build f0df350

1.7. 启动并设置开机自启（可选）

bash 复制代码

sudo systemctl start docker
sudo systemctl enable docker

1.8. 运行测试容器

arduino 复制代码

docker run hello-world

如果报错：docker: Error response from daemon: Get "registry-1.docker.io/v2/": net/http: request canceled while waiting for connection (Client.Timeout exceeded while awaiting headers).

用下面的方法：

配置 Docker 国内镜像加速器：执行以下命令，配置阿里云或腾讯云的镜像加速地址(直接复制)

bash 复制代码

sudo mkdir -p /etc/docker

sudo tee /etc/docker/daemon.json <<-'EOF'
{
  "registry-mirrors": [
    "https://registry.docker-cn.com",
    "https://mirror.ccs.tencentyun.com",
    "https://registry.aliyuncs.com"
  ]
}
EOF

sudo systemctl daemon-reload
sudo systemctl restart docker

配置好后，重新拉取测试镜像

bash 复制代码

docker run hello-world

看到Hello from Docker!代表成功

2. docker 部署前端 vue 项目

🚀 部署步骤 3 步走：

本地打包 Vue 项目（生成生产文件）

打包成 Docker 镜像

将镜像推送到服务器运行

2.1 创建 Dockerfile

在项目根目录创建 Dockerfile：

bash 复制代码

# 使用 nginx 作为基础镜像
FROM nginx:alpine

# 删除默认的 nginx 静态文件
RUN rm -rf /usr/share/nginx/html/*

# 将打包好的 dist 文件夹拷贝到 nginx 静态目录
COPY dist/ /usr/share/nginx/html/

# 拷贝自定义 nginx 配置（可选，如果需要路由支持）
COPY nginx.conf /etc/nginx/conf.d/default.conf

# 暴露端口
EXPOSE 80

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

如果你的 Vue 项目是 SPA，并且用到了 history mode 路由，nginx.conf 可以写成：

ini 复制代码

server {
    listen 80;
    server_name localhost;

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

2.2 在服务器上构建镜像

本地打包 Vue 项目

bash 复制代码

cd /Users/xxx/Downloads/vue/vue-webpack-split-demo # 进入到项目跟路径
npm install # 下载依赖（如果已经下载可以不执行）
npm run build # 打包

打包完成后，会生成一个 dist 文件夹（里面就是静态资源）。

把 dist 和 Dockerfile ，nginx.conf上传到服务器：

bash 复制代码

scp -r dist Dockerfile nginx.conf root@49.233.249.191:/root/vue-demo/

在服务器构建镜像：

bash 复制代码

cd /root/vue-demo
docker build -t vue-demo .

运行容器：

bash 复制代码

docker run -d -p 80:80 --name vue-demo vue-demo

浏览器访问：

bash 复制代码

http://49.233.249.191 #自己的服务器

2.3 如何删除部署？

这个 Vue 项目的部署在 Docker 里包含两部分：

容器（运行中的实例）
镜像（打包好的 Vue 项目）

如果想彻底删除部署，需要把两部分都清掉：

停止并删除容器

bash 复制代码

docker stop vue-demo   # 停止容器
docker rm vue-demo     # 删除容器

删除镜像

docker rmi vue-demo
检查是否删除干净

bash 复制代码

docker ps -a   # 没有 vue-demo 容器
docker images  # 没有 vue-demo 镜像