nginx學習筆記

nginx 安裝

直接用brew安裝，沒有brew的自行安裝

brew install nginx

nginx 基本命令

能夠經過

nginx -h

查看

sudo nginx -t

查看nginx配置文件有沒有語法錯誤，切記必定要用管理員權限運行，否則會出現錯誤

sudo nginx

這個就能夠開啓你的nginx

sudo nginx -s reload

能夠重啓你的nginx
你還能夠把reload替換成stop, quit, reopen, reload

sudo nginx -c filename

能夠設置nginx的配置文件的目錄，就是==nginx.conf==的位置

nginx 簡單配置

server{
    # 監聽的端口
    listen 80;
    # 域名,當兩個項目共用一個端口的時候就能夠經過不一樣的server_name來訪問到不一樣的服務器資源
    server_name test.cn;
    # 資源的根目錄,若是資源在用戶的文件夾裏面的話可能會沒有訪問資源的權限,須要給文件設置777權限
    # 你能夠經過pwd目錄查看當前的目錄
    root /html/demo;
    # 若是網址上沒有對應的資源地址打開的頁面
    index index.js index.html index.htm;
}

這是一個簡單的nginx配置，你須要把配置寫在你對應的==nginx.conf==裏面，你也能夠在nginx文件夾下新建一個文件夾servers而後在nginx.conf中引入這個文件夾下的文件,至於文件名你能夠用test.conf

include servers/*;

你只須要放一個html文件放在 ==/html/demo== 下就能夠經過==127.0.0.1==訪問了，若是你想經過 ==test.cn== 訪問的話你須要設置一個hosts

127.0.0.1 test.cn

若是發現出現403的錯誤的話可能有兩種狀況

• 可能在你的root配置的地址裏面找不到對應的index
• 還有一種可能就是沒有對應的權限了。

nginx 坑之403錯誤

你能夠查看一下你要訪問的文件夾的對應權限==ll==命令就能夠查看當前目錄下的全部的權限了，關於權限的修改和設置你能夠查看這個文章

mac 查看、修改文件權限的命令

而後以前我是在桌面上建的文件夾，而後就算修改了權限後也不能夠訪問，是由於他的上一級文件夾沒有權限進不來，若是你在最外面的 ==/== 目錄下創建文件夾而後nginx就能夠訪問到，若是你想訪問你這個用戶下面的文件，你能夠用node在你目錄下開個服務而後用nginx反向代理過去。

nginx 反向代理

nginx的簡單的反向代理就很簡單

並且還不會出現資源訪問的問題

首先你須要開一個node服務在8888端口

能夠不須要以前寫的root

而後在server裏面加上一段

而後你就能夠直接經過==test.cn==訪問到你的node服務了

記得重啓一下nginx

server {
    # ...前面的代碼
    location / {
        proxy_pass http://127.0.0.1:8888;
    }
}

而後我理解反向代理的做用是，若是你的服務器上有兩個項目都須要跑在80端口上，而後你就能夠經過nginx配置不一樣的==server_name==來訪問不一樣的服務，而後還能夠解決負載均衡等等的問題

關於具體的配置你能夠看看Nginx服務器的反向代理proxy_pass配置方法講解

nginx 解決跨域

nginx 解決跨域其實就是nginx反向代理的一個實現，他的實現原理是，你的後端跑在==localhost:81==端口，而後你的前端是跑在==localhost:82==端口，當你前端調用後端接口的時候因爲端口不一樣瀏覽器會報跨域的錯誤，而後你須要把兩個項目跑在同一個端口上才能夠，這樣你就會有疑問，一樣的域名，一個端口怎麼能跑兩個項目，咱們實現的方法是監聽一下83端口而後若是你的請求的url是由 ==/api== 開頭的就把它發送到81上去，不然就發送到82端口去。

具體的配置就是

server{
    # 監聽的端口
    listen 83;
    server_name localhost;
    location /api {
        rewrite ^/api$ / break;
        proxy_pass http://localhost:81;
    }
    location / {
        proxy_pass http://localhost:82;
    }
}

而後你的ajax能夠這麼寫

$.get({
        url: 'http://localhost:83/api',
        success: (data) => {
            console.log(data);
        } 
    })

nginx的配置要說明的是location後面的 / 和 /api 的意思是攔截url爲這兩個開頭的請求，而後 rewrite 是Nginx的URL重寫

rewrite ^/api$ / break;

• ==rewrite==是關鍵字
• 第二項是一個正則，我這裏是匹配 ==/api== 這個字符串
• 而後第三項是第二項匹配到的正則須要替換成的字符串，我這裏的意思是吧 ==/api== 替換成 ==/==
• 而後第四項是一個flag標記

• flag標記說明：

  last #本條規則匹配完成後，繼續向下匹配新的location URI規則

  break #本條規則匹配完成即終止，再也不匹配後面的任何規則

  redirect #返回302臨時重定向，瀏覽器地址會顯示跳轉後的URL地址

  permanent #返回301永久重定向，瀏覽器地址欄會顯示跳轉後的URL地址

這樣我就能夠經過==http://localhost:83/index.html==訪問到個人前端界面而後跨域請求到對應的接口了

參考資料

nginx反向代理-解決前端跨域問題
nginx配置location總結及rewrite規則寫法

後來作項目的時候發現

rewrite ^/api$ / break;

只會吧/api替換成/,/api/data仍是請求的/api/data的接口

而後改爲了

rewrite ^/api/(.*)$ /$1 break;

若是/api/後面還有東西，就替換成/加上以前api後面的東西

個人博客