本篇文章会详细讲解如何在云服务器上使用docker部署Vue项目，包括但不限于阿里云轻量应用服务器，同时还会详细讲解每一步的意义，以及容易踩坑的点，不用担心看不懂，没有前置的学习成本，纯前端也能看懂！！

准备：

一台云服务器，一个Vue项目，推荐使用阿里云轻量应用服务器，当然，其他云服务器也可以

开始：

步骤 1：本地准备 Vue 项目

确保你的 Vue 项目已开发完成，并通过 npm run build 生成静态文件
1.在项目根目录执行构建命令：

npm install
npm run build

这会生成 dist 目录（包含 HTML/CSS/JS 等静态文件）。

步骤 2：编写 Dockerfile

编写 Dockerfile 的意义在于，
1.自动化构建： 只需要编写一次dockerfile即可，docker会根据内容自动构建
2.确保 开发、测试、生产环境的一致性： 举个例子，同一个Vue项目，你在你的电脑上执行 npm install 可以下载，但是换在别人电脑上，会出现失败，这就是环境问题导致的，但dockerfile可以确保环境一致性，在任何人的电脑上都能运行

# 使用 Nginx 作为基础镜像
# 这行代码的作用是 指定基础镜像，也就是说你是基于 nginx:alpine 这个镜像来创建新的 Docker 镜像。
# nginx:alpine 是官方提供的一个轻量级的 Nginx 镜像，基于 Alpine Linux，它比普通的 Nginx 镜像更小，适合用来构建容器，减小镜像体积。
FROM nginx:alpine

