前端不能不會的 Nginx 入門（圖文並茂的服務器環境教程）

前言

說到 Nginx，你們可能會閃過幾個畫面php

這不是後端運維要用到技術嗎，前端爲啥要學這個
我學 Nginx 也沒啥用啊
學了 Nginx 我能漲薪嗎
。。。

1、簡介

我我的拙見，前端自己就是一個很雜，且邊界比較模糊的職業。如果在大公司，固然前端可能只須要專一頁面上的業務開發，部署項目這塊會交給一些專業的運維同事，輪不到你來操心這些事情。但很遺憾，大部分程序員不在大公司工做，多數就任於中小型的小廠。那麼在小廠的話，很大機率上公司是沒有運維人員的，前端項目的部署和運維極可能就會交給前端同窗來管理。再退一步講，平時咱們接一些私活或者本身玩一些項目，都是須要部署到線上服務器。那麼就能夠選擇咱們好用的 Nginx，借用官方的解釋——「Nginx (engine x) 是一個高性能的HTTP和反向代理web服務器，同時也提供了 IMAP/POP3/SMTP 服務「html

2、須要的環境

學習Nginx須要什麼環境呢？前端

一、買一個雲服務器（騰訊雲 or 阿里雲）價格有點貴，就我目前而言，買的是騰訊的99元包年，最近好像有活動（非廣告）node

二、本身找個電腦搭建一下服務器的環境nginx

三、搞個虛擬機，可是配置及其麻煩，新手不建議嘗試c++

我買的服務器操做系統是 CentOS 7.6 64 位git

經過服務器提供的yum去安裝一些工具庫程序員

遠程登陸服務器 ssh root@IP（這裏的IP就是你購買服務器的IP地址），騰訊服務器裏可讓你選擇密碼登陸仍是密鑰登陸，我選擇添加本地密鑰登陸，這樣比較方便，不用每次都輸入密碼。進入服務器以後就是這樣的畫面github

而後輸入下面這段代碼，安裝相應的工具包和庫web

yum -y install gcc gcc-c++ autoconf pcre-devel make automake
yum -y install wget httpd-tools vim
複製代碼

基本上沒什麼大問題就會顯示「Complete!」

恭喜你，服務器環境基本安裝完畢～

3、搭建Nginx配置

我的建議，能夠先去Nginx官方文檔先看看，瞭解一下Nginx再開始下面的閱讀，我儘可能不說理論知識，講一些實操，由於我以爲理論知識我說的確定不如官網來得細緻。

首先看看服務器內yum內的Nginx源的版本

yum list | grep nginx
複製代碼

這個版本不是很高，咱們可使用官方提供的源。

在終端輸入以下

vim /etc/yum.repos.d/nginx.repo
複製代碼

後填入下列代碼，注意，個人centos是7.x版本，因此我寫的是7，同窗們能夠按照本身的版原本

保存退出，而後安裝 nginx

yum install nginx
nginx -v
複製代碼

運行上面指令以後，能獲得最新的 Nginx 版本以下

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

4、Nginx的配置文件

經過rpm -ql nginx 指令查看 Nginx 都安裝到了哪些目錄

幾個關鍵的位置要注意一下：/etc/nginx、/etc/nginx/conf.d 、/etc/nginx/nginx.conf

解釋一下 /etc/nginx/nginx.conf，由於這個是 Nginx 的主配置，比較重要

輸入命令行

cd /etc/nginx
vim nginx.conf
複製代碼

#運行用戶，默認便是nginx，能夠不進行設置
user  nginx;
#Nginx進程，通常設置爲和CPU核數同樣
worker_processes  1;   
#錯誤日誌存放目錄
error_log  /var/log/nginx/error.log warn;
#進程pid存放位置
pid        /var/run/nginx.pid;


events {
    worker_connections  1024; # 單個後臺進程的最大併發數
}


