前端vue项目服务器部署(docker)
步骤 1: 导入 Nginx Docker 镜像
1、上传 Nginx Docker 镜像
将你的nginx-alpine.tar包上传到服务器上。假设路径为 /var/v3-admin-vite/nginx-alpine.tar。
scp -r "C:\Users\86184\Desktop\v3-admin-vite" root@110.40.179.182:/var/2、导入 Nginx Docker 镜像
使用以下命令将 .tar 文件加载为 Docker 镜像：
docker load -i /var/v3-admin-vite/nginx-alpine.tar执行后会显示类似如下的输出，表示镜像已成功加载：
Loaded image: nginx:alpine3、验证镜像是否加载
确认镜像已经导入成功：
docker images应该可以看到 nginx:alpine 镜像在列表中。
步骤 2: 设置 Docker 项目
1、确保目录结构正确
在你的服务器上确保 /var/v3-admin-vite/ 目录下包含以下内容：
- dist/：Vue 项目构建后的静态文件。
- nginx.conf：自定义的 Nginx 配置文件。
- Dockerfile。
确保 dist 目录中有你的 Vue 项目的打包内容。
2、编写 Dockerfile
在 /var/v3-admin-vite/ 下编写或确保已经有如下内容的 Dockerfile：
# 使用导入的 nginx:alpine 镜像FROM nginx:alpine# 将自定义的 Nginx 配置文件复制到容器中COPY ./nginx.conf /etc/nginx/nginx.conf# 将 Vue 项目的构建文件复制到 Nginx 的静态资源目录中COPY ./dist /usr/share/nginx/html# 暴露 Nginx 的端口EXPOSE 80# 启动 NginxCMD ["nginx", "-g", "daemon off;"]3、编写nginx.conf
由于我的Vue 项目构建后的静态文件/var/v3-admin-vite/dist的结构是：
-static
-app-loading
-cssfavicon.ico
-index.html
因此编写的nginx内容如下：
worker_processes 1;events { worker_connections 1024;}http { include mime.types; default_type application/octet-stream; sendfile on; keepalive_timeout 65; server { listen 80; server_name 110.40.179.182; # 部署服务器的 IP 地址 root /usr/share/nginx/html; # Nginx 的根目录 index index.html; location / { try_files $uri $uri/ /index.html; } location /api/v1/ { proxy_pass http://122.228.26.226:36519/api/v1/; # 你的后端服务地址 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header X-Forwarded-Proto $scheme; } location /static/ { alias /usr/share/nginx/html/static/; expires 1y; add_header Cache-Control "public, max-age=31536000, immutable"; } location /favicon.ico { try_files $uri =404; } location /app-loading.css { try_files $uri =404; } error_page 500 502 503 504 /50x.html; location = /50x.html { root /usr/share/nginx/html; } }}步骤 3: 构建和运行 Docker 容器
1、构建 Docker 镜像
使用以下命令构建 Docker 镜像：
cd /var/v3-admin-vitedocker build -t my-vue-app .这将使用 Dockerfile 来构建名为 my-vue-app 的 Docker 镜像。
2、运行 Docker 容器
构建完成后，运行容器：
docker run -d -p 80:80 --name my-vue-app-container my-vue-app- -d：后台运行容器。
- -p 80:80：将容器的 80 端口映射到服务器的 80 端口。
- --name my-vue-app-container：将容器命名为 my-vue-app-container。
步骤 4: 访问应用
部署完成后，可以通过访问服务器的 IP 地址在浏览器中查看应用。
http://<服务器IP>此时，如果没有错误，应该能看到你的 Vue 项目正常运行。
指令总结：
在服务器上执行以下指令即可部署完成：
docker load -i /var/v3-admin-vite/nginx-alpine.tarcd /var/v3-admin-vitedocker build -t my-vue-app .docker run -d -p 80:80 --name my-vue-app-container my-vue-app常见问题排查
1、504 Gateway Timeout
如果你依然遇到 504 Gateway Timeout 问题，可能是后端接口无法响应，建议检查：
- 后端服务是否正常运行。
- Nginx 的代理配置是否正确，尤其是代理地址和端口。
2、修改 Nginx 配置后重启
如果你对 nginx.conf 进行了修改，可以通过以下命令重启容器：
docker restart my-vue-app-container或者停止并重新运行容器：
docker stop my-vue-app-containerdocker rm my-vue-app-containerdocker run -d -p 80:80 --name my-vue-app-container my-vue-app