說到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í)視頻