一文搞懂使用Nginx服務器部署前端Web項目

1 Nginx簡介與安裝

概要

Nginx 簡介
Nginx 架構說明
Nginx 基礎配置與使用

1.1 Nginx 簡介

Nginx是一個高性能WEB服務器，除它之外Apache、Tomcat、Jetty、IIS，它們都是Web服務器，或者叫做WWW（World Wide Web）服務器，相應地也都具備Web服務器的基本功能。Nginx 相對基它WEB服務有什麼優勢呢？

Tomcat、Jetty 面向java語言，先天就是重量級的WEB服務器，其性能與Nginx沒有可比性。
IIS只能在Windows操作系統上運行。Windows作爲服務器在穩定性與其他一些性能上都不如類UNIX操作系統，因此，在需要高性能Web服務器的場合下IIS並不佔優。
Apache的發展時期很長，而且是目前毫無爭議的世界第一大Web服務器，其有許多優點，如穩定、開源、跨平臺等，但它出現的時間太長了，在它興起的年代，互聯網的產業規模遠遠比不上今天，所以它被設計成了一個重量級的、不支持高併發的Web服務器。在Apache服務器上，如果有數以萬計的併發HTTP請求同時訪問，就會導致服務器上消耗大量內存，操作系統內核對成百上千的Apache進程做進程間切換也會消耗大量CPU資源，並導致HTTP請求的平均響應速度降低，這些都決定了Apache不可能成爲高性能Web服務器，這也促使了Lighttpd和Nginx的出現。下圖可以看出07年到17 年強勁增長勢頭。

1.2 編譯與安裝

安裝環境準備：

（1）linux 內核2.6及以上版本:

只有2.6之後才支持epool ，在此之前使用select或pool多路複用的IO模型，無法解決高併發壓力的問題。通過命令uname -a 即可查看。

（2）GCC編譯器

GCC（GNU Compiler Collection）可用來編譯C語言程序。Nginx不會直接提供二進制可執行程序,只能下載源碼進行編譯。

（3）PCRE庫

PCRE（Perl Compatible Regular Expressions，Perl兼容正則表達式）是由Philip Hazel開發的函數庫，目前爲很多軟件所使用，該庫支持正則表達式。

（4）zlib庫

zlib庫用於對HTTP包的內容做gzip格式的壓縮，如果我們在nginx.conf裏配置了gzip on，並指定對於某些類型（content-type）的HTTP響應使用gzip來進行壓縮以減少網絡傳輸量。

（5）OpenSSL開發庫

如果我們的服務器不只是要支持HTTP，還需要在更安全的SSL協議上傳輸HTTP，那麼就需要擁有OpenSSL了。另外，如果我們想使用MD5、SHA1等散列函數，那麼也需要安裝它。

上面幾個庫都是Nginx 基礎功能所必需的，爲簡單起見我們可以通過yum 命令統一安裝。

yum 安裝nginx 環境

yum -y install make zlib zlib-devel gcc-c++ libtool openssl openssl-devel pcre pcre-devel

源碼獲取

nginx 下載頁：http://nginx.org/en/download.html

下載Nginx最新穩定版本並解壓

wget http://nginx.org/download/nginx-1.14.0.tar.gz

