之前项目没有前后端分离的时候,部署贼简单,直接启动一个应用就可以了。但是如果拆分成前后端分离的项目,那么部署方式可能就变了,毕竟已经有两个项目了,那具体怎么部署呢?毕竟两个项目有可能会有跨域的问题。
部署方案1、单项目部署模式
假设我们前端是vue或者html项目,后端是springboot项目,那么部署的时候直接把前端打包后的静态资源放在springboot项目下的static文件夹下面,当作是静态资源。然后部署的时候就跟不分离模式一样了,只需要启动一个springboot即可。也没有跨域问题。
部署方式2、Nginx+springboot
我们可以把前端项目打包后放在Nginx的资源目录下面,然后配置文件按路径做个代理到springboot来解决跨域问题,配置文件如下.
upstream myServer {
server 100.201.22.93:9991;
}
server {
listen 8010;
location / {
root /home/nginx/web;
try_files $uri $uri/ /index.html;
index index.html index.htm;
}
location ~* /api/(.*)
{
set $path $1;
proxy_pass http://myServer;
proxy_set_header Host $host:$server_port;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
}
部署方式3、Nginx+springboot+docker
假设我们的前端不是直接用Nginx,而是另起一个项目,比如用docker或者另一个nginx,那么为了防止跨域问题,我们要做两个代理,如下配置
upstream qd {
#hash $remote_addr consistent;
server 100.33.22.93:9096 max_fails=2 fail_timeout=180s ;
check interval=5000 rise=2 fall=5 timeout=3000 type=http;
check_http_send "GET / HTTP/1.0\r\n\r\n";
check_http_expect_alive http_2xx http_3xx http_4xx;
}
upstream ht {
#hash $remote_addr consistent;
server 100.33.22.93:9092 max_fails=2 fail_timeout=180s ;
check interval=5000 rise=2 fall=5 timeout=3000 type=http;
check_http_send "GET / HTTP/1.0\r\n\r\n";
check_http_expect_alive http_2xx http_3xx http_4xx;
}
server {
listen 9092;
underscores_in_headers on;
access_log logs/700-ydkf.access.log;
error_log logs/700-ydkf.errot.log;
location / {
proxy_connect_timeout 2s;
proxy_send_timeout 30m;
proxy_read_timeout 30m;
proxy_pass http://qd;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
proxy_set_header Host $host:$server_port;
}
location /api/{
proxy_send_timeout 30m;
proxy_read_timeout 30m;
proxy_pass http://ht;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
proxy_set_header Host $host:$server_port;
}
}
注意proxy_pass后面的地址最后加不加/要看你的项目具体部署调用的时候需不需要去掉/api,若不需要则加上,需要则不用加。
感想
都是为了解决跨域问题啊!