Nginx部署前後端分離服務以及配置說明

這篇文章主要介紹了關於Nginx部署前後端分離服務以及配置說明，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

安裝Nginx

在CentOS 7 伺服器中使用yum命令安裝Nginx：

sudo yum install -y nginx

配置Nginx

檔案位置

一般nginx設定檔在 etc目錄下，也可以執行命令 rpm -ql nginx查看路徑。

切換至/etc/nginx目錄後，可以看到nginx.conf這個設定檔。
執行 vi nginx.conf即可開啟設定檔。

vim 常用命令

命令	作用
i	游標前面開始輸入內容
a	游標後面開始輸入內容
Esc	退出輸入模式
u	在非輸入模式下撤銷上一步操作
:w	在非輸入模式下,儲存
:wq	在非輸入模式下,儲存並關閉
:q	關閉（已儲存）
:q!	不儲存,強制關閉

Nginx配置說明

# For more information on configuration, see:#   * Official English Documentation: http://nginx.org/en/docs/#   * Official Russian Documentation: http://nginx.org/ru/docs/user nginx;worker_processes auto; #啟動進程error_log /var/log/nginx/error.log; #全域錯誤記錄檔pid /run/nginx.pid; #PID檔案# Load dynamic modules. See /usr/share/nginx/README.dynamic.include /usr/share/nginx/modules/*.conf;events {    worker_connections 1024; #單個後台worker process進程的最大並發連結數 }http {    gzip on; #開啟gzip壓縮    gzip_min_length 1k; #設定對資料啟用壓縮的最少位元組數    gzip_buffers    4 16k;    gzip_http_version 1.0;    gzip_comp_level 6; #設定資料的壓縮等級,等級為1-9，壓縮比從小到大    gzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml; #設定需要壓縮的資料格式    gzip_vary on;    #虛擬機器主機配置    server {        listen       80 default_server; #偵聽80連接埠,並為預設服務,default_server只能有一個        server_name  www.binlive.cn binlive.cn; #服務網域名稱,可以有多個,用空格隔開                location /{            proxy_pass http://127.0.0.1:3000; #代理本機3000連接埠服務            proxy_set_header  Host              $http_host;   # required for docker client's sake            proxy_set_header  X-Real-IP         $remote_addr; # 擷取使用者的真實IP地址            proxy_set_header  X-Forwarded-For   $proxy_add_x_forwarded_for;            proxy_set_header  X-Forwarded-Proto $scheme;            proxy_read_timeout                  900;        }        # 圖片緩衝時間設定        location ~ .*.(gif|jpg|jpeg|png|bmp|swf)$ {            expires 10d;        }        # JS和CSS緩衝時間設定        location ~ .*.(js|css)?$ {            expires 1h;        }        # 404定義錯誤提示頁面        error_page 404             /404.html;        # 500定義錯誤提示頁面        error_page   500 502 503 504 /50x.html;            }    server {        listen       80;        server_name  admin.binlive.cn;        location /{            proxy_pass http://127.0.0.1:3080;            proxy_set_header  Host              $http_host;   # required for docker client's sake            proxy_set_header  X-Real-IP         $remote_addr; # pass on real client's IP            proxy_set_header  X-Forwarded-For   $proxy_add_x_forwarded_for;            proxy_set_header  X-Forwarded-Proto $scheme;            proxy_read_timeout                  900;        }            } }

部署前後端分離項目

在前後端分離端項目裡，前端的代碼會被打包成為純靜態檔案。使用 Nginx的目的就是讓靜態檔案運行起服務，由於後端的介面也是分離的，直接請求可能會產生跨域問題，此時就需要Nginx轉送 Proxy後端介面。

Nginx配置如下

# For more information on configuration, see:#   * Official English Documentation: http://nginx.org/en/docs/#   * Official Russian Documentation: http://nginx.org/ru/docs/user nginx;worker_processes auto; #啟動進程error_log /var/log/nginx/error.log; #全域錯誤記錄檔pid /run/nginx.pid; #PID檔案# Load dynamic modules. See /usr/share/nginx/README.dynamic.include /usr/share/nginx/modules/*.conf;events {    worker_connections 1024; #單個後台worker process進程的最大並發連結數 }http {    gzip on; #開啟gzip壓縮    gzip_min_length 1k; #設定對資料啟用壓縮的最少位元組數    gzip_buffers    4 16k;    gzip_http_version 1.0;    gzip_comp_level 6; #設定資料的壓縮等級,等級為1-9，壓縮比從小到大    gzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml; #設定需要壓縮的資料格式    gzip_vary on;    #虛擬機器主機配置    server {        listen       80;        server_name  mark.binlive.cn;        root /home/spa-project/dist; #定義伺服器的預設網站根目錄位置        index index.html; #定義index頁面        error_page    404         /index.html; #將404錯誤頁面重新導向到index.html可以解決history模式訪問不到頁面問題        location ^~ /api/{            proxy_pass http://127.0.0.1:7000;            proxy_send_timeout 1800;            proxy_read_timeout 1800;            proxy_connect_timeout 1800;            client_max_body_size 2048m;            proxy_http_version 1.1;              proxy_set_header Upgrade $http_upgrade;              proxy_set_header Connection "Upgrade";             proxy_set_header  Host              $http_host;   # required for docker client's sake            proxy_set_header  X-Real-IP         $remote_addr; # pass on real client's IP            proxy_set_header  X-Forwarded-For   $proxy_add_x_forwarded_for;            proxy_set_header  X-Forwarded-Proto $scheme;        }        location ^~ /auth/{            proxy_pass http://127.0.0.1:7000;            proxy_send_timeout 1800;            proxy_read_timeout 1800;            proxy_connect_timeout 1800;            client_max_body_size 2048m;            proxy_http_version 1.1;              proxy_set_header Upgrade $http_upgrade;              proxy_set_header Connection "Upgrade";             proxy_set_header  Host              $http_host;   # required for docker client's sake            proxy_set_header  X-Real-IP         $remote_addr; # pass on real client's IP            proxy_set_header  X-Forwarded-For   $proxy_add_x_forwarded_for;            proxy_set_header  X-Forwarded-Proto $scheme;        }    }    }

• 將前端代碼打包後的dist檔案放入指定服務類別目錄

• 將服務類別目錄指定到spa-project/dist目錄下即可代理靜態服務

• 配置裡開啟了gzip壓縮，可以很大程度上減小檔案體積大小

• 將404錯誤頁面重新導向到index.html，可以解決前端history路由模式由於重新整理頁面訪問不到服務出現404的問題

• location為代理介面，可以轉送 Proxy後端的請求介面網域名稱或者ip，即可解決介面跨域問題

啟動Nginx服務

當完成配置後即可啟動nginx
執行nginx -t，可以測試Nginx的配置是否正確。
執行nginx，在設定檔正確的情況下即可啟動nginx服務。
修改nginx設定檔後執行nginx -s reload可以完成平滑過渡重新載入配置

Nginx常用命令

命令	描述
nginx -h	查看Nginx的協助
nginx -v	查看Nginx的版本
nginx -t	測試Nginx的配置
nginx -T	測試Nginx的配置，並列印配置資訊
nginx	啟動nginx
nginx -s reload	重新載入設定檔，平滑啟動nginx
nginx -s stop	停止nginx的命令

以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！