筆者是通過從官網(鏈接：http://nginx.org/download/nginx-1.14.0.tar.gz)下載nginx-1.14.0.tar.gz包，通過Xshell6客戶端登錄linux服務器後使用xftp上傳到linux服務器的/usr/local目錄下；cd /usr/local切換到/usr/local目錄下執行如下指令解壓：

tar -zxvf nginx-1.14.0.tar.gz

簡單的安裝

cd ./nginx-1.14.0進入nginx-1.14.0目錄執行指令

./configure && make && make install

執行完成之後 nginx 運行文件就會被安裝在 /usr/local/nginx 下
在當前目錄下執行ls命令發現生成了nginx目錄

模塊更新

添加狀態查查看等其它模塊：

./configure --with-pcre --with-http_stub_status_module --with-http_ssl_module

重新創建主文件：

make

在nginx-1.14.0目錄下執行如下指令，將新生成的nginx 文件覆蓋舊文件：

cp objs/nginx /usr/local/nginx/sbin/

cd ../nginx

進入nginx目錄下查看是否更新成功並顯示了 configure 構建參數表示成功:

./sbin/nginx -V

控制命令

查看命令幫助: ./sbin/nginx -?
默認方式啓動：./sbin/nginx
指定配置文件啓動: ./sbing/nginx -c /conf/nginx.conf
指定nginx程序目錄啓動: ./sbin/nginx -p /usr/local/nginx/
快速停止: ./sbin/nginx -s stop
優雅停止: ./sbin/nginx -s quit
熱裝載配置文件(修改nginx.conf文件後執行): ./sbin/nginx -s reload
重新打開日誌文件(前端web項目重新打包並放入nginx/html目錄下後執行)

./sbin/nginx -s reopen

設置全局命令，如下表示設置啓動用戶爲root：

./sbin/nginx -g "user root;"

2 Nginx架構說明

2.1 架構說明

nginx啓動時，不會處理網絡請求，主要負責調度工作進程，也就是圖示的三項：加載配置、啓動工作進程及非停升級。所以，nginx啓動以後，查看操作系統的進程列表，我們就能看到至少有兩個nginx進程。
服務器實際處理網絡請求及響應的是工作進程（worker），在類unix系統上，nginx可以配置多個worker，而每個worker進程都可以同時處理數以千計的網絡請求。
模塊化設計。nginx的worker，包括核心和功能性模塊，核心模塊負責維持一個運行循環（run-loop），執行網絡請求處理的不同階段的模塊功能，如網絡讀寫、存儲讀寫、內容傳輸、外出過濾，以及將請求發往上游服務器等。而其代碼的模塊化設計，也使得我們可以根據需要對功能模塊進行適當的選擇和修改，編譯成具有特定功能的服務器。
事件驅動、異步及非阻塞，可以說是nginx得以獲得高併發、高性能的關鍵因素，同時也得益於對Linux、Solaris及類BSD等操作系統內核中事件通知及I/O性能增強功能的採用，如kqueue、epoll及event ports。

Nginx 核心模塊：

3 Nginx配置與使用

3.1 配置文件語法格式

先來看一個簡單的nginx 配置:

worker_processes  1;
events {
  worker_connections  1024;
}
http {
  include       mime.types;
  default_type  application/octet-stream;
  sendfile        on;
  keepalive_timeout  65;
  server {
      listen       80;
      server_name  localhost;
      location / {
          root   html;
          index  index.html index.htm;
      }
      location /nginx_status {
       stub_status on;
       access_log   off;
        }
  }
}

上述配置中的events、http、server、location、upstream等屬於配置項塊。而worker_processes 、worker_connections、include、listen 屬於配置項塊中的屬性。 /nginx_status 屬於配置塊的特定參數參數。其中server塊嵌套於http塊，其可以直接繼承訪問Http塊當中的參數。

配置塊	名稱開頭用大口號包裹其對應屬性
屬性	基於空格切分屬性名與屬性值，屬性值可能有多個項都以空格進行切分如： access_log logs/host.access.log main
參數	其配置在塊名稱與大括號間，其值如果有多個也是通過空格進行拆分

注意如果配置項值中包括語法符號，比如空格符，那麼需要使用單引號或雙引號括住配置項值，否則Nginx會報語法錯誤。例如：

log_format main '$remote_addr - $remote_user [$time_local] "$request" ' '$status $body_bytes_sent "$http_referer" ' '"$http_user_agent" "$http_x_forwarded_for"';

3.2 配置第一個靜態WEB服務

基礎站點演示：

(1) 創建站點目錄mkdir -p /usr/www/luban

(2) 編寫靜態文件

(3) 配置 nginx.conf

(4) 配置server

(5) 配置location

基本配置介紹說明:

(1) 監聽端口

語法：listen address：

默認： listen 80;

配置塊： server

(2) 主機名稱

語法：server_name name[……];

默認：server_name “”;

配置塊：server

server_name後可以跟多個主機名稱，如server_name www.testweb.com、download.testweb.com;支持通配符與正則

(3) location

語法：location[=|～|～*|^～|@]/uri/{……}

配置塊：server

=表示把URI作爲字符串，以便與參數中的uri做完全匹配
/ 基於uri目錄匹配
～表示正則匹配URI時是字母大小寫敏感的
～*表示正則匹配URI時忽略字母大小寫問題
^～表示正則匹配URI時只需要其前半部分與uri參數匹配即可

(4) 指定站點根目錄

在 server與location中，基於ROOT路徑+URL中路徑去尋找指定文件

(5) alias 指定站點別名

只能配置location 中，基於alias 路徑+ URL依據location 前綴後的路徑來尋找文件

如下示例：

location /V1 {
    alias  /www/old_site;
    index  index.html index.htm;
}

防問規則如下：

URL：http://xxx:xx/V1/a.html

最終尋址：/www/old_site/a.html

動靜分離演示：

(1) 創建靜態站點

(2) 配置 location /static

(3) 配置~* .(gif|png|css|js)$

基於目錄動靜分離

server {
      listen 80;
      server_name *.luban.com;
      root /usr/www/luban;
      location / {
              index luban.html;
      }
      location /static {
       alias /usr/www/static;
      }
}

基於正則動靜分離

location ~* .(gif|jpg|png|css|js)$ {
    root /usr/www/static;
}

防盜鏈配置演示

加入至指定location 即可實現:

valid_referers none blocked *.luban.com;
if ($invalid_referer) {
     return 403;
}

下載限速

location /download {
  limit_rate 1m; //限制每1M下載速度
  limit_rate_after 30m; // 超過30M之後再限制下載速度
}

創建IP黑名單

封禁指定IP

deny 192.168.0.1;

allow 192.168.0.1;

開放指定IP 段

allow 192.168.0.0/24;

封禁所有

deny all;

開放所有

allow all;

創建黑名單文件

echo 'deny 192.168.0.132;' >> balck.ip

http 配置塊中引入黑名單文件

include black.ip;

3.3 日誌配置

(1) 日誌格式：

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  logs/access.log  main;

基於域名打印日誌:

access_log logs/$host.access.log main;

(2) error日誌的設置:

語法：error_log /path/file level;

默認：error_log logs/error.log error;

level是日誌的輸出級別，取值範圍是:

debug、info、notice、warn、error、crit、alert、emerg

針對指定的客戶端輸出debug級別的日誌:

語法：debug_connection[IP|CIDR]

events {
debug_connection 192.168.0.147;
debug_connection 10.224.57.0/200;
}

注意：debug 日誌開啓必須在安裝時添加 --with-debug (允許debug)

4 Nginx部署Web項目

筆者在github上找到了一個花衩褲大佬vue-element-admin的開源項目，該項目基於vue-cli腳手架搭建，該項目囊括了權限設計、多環境發佈、國際化語言、富文本編輯器、Excel導入導出、表格、組件和ECharts圖表等多個功能模塊；涉及的技術棧包括ES2015+、vue、vuex、vue-router、vue-cli、axios和element-ui。無論你是前端開發人員還是web全棧工程師，這個開源項目都很值得一學，下面是項目的git地址，感興趣的同學可以自行用git克隆下來：

https://github.com/PanJiaChen/vue-element-admin.git

（1）克隆到本地後，打開vue-element-admin文件夾，裏面有個README.zh_CN.md文件,打開該文件可以看到項目的架構和部署說明文檔，文檔介紹非常詳細（打開該文檔需要本地安裝Typore，沒有安裝的同學請自己去官網下載：https://typora.io/）；

（2）使用使用IDEA開發工具打開vue-element-admin文件夾，打開build目錄下的index.js文件修改端口號，將原端口號9526修改爲80端口（因筆者購買的騰訊雲服務器web端只開放了80端口，使用其他端口無法訪問頁面，因此需要修改端口號爲80）

(3) 保存修改後，進入vue-element-admin目錄，鼠標右鍵->git bash

執行構建生產環境打包命令：npm run build:prod，打包成功後控制檯會顯示如下日誌信息

注意：執行本地啓動服務器和構建生產環境打包命令都需要在本地安裝node.js 10.0以上版本，node.js可至官網（https://nodejs.org/en/download/）下載，目前最新版本是12.16.3，它包含了npm 6.14.4版本的包管理工具

（5）使用Xshell6 登錄騰訊雲linux服務器，首先執行cd /usr/local/nginx命令進入nginx目錄執行./sbin/nginx命令啓動nginx服務器；然後藉助Xshell6自帶的xft上傳文件功能

選中dist目錄下的index.html、favicon.ico文件和static文件夾，然後點擊工具欄下方的向右傳輸圖標按鈕完成上傳

(6)執行../nginx/sbin -s reopen 命令重啓nginx服務，重啓成功後就可在瀏覽器中輸入ip地址使用admin賬號登錄（默認登錄密碼爲:111111）成功後即可查看項目部署後的網頁效果了,進入網站首頁的效果圖如下圖所示：

筆者的騰訊雲IP地址爲134.175.187.61

文章撰寫說明：本文主要參考了魯班學院周瑜老師的一、Nginx簡介與安裝文檔進行的實戰演練，希望對想學習使用nginx服務器部署web項目和實現服務器負載均衡技能的讀者會有幫助！

對筆者的文章剛興趣的讀者可以掃描下面的二維碼加個關注並在文章底部點個在看錶示對作者的支持，關注後進入公衆號發送消息“nginx入門”，筆者將贈送《Nginx開發從入門到精通》PDF版電子文檔

一文搞懂使用Nginx服務器部署前端Web項目

利用Spring-Data-Jpa中的QueryByExample和SpecificationExecutor兩個接口實現複雜業務場景的數據庫查詢

Spring AOP詳解及其用法(二)

記一次工作報表項目中開發的動態生成實體工具類，全程無硬編碼

SpringBoot中的 ApplicationEvent和Listener

vue整合element-ui庫實現帶表單的查詢和數據導出功能

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結