
作為前端開(kāi)發(fā)者,服務(wù)器端的知識(shí)一直都是我們大部分人的弱項(xiàng)和硬傷。
不僅僅是對(duì)服務(wù)器端處理邏輯、數(shù)據(jù)庫(kù)的操作、以及系統(tǒng)高可用架構(gòu)的優(yōu)化上缺少經(jīng)驗(yàn),連對(duì)對(duì) Linux 的操作和對(duì) Nginx 的熟悉程度也不夠。
于是,我奔著成為全棧工程師的宏大目標(biāo),開(kāi)啟了后端之旅(第1篇)。
Nginx 的入門(mén)和簡(jiǎn)單應(yīng)用,是我第一個(gè)打算探索的 。
Nginx 是一個(gè)異步框架的Web服務(wù)器。它正變得越來(lái)越熱門(mén)和常用,因?yàn)樗鄬?duì)于 Apache 能更好的處理高并發(fā),性能更優(yōu),也更加方便進(jìn)行模塊化擴(kuò)展。
那 Nginx 能做什么呢?
- 反向代理
- 負(fù)載均衡
- HTTP服務(wù)器(包含動(dòng)靜分離)
- 正向代理
聽(tīng)起來(lái)非常的厲害!與其臨淵羨魚(yú)不如,退而結(jié)網(wǎng),趕緊開(kāi)始學(xué)習(xí)吧!
一、安裝 brew
brew 又叫 Homebrew,是Mac中的一款軟件包管理工具,通過(guò) brew 可以很方便的在Mac中安裝軟件或是卸載軟件。
一般Mac電腦會(huì)默認(rèn)內(nèi)置安裝 brew。
常用命令如下:
brew 搜索軟件:
brew search nginxbrew 安裝軟件
brew install nginxbrew 卸載軟件
brew uninstall nginxbrew 升級(jí)
sudo brew update查看安裝信息(經(jīng)常用到, 比如查看安裝目錄等)
sudo brew info nginx查看已經(jīng)安裝的軟件
brew list

這工具使起來(lái)非常爽,跟我們前端開(kāi)發(fā)中的 npm/yarn 功能很類(lèi)似。只不過(guò)這個(gè)工具在整個(gè) Mac 系統(tǒng)都可以用,而 npm 一般只能用在基于 node 開(kāi)發(fā)的工程項(xiàng)目中。
二、安裝 Nginx
所謂萬(wàn)事俱備,只欠東風(fēng)。安裝好了 brew,離安裝好 Nginx 只差一步之遙。
只需要一句 sudo brew install nginx 即可搞定。
(sudo 是什么?如果對(duì) Linux 還不太熟的前端小白,可以移步 我的知乎回答)
三、啟動(dòng) Nginx
安裝好了 Nginx 之后,只需要一句命令就能啟動(dòng) Nginx 服務(wù):
sudo brew services start nginx
此時(shí),在瀏覽器訪(fǎng)問(wèn) localhost:8080 就可看到 Nginx 的默認(rèn)頁(yè)面了。

如果想查看 Nginx 相關(guān)的具體進(jì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兩個(gè)路徑會(huì)經(jīng)常用到,因此很重要。最開(kāi)始提到的 Nginx 幾個(gè)作用中,反向代理、負(fù)載均衡、正向代理都需要更改配置文件。把 Nginx 當(dāng)成 HTTP服務(wù)器來(lái)用,既需要更改配置文件,大概率還會(huì)使用到服務(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端口。實(shí)現(xiàn)了在本地瀏覽器訪(fǎng)問(wèn)8080端口,Nginx 會(huì)代理到9000端口(node 服務(wù))。

如果想實(shí)現(xiàn)既能代理,又要訪(fǎng)問(wèn)到 Nginx 本身的服務(wù)端口,可以再寫(xiě)一個(gè) server 配置對(duì)象,配置如下:
server {
listen 3333;
server_name localhost;
client_max_body_size 1024M;
location / {
root html;
index index.html index.htm;
}
}
這樣再訪(fǎng)問(wèn) localhost:3333 就能訪(fǎng)問(wèn)到 Nginx 自身啟動(dòng)的服務(wù)了。
2. 負(fù)載均衡配置文件 demo
負(fù)載均衡的意思就是分?jǐn)偟蕉鄠€(gè)任務(wù)單元上,來(lái)共同完成同一個(gè)任務(wù)。
當(dāng)有2臺(tái)或以上服務(wù)器時(shí),根據(jù)規(guī)則隨機(jī)的將請(qǐng)求分發(fā)到指定的服務(wù)器上處理,負(fù)載均衡配置一般都需要同時(shí)配置反向代理,通過(guò)反向代理跳轉(zhuǎn)到負(fù)載均衡。
我這里用本地多個(gè)端口模擬代替多臺(tái)服務(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;
}
}
兩 個(gè) node 服務(wù),一個(gè)是8000 端口,一個(gè)是9000 端口。
此時(shí)訪(fǎng)問(wèn) localhost:4444 可以看到偶爾會(huì)代理到8000端口,偶爾會(huì)代理到9000端口。


