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轉發代理後端接口。

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爲代理接口，能夠轉發代理後端的請求接口域名或者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的命令