作為前端開發(fā)者诗舰，服務(wù)器端的知識一直都是我們大部分人的弱項和硬傷警儒。
不僅僅是對服務(wù)器端處理邏輯、數(shù)據(jù)庫的操作眶根、以及系統(tǒng)高可用架構(gòu)的優(yōu)化上缺少經(jīng)驗蜀铲，連對對 Linux 的操作和對 Nginx 的熟悉程度也不夠。
于是属百，我奔著成為全棧工程師的宏大目標(biāo)记劝，開啟了后端之旅（第1篇）。
Nginx 的入門和簡單應(yīng)用族扰，是我第一個打算探索的 隆夯。
Nginx 是一個異步框架的Web服務(wù)器。它正變得越來越熱門和常用别伏，因為它相對于 Apache 能更好的處理高并發(fā)蹄衷，性能更優(yōu)，也更加方便進行模塊化擴展厘肮。
那 Nginx 能做什么呢愧口？
- 反向代理
- 負(fù)載均衡
- HTTP服務(wù)器（包含動靜分離）
- 正向代理
聽起來非常的厲害！與其臨淵羨魚不如类茂，退而結(jié)網(wǎng)耍属，趕緊開始學(xué)習(xí)吧托嚣！
一、安裝 brew
brew 又叫 Homebrew厚骗，是Mac中的一款軟件包管理工具示启，通過 brew 可以很方便的在Mac中安裝軟件或是卸載軟件。
一般Mac電腦會默認(rèn)內(nèi)置安裝 brew领舰。
常用命令如下:
brew 搜索軟件:
brew search nginxbrew 安裝軟件
brew install nginxbrew 卸載軟件
brew uninstall nginxbrew 升級
sudo brew update查看安裝信息(經(jīng)常用到, 比如查看安裝目錄等)
sudo brew info nginx查看已經(jīng)安裝的軟件
brew list
這工具使起來非常爽夫嗓，跟我們前端開發(fā)中的 npm/yarn 功能很類似。只不過這個工具在整個 Mac 系統(tǒng)都可以用冲秽，而 npm 一般只能用在基于 node 開發(fā)的工程項目中舍咖。
二、安裝 Nginx
所謂萬事俱備锉桑，只欠東風(fēng)排霉。安裝好了 brew，離安裝好 Nginx 只差一步之遙民轴。
只需要一句 sudo brew install nginx 即可搞定攻柠。
（sudo 是什么？如果對 Linux 還不太熟的前端小白后裸，可以移步 我的知乎回答）
三辙诞、啟動 Nginx
安裝好了 Nginx 之后，只需要一句命令就能啟動 Nginx 服務(wù)：
sudo brew services start nginx
此時轻抱，在瀏覽器訪問 localhost:8080 就可看到 Nginx 的默認(rèn)頁面了飞涂。
如果想查看 Nginx 相關(guān)的具體進程，可以使用
ps -ef | grep nginx
使用效果如下：
其他 Nginx 日常命令：
關(guān)閉nginx服務(wù)
sudo brew services stop nginx重新加載nginx
nginx -s reload停止nginx
nginx -s stop查看nginx版本
nginx -v
四祈搜、更改 Nginx 配置
Nginx 安裝完以后较店，可以在終端輸出的信息里看到一些配置路徑：
-
/usr/local/etc/nginx/nginx.conf（配置文件路徑） -
/usr/local/var/www（服務(wù)器默認(rèn)路徑） -
/usr/local/Cellar/nginx/1.15.0（貌似是安裝路徑）
日常應(yīng)用中，1和2兩個路徑會經(jīng)常用到容燕，因此很重要梁呈。最開始提到的 Nginx 幾個作用中，反向代理蘸秘、負(fù)載均衡官卡、正向代理都需要更改配置文件。把 Nginx 當(dāng)成 HTTP服務(wù)器來用醋虏，既需要更改配置文件寻咒，大概率還會使用到服務(wù)器的根目錄路徑。
1. 反向代理配置文件 demo
server {
listen 8080;
server_name localhost;
client_max_body_size 1024M;
location / {
proxy_pass http://localhost:9000;
proxy_set_header Host $host:$server_port;
}
}
我本地 node 起了9000端口颈嚼，Nginx 起的服務(wù)是8080端口毛秘。實現(xiàn)了在本地瀏覽器訪問8080端口，Nginx 會代理到9000端口（node 服務(wù)）。
如果想實現(xiàn)既能代理叫挟，又要訪問到 Nginx 本身的服務(wù)端口艰匙，可以再寫一個 server 配置對象，配置如下：
server {
listen 3333;
server_name localhost;
client_max_body_size 1024M;
location / {
root html;
index index.html index.htm;
}
}
這樣再訪問 localhost:3333 就能訪問到 Nginx 自身啟動的服務(wù)了抹恳。
2. 負(fù)載均衡配置文件 demo
負(fù)載均衡的意思就是分?jǐn)偟蕉鄠€任務(wù)單元上员凝，來共同完成同一個任務(wù)。
當(dāng)有2臺或以上服務(wù)器時奋献，根據(jù)規(guī)則隨機的將請求分發(fā)到指定的服務(wù)器上處理健霹，負(fù)載均衡配置一般都需要同時配置反向代理，通過反向代理跳轉(zhuǎn)到負(fù)載均衡秽荞。
我這里用本地多個端口模擬代替多臺服務(wù)器骤公。
upstream test {
server localhost:8000;
server localhost:9000;
}
server {
listen 4444;
server_name localhost;
client_max_body_size 1024M;
location / {
proxy_pass http://test;
proxy_set_header Host $host:$server_port;
}
}
兩 個 node 服務(wù)抚官，一個是8000 端口扬跋，一個是9000 端口。
此時訪問 localhost:4444 可以看到偶爾會代理到8000端口凌节，偶爾會代理到9000端口钦听。
由此說明，Nginx 的負(fù)載起了作用倍奢。
它根據(jù)兩個服務(wù)的實際運行情況朴上，將網(wǎng)絡(luò)請求分配到了不同的業(yè)務(wù)邏輯服務(wù)器（這里只是不同端口，現(xiàn)實情況應(yīng)該是多個不同的真是服務(wù)器）上處理卒煞。
原來痪宰，后端經(jīng)常說的高大上的“負(fù)載均衡”其實也不過如此。當(dāng)然這只是一個非常簡單的例子畔裕，不過是為了熟悉一下 Nginx 的配置衣撬。
其實 upstream 配置中還可以設(shè)置 權(quán)重，來實現(xiàn) Nginx 把流量打到到各臺服務(wù)器的概率扮饶。
upstream test {
server localhost:8000 weight=9;
server localhost:9000 weight=1;
}
這樣就實現(xiàn)了具练，每10次請求到 Nginx，一般只會有1次會訪問到9000端口甜无，而有9次會訪問到8000扛点。
3. HTTP服務(wù)器（包含動靜分離）配置文件 demo
文章開頭也提到過，Nginx 本身就是一個 web 服務(wù)器岂丘。所以當(dāng)只有靜態(tài)資源的時候陵究，就可以用 Nginx 來返回一個你自己的 index.html 文件，實現(xiàn)一個純靜態(tài)服務(wù)器奥帘。
在 Nginx 的服務(wù)器根目錄 /usr/local/var/www畔乙，新建一個 test.html，內(nèi)容如下：
<!DOCTYPE html>
<html>
<head>
<title>test nginx index page</title>
<style>
body {
width: 35em;
margin: 0 auto;
font-family: Tahoma, Verdana, Arial, sans-serif;
}
</style>
</head>
<body>
<h1>test nginx index page!</h1>
</body>
</html>
將 server 配置項改成：
location / {
root html;
index test.html index.htm;
}
（index.html 變成了我們新建的 test.html）
此時訪問 localhost:8080 可以看到：
說明我們已經(jīng)可以來實現(xiàn)一個自定義的簡單版靜態(tài)網(wǎng)站了翩概，如果是需要將默認(rèn)頁面設(shè)成是非根目錄下的 index.html 文件牲距，需要改動少量配置文件（參考如下圖）返咱。
location / {
root /root; #把默認(rèn)路徑更改為/root目錄下下
index index.html index.htm;
}
純靜態(tài)的 web 服務(wù)器比較好配置，但是動靜分離性的就會復(fù)雜一些牍鞠。
什么是動靜分離咖摹？
動靜分離是將網(wǎng)站里的所有請求區(qū)分為不變的靜態(tài)資源請求和動態(tài)的數(shù)據(jù)請求。Nginx遇到靜請求會直接返回nginx根目錄下的靜態(tài)資源难述，遇到動態(tài)請求會直接轉(zhuǎn)發(fā)給后臺真實的服務(wù)器（如Apache萤晴、Tomcat等），這就是網(wǎng)站動靜分離處理的核心思路胁后。
upstream test{
server localhost:8000;
server localhost:9000;
}
server {
listen 8080;
server_name localhost;
location / {
root e:wwwroot;
index index.html;
}
# 所有靜態(tài)請求都由nginx處理店读，存放目錄為html
location ~ .(gif|jpg|jpeg|png|bmp|swf|css|js)$ {
root e:wwwroot;
}
# 所有動態(tài)請求都轉(zhuǎn)發(fā)給tomcat處理
location ~ .(jsp|do)$ {
proxy_pass http://test;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root e:wwwroot;
}
}
這樣我們就可以把 html、圖片攀芯、css以及js放到wwwroot目錄下屯断，而tomcat只負(fù)責(zé)處理jsp和請求。例如當(dāng)我們后綴為.gif的時候侣诺，Nginx默認(rèn)會從wwwroot獲取到當(dāng)前請求的動態(tài)圖文件返回殖演。
當(dāng)然，這里的靜態(tài)文件跟Nginx是同一臺服務(wù)器年鸳，我們也可以在另外一臺服務(wù)器趴久，然后通過反向代理和負(fù)載均衡配置過去就好了。只要搞清楚了最基本的流程搔确，很多配置就很簡單了彼棍。另外localtion后面其實可以是一個正則表達式，配置非常靈活膳算。
4. 正向代理配置文件 demo
正向代理座硕，意思是一個位于客戶端和原始服務(wù)器(origin server)之間的服務(wù)器，為了從原始服務(wù)器取得內(nèi)容畦幢，客戶端向代理發(fā)送一個請求并指定目標(biāo)(原始服務(wù)器)坎吻，然后代理向原始服務(wù)器轉(zhuǎn)交請求并將獲得的內(nèi)容返回給客戶端∮畲校客戶端才能使用正向代理瘦真。當(dāng)你需要把你的服務(wù)器作為代理服務(wù)器的時候，可以用Nginx來實現(xiàn)正向代理。
因為正向代理用得少一些，所以這個我沒有親自踩坑斤斧。貼出網(wǎng)上配置實例嚣鄙，供各位看官參考：
resolver 114.114.114.114 8.8.8.8;
server {
resolver_timeout 5s;
listen 81;
access_log e:wwwrootproxy.access.log;
error_log e:wwwrootproxy.error.log;
location / {
proxy_pass http://$host$request_uri;
}
}
發(fā)布
resolver 是配置正向代理的DNS服務(wù)器姑宽，listen 是正向代理的端口。配置好了就可以在ie上面或者其他代理插件上面使用服務(wù)器ip+端口號進行代理了滔韵。
題外話
后端開發(fā)其實也并沒有想象中的難肆捕，只是跟我們前端的開發(fā)思路上會有一些較大的差異际看。當(dāng)我們在更多的處理著頁面上離用戶很近的 bug 的時候咸产，后端正在做很多用戶可能都感知不到的事情。
作為一個軟件開發(fā)工程師（雖然目前仍是一個前端開發(fā)）仲闽，后端開發(fā)這個環(huán)節(jié)非常重要脑溢，我們每個開發(fā)者都沒有理由不去掌握它。
友情提示
Nginx 在 Mac 系統(tǒng)上的安裝和常用命令可能跟 Windows 上不大一樣赖欣。幾年都沒碰 Windows 了屑彻，為了避免踩出不必要的坑，建議使用 Windows 的童鞋移步 windows下nginx的安裝及使用方法入門 - 騰訊云社區(qū) ：）
Nginx 進階配置顶吮，可參考 nginx快速入門之配置篇 - 知乎
