将你的nginx-alpine.tar包上传到服务器上。假设路径为 /var/v3-admin-vite/nginx-alpine.tar
。
scp -r "C:\Users\86184\Desktop\v3-admin-vite" [email protected]:/var/
使用以下命令将 .tar
文件加载为 Docker 镜像:
docker load -i /var/v3-admin-vite/nginx-alpine.tar
执行后会显示类似如下的输出,表示镜像已成功加载:
Loaded image: nginx:alpine
确认镜像已经导入成功:
docker images
应该可以看到 nginx:alpine
镜像在列表中。
在你的服务器上确保 /var/v3-admin-vite/
目录下包含以下内容:
- dist/
:Vue 项目构建后的静态文件。
- nginx.conf
:自定义的 Nginx 配置文件。
- Dockerfile
。
确保 dist
目录中有你的 Vue 项目的打包内容。
在 /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
# 启动 Nginx
CMD ["nginx", "-g", "daemon off;"]
由于我的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;
}
}
}
使用以下命令构建 Docker 镜像:
cd /var/v3-admin-vite
docker build -t my-vue-app .
这将使用 Dockerfile 来构建名为 my-vue-app
的 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
。
部署完成后,可以通过访问服务器的 IP 地址在浏览器中查看应用。
http://<服务器IP>
此时,如果没有错误,应该能看到你的 Vue 项目正常运行。
在服务器上执行以下指令即可部署完成:
docker load -i /var/v3-admin-vite/nginx-alpine.tar
cd /var/v3-admin-vite
docker build -t my-vue-app .
docker run -d -p 80:80 --name my-vue-app-container my-vue-app
如果你依然遇到 504 Gateway Timeout
问题,可能是后端接口无法响应,建议检查:
- 后端服务是否正常运行。
- Nginx 的代理配置是否正确,尤其是代理地址和端口。
如果你对 nginx.conf
进行了修改,可以通过以下命令重启容器:
docker restart my-vue-app-container
或者停止并重新运行容器:
docker stop my-vue-app-container
docker rm my-vue-app-container
docker run -d -p 80:80 --name my-vue-app-container my-vue-app