个人随笔
目录
架构设计20240816:关于前后端分离项目的部署模式一些思考
2024-08-16 16:06:57

之前项目没有前后端分离的时候,部署贼简单,直接启动一个应用就可以了。但是如果拆分成前后端分离的项目,那么部署方式可能就变了,毕竟已经有两个项目了,那具体怎么部署呢?毕竟两个项目有可能会有跨域的问题。

部署方案1、单项目部署模式

假设我们前端是vue或者html项目,后端是springboot项目,那么部署的时候直接把前端打包后的静态资源放在springboot项目下的static文件夹下面,当作是静态资源。然后部署的时候就跟不分离模式一样了,只需要启动一个springboot即可。也没有跨域问题。

部署方式2、Nginx+springboot

我们可以把前端项目打包后放在Nginx的资源目录下面,然后配置文件按路径做个代理到springboot来解决跨域问题,配置文件如下.

  1. upstream myServer {
  2. server 100.201.22.93:9991;
  3. }
  4. server {
  5. listen 8010;
  6. location / {
  7. root /home/nginx/web;
  8. try_files $uri $uri/ /index.html;
  9. index index.html index.htm;
  10. }
  11. location ~* /api/(.*)
  12. {
  13. set $path $1;
  14. proxy_pass http://myServer;
  15. proxy_set_header Host $host:$server_port;
  16. proxy_set_header X-Real-IP $remote_addr;
  17. proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  18. }
  19. }

部署方式3、Nginx+springboot+docker

假设我们的前端不是直接用Nginx,而是另起一个项目,比如用docker或者另一个nginx,那么为了防止跨域问题,我们要做两个代理,如下配置

  1. upstream qd {
  2. #hash $remote_addr consistent;
  3. server 100.33.22.93:9096 max_fails=2 fail_timeout=180s ;
  4. check interval=5000 rise=2 fall=5 timeout=3000 type=http;
  5. check_http_send "GET / HTTP/1.0\r\n\r\n";
  6. check_http_expect_alive http_2xx http_3xx http_4xx;
  7. }
  8. upstream ht {
  9. #hash $remote_addr consistent;
  10. server 100.33.22.93:9092 max_fails=2 fail_timeout=180s ;
  11. check interval=5000 rise=2 fall=5 timeout=3000 type=http;
  12. check_http_send "GET / HTTP/1.0\r\n\r\n";
  13. check_http_expect_alive http_2xx http_3xx http_4xx;
  14. }
  15. server {
  16. listen 9092;
  17. underscores_in_headers on;
  18. access_log logs/700-ydkf.access.log;
  19. error_log logs/700-ydkf.errot.log;
  20. location / {
  21. proxy_connect_timeout 2s;
  22. proxy_send_timeout 30m;
  23. proxy_read_timeout 30m;
  24. proxy_pass http://qd;
  25. proxy_set_header X-Real-IP $remote_addr;
  26. proxy_set_header X-Forwarded-Proto $scheme;
  27. proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  28. proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
  29. proxy_set_header Host $host:$server_port;
  30. }
  31. location /api/{
  32. proxy_send_timeout 30m;
  33. proxy_read_timeout 30m;
  34. proxy_pass http://ht;
  35. proxy_set_header X-Real-IP $remote_addr;
  36. proxy_set_header X-Forwarded-Proto $scheme;
  37. proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  38. proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
  39. proxy_set_header Host $host:$server_port;
  40. }
  41. }

注意proxy_pass后面的地址最后加不加/要看你的项目具体部署调用的时候需不需要去掉/api,若不需要则加上,需要则不用加。

感想

都是为了解决跨域问题啊!

 32

啊!这个可能是世界上最丑的留言输入框功能~


当然,也是最丑的留言列表

有疑问发邮件到 : suibibk@qq.com 侵权立删
Copyright : 个人随笔   备案号 : 粤ICP备18099399号-2