Nginx 部署與反向代理配置

最近我們的angular專案部署，我們採用的的是Nginx，下面對Nginx做一個簡單的介紹。

為什麼選擇Nginx

• 輕：相比於Apache，同樣的web伺服器佔用的資源少
• 多執行緒模式：Nginx擁有多個worker程序，處理請求時是非同步非阻塞的
• 社群活躍
• 可以做反向代理
• 支援7層負載均衡。什麼是七層負載均衡
• 配置簡單，易上手。這才是我們選擇的主要原因。

上一個官方下載下來的文件

連結：https://pan.baidu.com/s/1bkbGk8bcZcqe6sVG843WHA
提取碼：eg59

Window下 的 Nginx

雖然一般的伺服器都不使用windows系統，我們還是先來一段window的

• 訪問 ngix下載頁下載windows 版本的 ngix壓縮包
• 解壓到相應的目錄下。
• 開啟CMD， cd到解壓ngix的目錄下，鍵入 start nginx.exe
• 開啟瀏覽器，輸入localhost/127.0.0.1
• 上圖：

• 常用命令：

nginx -s stop                  #停止nginx
nginx -s reload                #重新載入nginx配置
nginx -s reopen                #重新啟動
nginx -s quit                  #退出nginx
 

Linux(CentOS) 下的 Nginx

下面是我們真正使用的Linux 下 搭建Nginx，演示時我使用的WM Ware建立的虛擬機器。使用putty進行遠端連線。注：如果使用伺服器操作的話，貼上可就麻煩了，所以還是用遠端連線吧，能直接copy paste命令

菜鳥教程的方法

直接上鍊接。Nginx安裝

官方文件上的方法

• cd 到 yum的資源目錄下

 cd  /etc/yum.repos.d/

• 建立一個檔案：nginx.repo，

vi nginx.repo
# 內容
[nginx]
name=nginx repo
baseurl=http://nginx.org/packages/mainline/centos/7/$basearch/
gpgcheck=0
enabled=1
# 文件上的url是http://nginx.org/packages/mainline/OS/OSRELEASE/$basearch/
# 替換成你的 os 與 版本
# 儲存退出
 

• 鍵入如下一系列命令

yum -y install nginx    # 安裝
systemctl enable nginx  #開機自啟
systemctl start nginx   #啟動nginx
firewall-cmd --permanent --zone=public --add-port=80/tcp #永久開啟80埠
firewall-cmd --reload   #重新載入防火牆

• 下面我們回到物理機，測試一下虛擬機器上的Nginx 服務是否安裝成功。在物理機開啟瀏覽器，鍵入：虛擬機器IP:80,上圖：

• 常用命令與Windows相同。
• 個人建議使用官方上的配置。

說明Angular 專案的打包，並部署到虛擬機器的Nginx

• 在本地找了一個angular專案目錄下 ng-build,會生一個dist資料夾
• 鍵入如下命令：nginx -t

nginx -t #檢視配置檔案路徑
#結果
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

#檢視上述路徑的檔案
user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    keepalive_timeout  65;

    #gzip  on;

    include /etc/nginx/conf.d/*.conf;
}

• 注意上面最後一句話包含conf.d資料夾下的所有.conf。我們再那個資料夾下找到了default.conf ,編輯default.conf

server {
    listen       80;
    server_name  localhost;
    location / {
        #root   /usr/share/nginx/html;
        root   /usr/share/nginx/html/dist/demo;
        #更改成我們上傳的目錄一定要寫到有index.html那一級
        index  index.html index.htm;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

• 重新載入Nginx配置

nginx -s reload

• 上對比圖

配置一個簡單的反向代理

前端需要呼叫後端的Rest API，我們需要將一部分請求配置反向代理。

• 直接上conf配置

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html/dist/demo;
        index  index.html index.htm;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
        # 匹配到/proxy/這個url的時候代理到220.181.112.244 百度這個伺服器
    location ^~ /proxy/ {
        proxy_set_header Host 220.181.112.244;
        proxy_set_header X-Real-IP  220.181.112.244;
        proxy_pass http://220.181.112.244/proxy/;
        proxy_http_version 1.1;
        proxy_set_header Connection "";
    }
}

• 在重新載入配置前，我們先嚐試一下，上圖：

注：本地專案，沒有配置路由，所有會沒有proxy這個東西，會報404錯誤，我們可以通過檢視當前404是哪個伺服器包的錯，來判斷是否發生反向代理

從圖中可以看出，此時沒有進行反向代理，在虛擬機器的伺服器上提示404

注：這裡說明一點，就是即便發生了法相貸，但是network中的顯示還是我的虛擬機器的ip，所以不能當做是否發生反向代理的標註

• 重新載入Nginx配置

nginx -s reload

• 重新整理剛才的頁面，上圖：可以發現，已經代理到百度的錯誤頁面上去了。

• 一個簡單的反向代理就配置好了。