nginx 部署多個前端項目

NGINX中單設置一個web前端很容易,改變端口,改變root指向基本就搞定了,那麼,假設我們有多個前端項目部署在同一個域名下,該怎麼設置呢?

1. 先假設我們有一個應用,http://domain就可以訪問了, 現在改版了希望可以訪問舊的應用http://domain,同時也可以通過http://domain/new訪問新應用,那麼首先第一步就是需要對新的前端項目進行一些配置。
     a. 在vue.config.js中設置 publicPath: '/new/',

     b. 在路由index.js中設置   base:'/new/',


     c. 在index.html中加入<meta base=/new/>

    2. 修改NGINX設置,基本就是使location /指向原來的web前端,  location /new指向新的web前端

          a. 先在NGINX目錄下/usr/share/nginx/html 創建新的文件夾new,把新項目的static,index.html放置於new目錄,注意不是dist放到new目錄


         new 目錄結構

b.  vim /etc/nginx/nginx.conf,修改server 部份

 

  1. #For more information on configuration, see:
  2. # * Official English Documentation: http://nginx.org/en/docs/
  3. # * Official Russian Documentation: http://nginx.org/ru/docs/
  4. #user nginx;
  5. user root;
  6. worker_processes auto;
  7. error_log /var/log/nginx/error.log;
  8. pid /run/nginx.pid;
  9. # Load dynamic modules. See /usr/share/nginx/README.dynamic.
  10. include /usr/share/nginx/modules/*.conf;
  11. events {
  12. worker_connections 1024;
  13. }
  14. http {
  15. log_format main '$remote_addr - $remote_user [$time_local] "$request" '
  16. '$status $body_bytes_sent "$http_referer" '
  17. '"$http_user_agent" "$http_x_forwarded_for"';
  18. access_log /var/log/nginx/access.log main;
  19. sendfile on;
  20. tcp_nopush on;
  21. tcp_nodelay on;
  22. keepalive_timeout 65;
  23. types_hash_max_size 2048;
  24. include /etc/nginx/mime.types;
  25. default_type application/octet-stream;
  26. # Load modular configuration files from the /etc/nginx/conf.d directory.
  27. # See http://nginx.org/en/docs/ngx_core_module.html#include
  28. # for more information.
  29. #include /etc/nginx/conf.d/*.conf;
  30. server {
  31. listen 8099;
  32. server_name localhost;
  33. #此爲nginx本身index目錄
  34. #root /usr/share/nginx/html;
  35. # Load configuration files for the default server block.
  36. include /etc/nginx/default.d/*.conf;
  37. location / {
  38. 此爲舊應用index,static目錄
  39. root /usr/share/nginx/html/dist;
  40. try_files $uri $uri/ @router;
  41. index index.html index.htm;
  42. }
  43. location /new {
  44. #此爲新應用index,static目錄,同時注意這裏是alias,不是root,還有以及new的後面有/結尾
  45. alias /usr/share/nginx/html/new/;
  46. try_files $uri $uri/ /new/index.html;
  47. index index.html index.htm;
  48. }
  49. location @router {
  50. rewrite ^.*$ /index.html last;
  51. }
  52. error_page 404 /404.html;
  53. location = /40x.html {
  54. }
  55. error_page 500 502 503 504 /50x.html;
  56. location = /50x.html {
  57. }
  58. }
  59. # Settings for a TLS enabled server.
  60. #
  61. # server {
  62. # listen 443 ssl http2 default_server;
  63. # listen [::]:443 ssl http2 default_server;
  64. # server_name _;
  65. # root /usr/share/nginx/html;
  66. #
  67. # ssl_certificate "/etc/pki/nginx/server.crt";
  68. # ssl_certificate_key "/etc/pki/nginx/private/server.key";
  69. # ssl_session_cache shared:SSL:1m;
  70. # ssl_session_timeout 10m;
  71. # ssl_ciphers HIGH:!aNULL:!MD5;
  72. # ssl_prefer_server_ciphers on;
  73. #
  74. # # Load configuration files for the default server block.
  75. # include /etc/nginx/default.d/*.conf;
  76. #
  77. # location / {
  78. # }
  79. #
  80. # error_page 404 /404.html;
  81. # location = /40x.html {
  82. # }
  83. #
  84. # error_page 500 502 503 504 /50x.html;
  85. # location = /50x.html {
  86. # }
  87. # }
  88. }

c.  /usr/sbin/nginx -t 驗證conf文件是否配置正確

d. /usr/sbin/nginx -s reload 重新加載NGINX配置生效
    3. 最後通過http://localhost:8099就能訪問到舊前端,而通過http://localhost:8099/new就能訪問到新前端

網上有其他很多寫的NGINX反向代理部署多個前端,其前提應該是這個應用都已經可以正常訪問,只不過是在某個域和端口進行轉發,使用戶訪問方便。
    
在些過程中遇到的一些問題:
    1. 一開始只對NGINX進行了設置,在new文件夾下放了一個index.html,這樣只能訪問到index,而不能訪問到新的項目,因爲一些編譯好的文件路徑不對,導致沒法加載
    2. 404錯誤,一般來說就是配置和真實的路徑不符合
    3. 設置多個前端的時候需要把原來默認的全局ROOT 路徑註釋掉
    4. 注意每行設置最後的分號,反正我自己好幾次忘了
    5. 重啓NGINX可能發生的錯誤: 
        a. nginx[13499]: nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Address already in use),使用 netstat -ntpl或者ps -ef | grep nginx找到相應進程,然後kill 進程ID
        b. nginx start failed,pid找不到,   ./nginx -c -/etc/nginx/nginx.conf
    

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章