學(xué)好Nginx,走遍天下都不怕

說到Nginx,大家可能會(huì)閃過幾個(gè)畫面

1、這不是后端運(yùn)維要用到技術(shù)嗎,前端為啥要學(xué)這個(gè)

2、我學(xué)Nginx也沒啥用啊

3、學(xué)了Nginx我能漲薪嗎

4、。。。

一、簡(jiǎn)介

我個(gè)人拙見,前端本身就是一個(gè)很雜,且邊界比較模糊的職業(yè)。若是在大公司,當(dāng)然前端可能只需要專注頁(yè)面上的業(yè)務(wù)開發(fā),部署項(xiàng)目這塊會(huì)交給一些專業(yè)的運(yùn)維同事,輪不到你來操心這些事情。但很遺憾,大部分程序員不在大公司工作,多數(shù)就職于中小型的小廠。那么在小廠的話,很大概率上公司是沒有運(yùn)維人員的,前端項(xiàng)目的部署和運(yùn)維很可能就會(huì)交給前端同學(xué)來管理。再退一步講,平時(shí)我們接一些私活或者自己玩一些項(xiàng)目,都是需要部署到線上服務(wù)器。那么就可以選擇我們好用的Nginx,借用官方的解釋——“Nginx (engine x) 是一個(gè)高性能的HTTP和反向代理web服務(wù)器,同時(shí)也提供了IMAP/POP3/SMTP服務(wù)“

二、需要的環(huán)境

學(xué)習(xí)Nginx需要什么環(huán)境呢?

1、買一個(gè)云服務(wù)器(騰訊云 or 阿里云)價(jià)格有點(diǎn)貴,就我目前而言,買的是騰訊的99元包年,最近好像有活動(dòng)(非廣告)

2、自己找個(gè)電腦搭建一下服務(wù)器的環(huán)境

3、搞個(gè)虛擬機(jī),但是配置及其麻煩,新手不建議嘗試

我買的服務(wù)器操作系統(tǒng)是CentOS 7.6 64位

通過服務(wù)器提供的yum去安裝一些工具庫(kù)

遠(yuǎn)程登錄服務(wù)器 ssh root@IP(這里的IP就是你購(gòu)買服務(wù)器的IP地址),騰訊服務(wù)器里可以讓你選擇密碼登錄還是密鑰登錄,我選擇添加本地密鑰登錄,這樣比較方便,不用每次都輸入密碼。進(jìn)入服務(wù)器之后就是這樣的畫面

服務(wù)器遠(yuǎn)程界面

然后輸入下面這段代碼,安裝相應(yīng)的工具包和庫(kù)

yum -y install gcc gcc-c++ autoconf pcre-devel make automake

yum -y install wget httpd-tools vim

基本上沒什么大問題就會(huì)顯示“Complete!”

恭喜你,服務(wù)器環(huán)境基本安裝完畢~

三、搭建Nginx配置

個(gè)人建議,可以先去Nginx官方文檔先看看,了解一下Nginx再開始下面的閱讀,我盡量不說理論知識(shí),講一些實(shí)操,因?yàn)槲矣X得理論知識(shí)我說的肯定不如官網(wǎng)來得細(xì)致。

首先看看服務(wù)器內(nèi)yum內(nèi)的Nginx源的版本

yum list | grep nginx

這個(gè)版本不是很高,我們可以使用官方提供的源。

在終端輸入如下

vim /etc/yum.repos.d/nginx.repo

然后填入下列代碼,注意,我的centos是7.x版本,所以我寫的是7,同學(xué)們可以按照自己的版本來

保存退出

然后安裝 nginx

yum install nginx

nginx -v

運(yùn)行上面指令之后,能得到最新的nginx版本如下

只能用舒服二字形容,一切順利安裝好nginx,玩歸玩,鬧歸鬧,一定要把nginx掌握好~~~

四、Nginx的配置文件

通過‘rpm -ql nginx’ 指令查看nginx都安裝到了哪些目錄

幾個(gè)關(guān)鍵的位置要注意一下:‘/etc/nginx’、'/etc/nginx/conf.d' 、‘/etc/nginx/nginx.conf’

解釋一下‘/etc/nginx/nginx.conf’,因?yàn)檫@個(gè)是nginx的主配置,比較重要

輸入命令行

cd /etc/nginx

vim nginx.conf

#運(yùn)行用戶,默認(rèn)即是nginx,可以不進(jìn)行設(shè)置

user? nginx;

#Nginx進(jìn)程,一般設(shè)置為和CPU核數(shù)一樣

worker_processes? 1;

#錯(cuò)誤日志存放目錄

error_log? /var/log/nginx/error.log warn;

#進(jìn)程pid存放位置

pid? ? ? ? /var/run/nginx.pid;

events {

worker_connections? 1024; # 單個(gè)后臺(tái)進(jìn)程的最大并發(fā)數(shù)

}