http {
    include       /etc/nginx/mime.types;   #文件擴展名與類型映射表
    default_type  application/octet-stream;  #默認文件類型
    #設置日誌模式
    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;    #減小網絡報文段的數量

    keepalive_timeout  65;  #保持鏈接的時間，也叫超時時間

    #gzip  on;  #開啓gzip壓縮

    include /etc/nginx/conf.d/*.conf; #包含的子配置項位置和文件
複製代碼

再解釋一下主文件中的子文件，就是👆上面這個 include 下的 .conf 文件

進入 /etc/nginx/conf.d/ 這個文件夾，再經過 vim 或者 cat 打開

server {
    listen       80;   #配置監聽端口
    server_name  localhost;  //配置域名

    #charset koi8-r; 
    #access_log /var/log/nginx/host.access.log main;

    location / {
        root   /usr/share/nginx/html;     #服務默認啓動目錄
        index  index.html index.htm;    #默認訪問文件
    }

    #error_page 404 /404.html; # 配置404頁面

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;   #錯誤狀態碼的顯示頁面，配置後須要重啓
    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表示，項目文件是放在'/usr/share/nginx/html'下面，那麼咱們就去看看這裏有啥呢

就這倆玩意兒，也就是一個默認的index文件和報錯的時候會展現的50x.html頁面

經過安全組的配置，容許瀏覽器訪問服務器地址的80端口，下面就是個人騰訊雲服務器的默認首頁

安全組的配置會有些複雜，須要一些網絡協議的知識，不過騰訊雲提供了視頻教程，你們能夠看看地址在這裏

這裏還有一個小問題，就是當大家配置好 default.conf 的時候，須要重啓nginx才能運行新改的配置，這裏在服務器裏運行指令 nginx -s reload 會報錯nginx: [error] open() "/var/run/nginx.pid" failed (2: No such file or directory)，這個時候能夠以下

// 先輸入
nginx
nginx -s reload
複製代碼

或者是若是你使用 iTerm 的話，能夠配置 .bashrc 文件，添加一個 alias 的配置來簡化運行nginx指令；或者是經過指令 systemctl start nginx.service 啓動 nginx 服務，經過指令 ps aux | grep nginx 查看 nginx 是不是否啓動；還有不少 nginx 的指令，你們自行去官網查看，這裏很少bb了。

5、親手配置404錯誤頁面

打開default.conf文件進行編輯

添加一個 error_page 配置，而後再去配置 /usr/share/nginx/html 裏面的 404_*error.html

直接輸入指令 vim 404_error.html 就會直接建立 html 文件

保存退出以後，記得重啓一下nginx，而後去瀏覽器隨便輸入一個未知的路徑，就能看到404頁面以下

還能將位置頁面指向另外一個網址，default.conf 以下設置

刷新剛纔的瀏覽器頁面，就會跳轉到百度的首頁去了

6、權限配置

簡單的說，就是我想讓誰能訪問個人服務器，誰禁止訪問個人瀏覽器

關鍵詞是 allow 和 deny

顧名思義，allow 就是容許誰訪問，deny 就是禁止誰訪問

首先看看本身的 ip 地址，經過這個網址來獲取

個人 ip 地址是 112.10.54.90，那麼我來禁止個人 ip 訪問服務器

location / {
    root   /usr/share/nginx/html;
    index  index.html index.htm;
    deny 112.10.54.90;
}
複製代碼

重啓nginx以後，訪問ip地址首頁，結果以下

還能夠更精準的定位某個路徑下不可訪問，以下設置

location =/admin {
    deny all
}
複製代碼

再也不演示了，自行操做，光看可不行，請本身多多練習，看別人bb沒用的

7、虛擬主機的設置

三種形式

一、基於端口號配置

二、基於域名配置

三、基於IP配置

工做中通常是不會基於IP配置的，由於哪來那麼多錢買那麼多IP呢，多數都是經過域名來配置，設置一下二級域名，作一個反向代理啥的。經過端口號也很少，由於我總不能在域名後面加個端口號把，十分難看且不雅。

着重講一講經過域名配置的狀況，你們能夠去買個域名玩一玩，幾塊幾十塊就有一個屬於本身的船新域名，多的不說，去萬網買一個吧。買完以後，經過解析添加一條記錄以下

同理再添加一條記錄，主機記錄命名爲nginx2

那麼如今我就有兩個二級域名

一、nginx.chennick.wang

二、nginx2.chennick.wang

那麼用第一個域名指向默認的nginx首頁，用第二個新建一個虛擬主機

第一個域名配置

第二個域名配置

回去設置一下第二個域名的index2.html

玩到這兒，基本上你也就差很少入門了nginx的配置了

8、Nginx反向代理

反向代理對前端而言，是很是有用的，由於前端的跨域問題跨域經過反向代理來解決。廢話很少說，進入正題。

如何配置反向代理呢，配置以下

server{
        listen 80;
        server_name nginx2.chennick.wang;
        location / {
               proxy_pass https://www.baidu.com/;
        }
}
複製代碼

上述配置，在瀏覽器訪問nginx2.chennick.wang這個域名的時候，展現的頁面是www.baidu.com/的頁面，以下圖所示

還有一些對PC端和移動端的判斷，相似瀏覽器的userAgent去判斷，而後根據PC和Mobile返回不一樣的站點，這裏就不展開多說了，東西都差很少，看文檔就行。

最後再多說一句，小夥伴們必定要本身去親手寫一寫，光蹭一蹭不進去，是不行滴。

PS、後續補充

在雲端服務器配置node環境：

這裏推薦你們使用nvm去安裝node，版本隨時能夠升級降級，很是友好，不過不建議在服務器隨便升降版本，很危險。。。

具體方法：

一、經過 wget 下載nvm的sh腳本

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

二、先更新一下bash_profile文件

source ~/.bash_profile
複製代碼

三、安裝完成之後使用 nvm - v 來測試安裝是否成功

nvm -v
複製代碼

四、安裝成功之後會顯示版本號和nvm 相關命令等提示

nvm install v12.6.0
nvm use v12.6.0
nvm alias default v12.6.0
複製代碼

而後就能在全局使用npm

前端不能不會的 Nginx 入門 （圖文並茂的服務器環境教程）

前言