背景: 公司的项目前后端完全分离,所以前端需要独立部署
1、项目结构
项目打包后的静态资源在 dist 目录下
2、两个关键的文件 Dockerfile 和 nginx.conf
Dockerfile 放在根目录下
Dockerfile内容如下:
FROM nginx:stable-alpine
COPY dist/ /usr/share/nginx/html/
RUN rm /etc/nginx/conf.d/default.conf
COPY deploy/nginx.conf /etc/nginx/conf.d/default.conf
CMD ["nginx", "-g", "daemon off;"]
nginx.conf 放在 deploy/ 下,通过配置代理,可以将http请求代理到后端服务的地址
server {
listen 8088;
server_name localhost;
client_max_body_size 20g;
keepalive_timeout 6000s;
fastcgi_connect_timeout 6000;
fastcgi_send_timeout 6000;
fastcgi_read_timeout 6000;
access_log /var/log/nginx/host.access.log main;
error_log /var/log/nginx/error.log error;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location /nginx/ {
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-NginX-Proxy true;
proxy_pass http://xxxx:8080/; #后面带斜杠 会把匹配到的 /nginx/ 去掉
}
location /kapis/ {
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-NginX-Proxy true;
proxy_pass http://xxxx:8889/; #后面带斜杠 会把匹配到的 /nginx/ 去掉
}
location /apis {
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-NginX-Proxy true;
proxy_pass http://xxxx:8889;
}
location /oss/file/upload {
proxy_connect_timeout 6000s;
proxy_send_timeout 6000s;
proxy_read_timeout 6000s;
proxy_method POST; #上传文件等操作静态资源的请求需要加这个
proxy_pass http://xxxx:8080;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root /usr/share/nginx/html;
}
}
Dockerfile 中 有一处需要与 nginx.conf 对应
3、部署步骤
(1)项目打包好之后,将整个项目上传到服务器;(我是直接在服务器通过 git 拉取);
(2) 进入到项目目录,通过 docker 生成镜像
docker build -f Dockerfile -t 你的镜像名xxx .
(3) 运行docker
docker run -d -p 8088:8088 你的镜像名
(4) 访问8088端口