http {

include? ? ? /etc/nginx/mime.types;? #文件擴(kuò)展名與類型映射表

default_type? application/octet-stream;? #默認(rèn)文件類型

#設(shè)置日志模式

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;? #nginx訪問日志存放位置

sendfile? ? ? ? on;? #開啟高效傳輸模式

#tcp_nopush? ? on;? ? #減少網(wǎng)絡(luò)報(bào)文段的數(shù)量

keepalive_timeout? 65;? #保持連接的時(shí)間,也叫超時(shí)時(shí)間

#gzip? on;? #開啟gzip壓縮

include /etc/nginx/conf.d/*.conf; #包含的子配置項(xiàng)位置和文件

再解釋一下主文件中的子文件,就是上面這個(gè)include下的.conf文件

進(jìn)入 '/etc/nginx/conf.d/' 這個(gè)文件夾,再通過vim或者cat打開

server {

listen? ? ? 80;? #配置監(jiān)聽端口

server_name? localhost;? //配置域名

#charset koi8-r;

#access_log? /var/log/nginx/host.access.log? main;

location / {

root? /usr/share/nginx/html;? ? #服務(wù)默認(rèn)啟動(dòng)目錄

index? index.html index.htm;? ? #默認(rèn)訪問文件

}

#error_page? 404? ? ? ? ? ? ? /404.html;? # 配置404頁(yè)面

# redirect server error pages to the static page /50x.html

#

error_page? 500 502 503 504? /50x.html;? #錯(cuò)誤狀態(tài)碼的顯示頁(yè)面,配置后需要重啟

location = /50x.html {

root? /usr/share/nginx/html;

}

# proxy the PHP scripts to Apache listening on 127.0.0.1:80

#

#location ~ \.php$ {

#? ? proxy_pass? http://127.0.0.1;

#}

# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000

#

#location ~ \.php$ {

#? ? root? ? ? ? ? html;

#? ? fastcgi_pass? 127.0.0.1:9000;

#? ? fastcgi_index? index.php;

#? ? fastcgi_param? SCRIPT_FILENAME? /scripts$fastcgi_script_name;

#? ? include? ? ? ? fastcgi_params;

#}

# deny access to .htaccess files, if Apache's document root

# concurs with nginx's one

#

#location ~ /\.ht {

#? ? deny? all;

#}

}

這里的root表示,項(xiàng)目文件是放在'/usr/share/nginx/html'下面,那么我們就去看看這里有啥呢

就這倆玩意兒,也就是一個(gè)默認(rèn)的index文件和報(bào)錯(cuò)的時(shí)候會(huì)展示的50x.html頁(yè)面

通過安全組的配置,允許瀏覽器訪問服務(wù)器地址的80端口,下面就是我的騰訊云服務(wù)器的默認(rèn)首頁(yè)

安全組的配置會(huì)有些復(fù)雜,需要一些網(wǎng)絡(luò)協(xié)議的知識(shí),不過騰訊云提供了視頻教程,大家可以看看地址在這里

這里還有一個(gè)小問題,就是當(dāng)你們配置好default.conf的時(shí)候,需要重啟nginx才能運(yùn)行新改的配置,這里在服務(wù)器里運(yùn)行指令 'nginx -s reload' 會(huì)報(bào)錯(cuò)‘nginx: [error] open() "/var/run/nginx.pid" failed (2: No such file or directory)’, 這個(gè)時(shí)候可以如下

// 先輸入

nginx

nginx -s reload

或者是如果你使用iTerm的話,可以配置.bashrc文件,添加一個(gè)alias的配置來簡(jiǎn)化運(yùn)行nginx指令;或者是通過指令 ‘systemctl start nginx.service’ 啟動(dòng)nginx服務(wù),通過指令 ‘ps aux | grep nginx’ 查看nginx是否是否啟動(dòng);還有很多nginx的指令,大家自行去官網(wǎng)查看,這里不多bb了。

五、親手配置404錯(cuò)誤頁(yè)面

打開default.conf文件進(jìn)行編輯

添加一個(gè)errorpage配置,然后再去配置 /usr/share/nginx/html里面的404_error.html

直接輸入指令'vim 404_error.html'就會(huì)直接創(chuàng)建html文件

保存退出之后,記得重啟一下nginx,然后去瀏覽器隨便輸入一個(gè)未知的路徑,就能看到404頁(yè)面如下

還能將位置頁(yè)面指向另一個(gè)網(wǎng)址,default.conf如下設(shè)置

刷新剛才的瀏覽器頁(yè)面,就會(huì)跳轉(zhuǎn)到百度的首頁(yè)去了

六、權(quán)限配置

簡(jiǎn)單的說,就是我想讓誰(shuí)能訪問我的服務(wù)器,誰(shuí)禁止訪問我的瀏覽器

關(guān)鍵詞是 ‘a(chǎn)llow’和'deny'

顧名思義,allow就是允許誰(shuí)訪問,deny就是禁止誰(shuí)訪問

首先看看自己的ip地址,通過這個(gè)網(wǎng)址來獲取

我的ip地址是'112.10.54.90',那么我來禁止我的ip訪問服務(wù)器

location / {

root? /usr/share/nginx/html;

index? index.html index.htm;

deny 112.10.54.90;

}

重啟nginx之后,訪問ip地址首頁(yè),結(jié)果如下

403禁止訪問

還可以更精準(zhǔn)的定位某個(gè)路徑下不可訪問,如下設(shè)置

location =/admin {

deny all

}

不再演示了,自行操作,光看可不行,請(qǐng)自己多多練習(xí),看別人bb沒用的

七、虛擬主機(jī)的設(shè)置

三種形式

1、基于端口號(hào)配置

2、基于域名配置

3、基于IP配置

工作中一般是不會(huì)基于IP配置的,因?yàn)槟膩砟敲炊噱X買那么多IP呢,多數(shù)都是通過域名來配置,設(shè)置一下二級(jí)域名,做一個(gè)反向代理啥的。通過端口號(hào)也不多,因?yàn)槲铱偛荒茉谟蛎竺婕觽€(gè)端口號(hào)把,十分難看且不雅。

著重講一講通過域名配置的情況,大家可以去買個(gè)域名玩一玩,幾塊幾十塊就有一個(gè)屬于自己的船新域名,多的不說,去萬(wàn)網(wǎng)買一個(gè)吧。買完之后,通過解析添加一條記錄如下

域名解析記錄

同理再添加一條記錄,主機(jī)記錄命名為nginx2

那么現(xiàn)在我就有兩個(gè)二級(jí)域名

1、nginx.chennick.wang

2、nginx2.chennick.wang

那么用第一個(gè)域名指向默認(rèn)的nginx首頁(yè),用第二個(gè)新建一個(gè)虛擬主機(jī)

第一個(gè)域名的配置

第二個(gè)域名的配置

回去設(shè)置一下第二個(gè)域名的index2.html

index2.html

nginx.chennick.wang

nginx2.chennick.wang

玩到這兒,基本上你也就差不多入門了nginx的配置了

八、Nginx反向代理

反向代理對(duì)前端而言,是非常有用的,因?yàn)榍岸说目缬騿栴}跨域通過反向代理來解決。廢話不多說,進(jìn)入正題。

如何配置反向代理呢,配置如下

server{

listen 80;

server_name nginx2.chennick.wang;

location / {

proxy_pass https://www.baidu.com/;

}

}

上述配置,在瀏覽器訪問nginx2.chennick.wang這個(gè)域名的時(shí)候,展示的頁(yè)面是https://www.baidu.com/的頁(yè)面,如下圖所示

反向代理到百度

還有一些對(duì)PC端和移動(dòng)端的判斷,類似瀏覽器的userAgent去判斷,然后根據(jù)PC和Mobile返回不同的站點(diǎn),這里就不展開多說了,東西都差不多,看文檔就行。

最后再多說一句,小伙伴們一定要自己去親手寫一寫,光蹭一蹭不進(jìn)去,是不行滴

文章借鑒了胖哥的Nginx系列教程,同學(xué)們想看視頻的話可以移步到胖哥那兒看免費(fèi)視頻教程

一個(gè)前端必會(huì)的 Nginx免費(fèi)教程 (共11集)?jspang.com

PS:(補(bǔ)充于2019年9月4日快下班的時(shí)候)

在云端服務(wù)器配置node環(huán)境:

這里推薦大家使用nvm去安裝node,版本隨時(shí)可以升級(jí)降級(jí),非常友好,不過不建議在服務(wù)器隨便升降版本,很危險(xiǎn)。。。

具體方法:

1、通過 wget 下載nvm的sh腳本

wget -qO- https://raw.githubusercontent.com/creationix/nvm/v0.33.6/install.sh | bash

2、先更新一下bash_profile文件

source ~/.bash_profile

3、安裝完成以后使用 nvm - v 來測(cè)試安裝是否成功

nvm -v

4、安裝成功以后會(huì)顯示版本號(hào)和nvm 相關(guān)命令等提示

nvm install v12.6.0

nvm use v12.6.0

nvm alias default v12.6.0

然后就能在全局使用npm

另外還有一些關(guān)于c++ Linux后臺(tái)服務(wù)器開發(fā)的一些知識(shí)點(diǎn)分享:Linux,Nginx,MySQL,Redis,P2P,K8S,Docker,TCP/IP,協(xié)程,DPDK,webrtc,音視頻等等視頻。

喜歡的朋友可以加1470646927獲取學(xué)習(xí)視頻

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容