由此說(shuō)明,Nginx 的負(fù)載起了作用。
它根據(jù)兩個(gè)服務(wù)的實(shí)際運(yùn)行情況,將網(wǎng)絡(luò)請(qǐng)求分配到了不同的業(yè)務(wù)邏輯服務(wù)器(這里只是不同端口,現(xiàn)實(shí)情況應(yīng)該是多個(gè)不同的真是服務(wù)器)上處理。
原來(lái),后端經(jīng)常說(shuō)的高大上的“負(fù)載均衡”其實(shí)也不過(guò)如此。當(dāng)然這只是一個(gè)非常簡(jiǎn)單的例子,不過(guò)是為了熟悉一下 Nginx 的配置。
其實(shí) upstream 配置中還可以設(shè)置 權(quán)重,來(lái)實(shí)現(xiàn) Nginx 把流量打到到各臺(tái)服務(wù)器的概率。
upstream test {
server localhost:8000 weight=9;
server localhost:9000 weight=1;
}
這樣就實(shí)現(xiàn)了,每10次請(qǐng)求到 Nginx,一般只會(huì)有1次會(huì)訪(fǎng)問(wèn)到9000端口,而有9次會(huì)訪(fǎng)問(wèn)到8000。
3. HTTP服務(wù)器(包含動(dòng)靜分離)配置文件 demo
文章開(kāi)頭也提到過(guò),Nginx 本身就是一個(gè) web 服務(wù)器。所以當(dāng)只有靜態(tài)資源的時(shí)候,就可以用 Nginx 來(lái)返回一個(gè)你自己的 index.html 文件,實(shí)現(xiàn)一個(gè)純靜態(tài)服務(wù)器。
在 Nginx 的服務(wù)器根目錄 /usr/local/var/www,新建一個(gè) 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 配置項(xiàng)改成:
location / {
root html;
index test.html index.htm;
}
(index.html 變成了我們新建的 test.html)
此時(shí)訪(fǎng)問(wèn) localhost:8080 可以看到:

說(shuō)明我們已經(jīng)可以來(lái)實(shí)現(xiàn)一個(gè)自定義的簡(jiǎn)單版靜態(tài)網(wǎng)站了,如果是需要將默認(rèn)頁(yè)面設(shè)成是非根目錄下的 index.html 文件,需要改動(dòng)少量配置文件(參考如下圖)。
location / {
root /root; #把默認(rèn)路徑更改為/root目錄下下
index index.html index.htm;
}
純靜態(tài)的 web 服務(wù)器比較好配置,但是動(dòng)靜分離性的就會(huì)復(fù)雜一些。
什么是動(dòng)靜分離?
動(dòng)靜分離是將網(wǎng)站里的所有請(qǐng)求區(qū)分為不變的靜態(tài)資源請(qǐng)求和動(dòng)態(tài)的數(shù)據(jù)請(qǐng)求。Nginx遇到靜請(qǐng)求會(huì)直接返回nginx根目錄下的靜態(tài)資源,遇到動(dòng)態(tài)請(qǐng)求會(huì)直接轉(zhuǎn)發(fā)給后臺(tái)真實(shí)的服務(wù)器(如Apache、Tomcat等),這就是網(wǎng)站動(dòng)靜分離處理的核心思路。
upstream test{
server localhost:8000;
server localhost:9000;
}
server {
listen 8080;
server_name localhost;
location / {
root e:wwwroot;
index index.html;
}
# 所有靜態(tài)請(qǐng)求都由nginx處理,存放目錄為html
location ~ .(gif|jpg|jpeg|png|bmp|swf|css|js)$ {
root e:wwwroot;
}
# 所有動(dòng)態(tài)請(qǐng)求都轉(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和請(qǐng)求。例如當(dāng)我們后綴為.gif的時(shí)候,Nginx默認(rèn)會(huì)從wwwroot獲取到當(dāng)前請(qǐng)求的動(dòng)態(tài)圖文件返回。
當(dāng)然,這里的靜態(tài)文件跟Nginx是同一臺(tái)服務(wù)器,我們也可以在另外一臺(tái)服務(wù)器,然后通過(guò)反向代理和負(fù)載均衡配置過(guò)去就好了。只要搞清楚了最基本的流程,很多配置就很簡(jiǎn)單了。另外localtion后面其實(shí)可以是一個(gè)正則表達(dá)式,配置非常靈活。
4. 正向代理配置文件 demo
正向代理,意思是一個(gè)位于客戶(hù)端和原始服務(wù)器(origin server)之間的服務(wù)器,為了從原始服務(wù)器取得內(nèi)容,客戶(hù)端向代理發(fā)送一個(gè)請(qǐng)求并指定目標(biāo)(原始服務(wù)器),然后代理向原始服務(wù)器轉(zhuǎn)交請(qǐng)求并將獲得的內(nèi)容返回給客戶(hù)端??蛻?hù)端才能使用正向代理。當(dāng)你需要把你的服務(wù)器作為代理服務(wù)器的時(shí)候,可以用Nginx來(lái)實(shí)現(xiàn)正向代理。
因?yàn)檎虼碛玫蒙僖恍赃@個(gè)我沒(méi)有親自踩坑。貼出網(wǎng)上配置實(shí)例,供各位看官參考:
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+端口號(hào)進(jìn)行代理了。

題外話(huà)
后端開(kāi)發(fā)其實(shí)也并沒(méi)有想象中的難,只是跟我們前端的開(kāi)發(fā)思路上會(huì)有一些較大的差異。當(dāng)我們?cè)诟嗟奶幚碇?yè)面上離用戶(hù)很近的 bug 的時(shí)候,后端正在做很多用戶(hù)可能都感知不到的事情。
作為一個(gè)軟件開(kāi)發(fā)工程師(雖然目前仍是一個(gè)前端開(kāi)發(fā)),后端開(kāi)發(fā)這個(gè)環(huán)節(jié)非常重要,我們每個(gè)開(kāi)發(fā)者都沒(méi)有理由不去掌握它。
友情提示
Nginx 在 Mac 系統(tǒng)上的安裝和常用命令可能跟 Windows 上不大一樣。幾年都沒(méi)碰 Windows 了,為了避免踩出不必要的坑,建議使用 Windows 的童鞋移步 windows下nginx的安裝及使用方法入門(mén) - 騰訊云社區(qū) :)
Nginx 進(jìn)階配置,可參考 nginx快速入門(mén)之配置篇 - 知乎