# 这一行的作用是 删除默认的 Nginx 配置文件。
# 默认情况下，Nginx 镜像会有一些配置文件存放在 /etc/nginx/conf.d/ 目录下。这里使用 rm -rf 命令把这个目录下的所有文件删除，目的是 清理掉默认的配置文件，你后面会复制你自己的配置文件进去。
RUN rm -rf /etc/nginx/conf.d/*

# 这行代码的作用是 复制你自己写的 Nginx 配置文件 到容器里。
# COPY 命令会把你本地的 nginx.conf 文件（你应该在项目中有一个这个文件）复制到容器的 /etc/nginx/conf.d/ 目录下。这个目录是 Nginx 的配置文件存放路径，Nginx 会读取这些配置来运行。
COPY nginx.conf /etc/nginx/conf.d/

# 这一行的作用是 复制你的静态文件 到 Nginx 提供服务的根目录。
# dist/ 是你的项目编译后的静态文件所在的目录（比如 Vue 或 React 编译后的文件），这行命令会把 dist 文件夹中的所有内容复制到 Nginx 默认的静态文件目录 /usr/share/nginx/html 下。
# Nginx 会把这个目录作为网站的根目录来提供静态文件服务，所以这样就能通过 Nginx 访问到你编译好的前端文件了。
COPY dist/ /usr/share/nginx/html

# 暴露 80 端口
# 这一行的作用是 告诉 Docker 容器会监听 80 端口。
# EXPOSE 是一个文档指令，它并不会真正“打开”端口，只是告诉 Docker 和其他人，容器中的应用程序会监听 80 端口（通常是 Web 服务的默认端口）。这样，当你运行容器时，你知道需要暴露端口 80 来访问 Nginx 服务。
EXPOSE 80

# 启动 Nginx 服务
# 这一行是容器启动时执行的命令。
# nginx 是启动 Nginx 的命令。
#-g "daemon off;" 是告诉 Nginx 以 非守护进程（foreground）模式 运行，简单来说，就是让 Nginx 在容器中一直运行，而不是后台运行。

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

步骤 3：编写 Nginx 配置文件

在项目根目录创建 nginx.conf 文件，配置 Vue 的路由和静态资源支持：

server {
    listen 80;
    server_name 你的云服务器公网IP;

    location / {
        root /usr/share/nginx/html;
        index index.html;
        try_files $uri $uri/ /index.html;  # 支持 Vue Router 的 history 模式
    }

    location /assets/ {
        root /usr/share/nginx/html;
    }

    # 配置静态文件缓存
    location ~* \.(js|css)$ {
        root /usr/share/nginx/html;
        expires 30d;
        add_header Cache-Control "public, no-transform";
    }

    location ~* \.(jpg|jpeg|png|gif|ico|svg)$ {
        root /usr/share/nginx/html;
        expires 1y;
        add_header Cache-Control "public, no-transform";
    }

    

    # 安全增强配置
    add_header X-Content-Type-Options "nosniff";
    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
}

步骤 4：构建 Docker 镜像

在项目根目录执行以下命令构建镜像：

docker build -t my-vue-app:latest .

1. docker build 是用来根据当前目录中的 Dockerfile 文件构建一个新的 Docker 镜像

2. -t（或 --tag）用来 为构建的镜像指定标签。标签通常包括镜像的名称和版本号。
   my-vue-app:latest 是你给构建的镜像指定的标签。
   my-vue-app 是镜像的名称（你自己给它起的名字），可以用这个名字来引用这个镜像。
   latest 是标签，表示镜像的版本，通常 latest 表示最新版本。如果你没有指定其他版本号，Docker 会默认使用 latest 标签。
   你也可以使用其他标签，比如 v1.0.0、staging 等，以便区分不同版本的镜像

3. . 表示当前目录。这个路径指定了 Docker 构建镜像时应该查找的上下文文件夹。通常，我们把 Dockerfile 放在项目的根目录，所以这里的 . 表示当前目录中的 Dockerfile 文件和其他相关的文件（比如项目文件、配置文件等）。
   也就是说，Docker 会在当前目录查找 Dockerfile 文件，并根据这个文件中的指令来构建镜像

！！！这里有踩坑点： 如果执行这行命令时报错
failed to solve: DeadlineExceeded: DeadlineExceeded: DeadlineExceeded: nginx:alpine: failed to resolve source metadata for docker.io/library/nginx:alpine: failed to authorize: DeadlineExceeded: failed to fetch anonymous token: Get “https://auth.docker.io/token?scope=repository%3Alibrary%2Fnginx%3Apull&service=registry.docker.io”: dial tcp [2a03:2880:f12a:83:face:b00c:0:25de]:443: i/o timeout

这个错误通常是由于 Docker 在拉取镜像时超时或网络连接问题导致的。具体来说，错误信息表明 Docker 在尝试从 docker.io 拉取 nginx:alpine 镜像时，遇到连接问题或超时，无法获取所需的认证令牌

解决方法

#手动拉取镜像
docker pull nginx:alpine

#再构建镜像
docker build -t my-vue-app:latest .

步骤 5：在轻量应用服务器部署

前提条件

1. 轻量应用服务器已安装 Docker：

# 若未安装，执行以下命令：
curl -fsSL https://get.docker.com | bash -s docker

2. 开放服务器安全组的 80 端口（阿里云控制台操作）。

部署方式 ：直接在服务器构建镜像

1. 将 Vue 项目代码上传到服务器
   我这里是通过 scp 从本地上传至云服务器，包含 dist、dockerfile 以及 nginx.conf 三个文件，你可以在本地将这三个文件放在同一个文件夹中然后执行

scp -r /local/path/to/vue-project root@服务器IP:/root/vue-project
# 这里的/local/path/to/vue-project 就是你本地文件地址 root是服务器用户名 一般都是root 然后服务器公网ip，/root/vue-project替换成你要上传到服务器的具体位置

尤其注意这段命令行是在本地执行，而非服务器上执行，因为你需要从本地查找文件并上传，如果在服务器上执行你是找不到文件的
还要注意一点，比如我要上传到服务器上的 root/vue-project 我首先得在服务器上创建
vue-project文件

#创建文件
mkdir vue-project 

2. 在服务器上构建并运行容器：

cd /root/vue-project
docker build -t my-vue-app .
docker run -d -p 8080:80 --name vue-container my-vue-app

• docker run 是用来创建并启动一个新的 Docker 容器的命令。

• -d（或 --detach）表示 后台运行容器。也就是说，容器会在后台启动，并且你可以继续在命令行做其他事情，而不会被容器的输出占用。
  如果不加 -d，容器会以前台模式运行，命令行会被容器的输出“占据”。

• -p 8080:80：
  -p（或 --publish）是用来将容器内部的端口映射到主机（你电脑或者服务器）上的端口的。
  8080:80 表示将容器内部的 80 端口 映射到主机的 8080 端口。
  也就是说，当你访问 http://localhost:8080 时，实际上是在访问容器的 80 端口，容器通过 Nginx 提供服务。

• –name vue-container：
  –name 用来给容器指定一个名字。
  这里你把容器命名为 vue-container。这样，你就可以通过容器名字来引用它，而不是通过容器的 ID。例如：docker stop vue-container 或 docker logs vue-container。

• my-vue-app：
  my-vue-app 是你要启动的 Docker 镜像的名字。
  这个镜像应该是你之前构建的镜像（假设通过 Dockerfile 文件构建）。它包含了你打包好的 Vue 应用，并且已经配置好 Nginx 来提供静态文件服务。
  这个名字应该是你在构建镜像时给定的名字。

总结一下：
docker run -d -p 8080:80 --name vue-container my-vue-app 的作用是：
启动一个名为 vue-container 的容器，容器基于 my-vue-app 这个镜像。
容器会在后台运行，并且将容器的 80 端口映射到主机的 8080 端口。
这样，你就可以通过访问 http://localhost:8080 来访问容器内的 Vue 应用。
这个命令执行后，你可以用浏览器访问 http://localhost:8080 来查看部署的 Vue 应用。

OK到这一步，通过访问 http://ip:8080 即可访问你的Vue项目里