本文用nginx部署服務為主要內容，基於CentOs 7.8系統。
文檔版本：1.0.1
更新時間：2020-07-22 20:28
一. 相關環境或軟件技術
1.1 CentOS 系統
CentOS（Community Enterprise Operating System，中文意思是社區企業操作系統）是Linux
當前安裝版本CentOS 7.8版本，保持統一版本，方便后期維護。
1.2 Nginx
Nginx (engine x) 是一個高性能的HTTP和反向代理web服務器。
當前使用的nginx版本為 nginx-1.6.2 ，直接使用安裝包安裝。
1.3 PCRE
安裝Nginx 前 必須安裝 PCRE。PCRE 作用是讓 Nginx 支持 Rewrite 功能。當前使用的版本為 pcre-8.35 的安裝包。
Nginx是高度自由化的Web服務器，它的功能是由許多模塊來支持。如果使用了某個模塊，這個模塊使用了一些類似zlib或OpenSSL等的第三方庫，那么就必須先安裝這些軟件。
PCRE(Perl Compatible Regular Expressions)是一個Perl庫，包括perl兼容的正則表達式庫。如果我們在配置文件nginx.conf中使用了正則表達式，那么在編譯Nginx時就必須把PCRE庫編譯進Nginx，因為Nginx的HTTP模塊需要靠它來解析正則表達式。另外，pcre-devel是使用PCRE做二次開發時所需要的開發庫，包括頭文件等，這也是編譯Nginx所必須使用的。
1.4 前端包目錄結構
nginx安裝后，需要上傳前端代碼文件，進行頁面訪問。匯聚前端包一般是只有一個名為 dist 文件夾，文件夾的目錄結構如下：
-- dist -- static -- index.html -- umi.css -- umi.js
其中static內包含的是靜態文件。
二. 安裝部署
2.1 xshell操作
-
當前文檔以xshell為例。打開xshell后，新建會話連接，先輸入會話名稱和服務器的ip：
-
點擊用戶身份驗證，輸入服務器的用戶名和密碼，確定后保存：
-
連接后進入代碼編輯：
2.2 安裝PCRE
這里安裝使用的是安裝包模式。
-
進入統一設置（可以自己定義路徑）的文件夾：
[root@localhost ~]# cd /usr/local/src
-
使用命令 rz 后直接回車，然后選擇 pcre-8.35 安裝包上傳。
[root@localhost src]# rz
（上傳后，可用命令 ls 查看是否有上傳）
-
解壓安裝包
[root@localhost src]# tar zxvf pcre-8.35.tar.gz
（上傳后，可用命令 ls 查看是否有解壓）
-
進入pcre安裝包目錄
[root@localhost src]# cd pcre-8.35
-
檢測配置
./configure 是用來檢測你的安裝平台的目標特征的。比如它會檢測你是不是有CC或GCC，並不是需要CC或GCC，它是個shell腳本。配置完之后控制台會打印出pcre配置的摘要信息。
[root@localhost pcre-8.35]# ./configure
-
編譯
make 是用來編譯的，它從Makefile中讀取指令，然后編譯。
[root@localhost pcre-8.35]# make
-
安裝
make install 是用來安裝的，它也從Makefile中讀取指令，安裝到指定的位置。
[root@localhost pcre-8.35]# make install
-
安裝后，可查看pcre版本。
[root@bogon pcre-8.35]# pcre-config --version
如上圖所示，有顯示8.35版本，則表示安裝成功。
2.3 安裝Nginx
這里安裝使用的是安裝包模式。
-
進入統一設置（可以自己定義路徑）的文件夾：
[root@bogon pcre-8.35]# cd /usr/local/src
-
使用命令 rz 后直接回車，然后選擇 nginx-1.6.2 安裝包上傳。
[root@localhost src]# rz
（上傳后，可用命令 ls 查看是否有上傳）
-
解壓安裝包
[root@localhost src]# tar zxvf nginx-1.6.2.tar.gz
（上傳后，可用命令 ls 查看是否有解壓）
-
進入nginx安裝包目錄
[root@bogon src]# cd nginx-1.6.2
-
配置（如想了解更多配置，可以訪問https://www.cnblogs.com/flashfish/p/11025961.html）
[root@localhost nginx-1.6.2]# ./configure --prefix=/usr/local/webserver/nginx --with-http_stub_status_module --with-http_ssl_module --with-pcre=/usr/local/src/pcre-8.35
-
編譯
[root@localhost nginx-1.6.2]# make
-
安裝
[root@localhost nginx-1.6.2]# make install
-
安裝后，查看版本號
[root@localhost nginx-1.6.2]# /usr/local/webserver/nginx/sbin/nginx -v
如果如下所示，顯示版本號（以下代碼無需執行），則表示已安裝。
nginx version: nginx/1.6.2
-
啟動nginx
[root@localhost nginx-1.6.2]# /usr/local/webserver/nginx/sbin/nginx
-
請到瀏覽器地址欄輸入服務器地址，比如當前示例地址是 192.168.100.123 ，進行訪問，如下所示，表示nginx安裝成功，並可以訪問。
-
如果訪問不了，可能是服務器防火牆沒有關閉，關閉命令如下：
[root@localhost html]# systemctl stop firewalld
[root@localhost html]# systemctl disable firewalld
如果顯示以下代碼，表示關閉成功
Removed symlink /etc/systemd/system/multi-user.target.wants/firewalld.service. Removed symlink /etc/systemd/system/dbus-org.fedoraproject.FirewallD1.service.
-
關閉后重啟nginx，然后再去瀏覽器訪問
/usr/local/webserver/nginx/sbin/nginx -s -reload
三. nginx部署多套服務
3.1 前端配置
先把前端包解壓，然后用文本打開前端包下的 index.html 文件，默認代碼如下：
上圖標注的4個點都是必須要配置的點，其中：
-
第1,4個標注點，是前端包的默認路徑，可以添加配置
-
第3個標注點是ip，端口等其他全局配置，需要和后端對應匹配
-
第2個標注點是訪問后的路徑替換。我們訪問的是nginx的location的后面那個東西（3.2.2章節），然后window.routeBase會替換掉這個地址
配置完成后，把dist再重新打包成 zip 格式，然后把dist下的static文件夾也打包成 zip 格式，先放着，用以上傳。
3.2 Nginx對應配置
nginx的目錄結構包含了conf文件夾和html文件夾，主要操作在於這兩個。
3.2.1 上傳前端包
1.打開linux系統下已經安裝好的nginx（默認地址是剛才安裝的路徑：/usr/local/webserver/nginx，而不是放置在src下的nginx-1.6.2的路徑），先找到nginx下的html文件夾，然后在當前文件夾用命令 rz 直接上傳剛剛打包的dist.zip和static.zip 。
2.前端包下有個static文件夾（目錄結構請看1.4章節），這個單獨拿出來，重新壓縮成 zip 然后用命令 rz 上傳，上傳后可以使用命令 ls 查看是否有上傳。
解壓static.zip
[root@localhost html]# unzip static.zip
解壓后，如下圖所示藍色部分為文件夾，第二個框框為static文件夾下面的文件：
解壓dist1.zip（dist1.zip只是舉例）
[root@localhost html]# unzip dist1.zip
解壓后如下：
多套服務部署后，nginx下的html文件夾目錄結構如下：
至少包含dist5,static（dist5只是舉例，代表剛才上一步解壓的那個文件） 兩個文件夾。
3.2.2 配置 nginx.conf
首先進入（cd conf）conf文件夾，然后使用命令 vi nginx.conf 進行查看文件，
注意，命令vi nginx.conf 如果Enter后出現如下圖提示
則再 Enter一次，否則就略過此步驟
文件默認配置如下：
1 #user nobody; 2 worker_processes 1; 3 4 #error_log logs/error.log; 5 #error_log logs/error.log notice; 6 #error_log logs/error.log info; 7 8 #pid logs/nginx.pid; 9 10 11 events { 12 worker_connections 1024; 13 } 14 15 16 http { 17 include mime.types; 18 default_type application/octet-stream; 19 20 #log_format main '$remote_addr - $remote_user [$time_local] "$request" ' 21 # '$status $body_bytes_sent "$http_referer" ' 22 # '"$http_user_agent" "$http_x_forwarded_for"'; 23 24 #access_log logs/access.log main; 25 26 sendfile on; 27 #tcp_nopush on; 28 29 #keepalive_timeout 0; 30 keepalive_timeout 65; 31 32 #gzip on; 33 34 server { 35 listen 80; 36 server_name localhost; 37 38 #charset koi8-r; 39 40 #access_log logs/host.access.log main; 41 42 location / { 43 root html; 44 index index.html index.htm; 45 } 46 47 #error_page 404 /404.html; 48 49 # redirect server error pages to the static page /50x.html 50 # 51 error_page 500 502 503 504 /50x.html; 52 location = /50x.html { 53 root html; 54 } 55 56 # proxy the PHP scripts to Apache listening on 127.0.0.1:80 57 # 58 #location ~ \.php$ { 59 # proxy_pass http://127.0.0.1; 60 #} 61 62 # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 63 # 64 #location ~ \.php$ { 65 # root html; 66 # fastcgi_pass 127.0.0.1:9000; 67 # fastcgi_index index.php; 68 # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name; 69 # include fastcgi_params; 70 #} 71 72 # deny access to .htaccess files, if Apache's document root 73 # concurs with nginx's one 74 # 75 #location ~ /\.ht { 76 # deny all; 77 #} 78 } 79 80 81 # another virtual host using mix of IP-, name-, and port-based configuration 82 # 83 #server { 84 # listen 8000; 85 # listen somename:8080; 86 # server_name somename alias another.alias; 87 88 # location / { 89 # root html; 90 # index index.html index.htm; 91 # } 92 #} 93 94 95 # HTTPS server 96 # 97 #server { 98 # listen 443 ssl; 99 # server_name localhost; 100 101 # ssl_certificate cert.pem; 102 # ssl_certificate_key cert.key; 103 104 # ssl_session_cache shared:SSL:1m; 105 # ssl_session_timeout 5m; 106 107 # ssl_ciphers HIGH:!aNULL:!MD5; 108 # ssl_prefer_server_ciphers on; 109 110 # location / { 111 # root html; 112 # index index.html index.htm; 113 # } 114 #} 115 116 }
然后，當前文本有編輯狀態和非編輯狀態兩種模式（底部含有 -- INSTERT -- 表示編輯狀態，無此標志表示非編輯狀態），默認是非編輯狀態。
修改配置有兩種方式：
第一種，主動進入編輯狀態（按a鍵或i鍵），編輯代碼（80端口下，大概35行上下）：
1 ... 2 location / { 3 root html; 4 index index.html index.htm; 5 } 6 ...
編輯后為：
1 ... 2 location /dist5 { 3 try_files $uri $uri/ /dist5/index.html; 4 } 5 6 location /dist6 { 7 try_files $uri $uri/ /dist6/index.html; 8 } 9 10 location /dist7 { 11 try_files $uri $uri/ /dist7/index.html; 12 } 13 14 location /dist9 { 15 try_files $uri $uri/ /dist9/index.html; 16 } 17 ...
然后按鍵ESC先退出編輯狀態，之后再用命令 :wq 保存退出。（其他命令請看附錄一）
提示：有一個location就是單套服務，多個就是多個服務。並且單套服務的可以直接把dist下的所有內容，都放到nginx的html下，訪問的時候直接訪問ip。
第二種，非編輯狀態下可直接長按d鍵全部刪除，刪除后可能會自動進入編輯狀態，接着將下面內容復制粘貼替換（注意：如果是xshell操作復制粘貼，有時候第一行的user會缺失一部分字符，需要補全。）。替換后，先用 ESC退出編輯狀態，然后再用命令 :wq 保存退出。（其他命令請看附錄一）
1 #user root; 2 worker_processes 1; 3 4 #error_log logs/error.log; 5 #error_log logs/error.log notice; 6 #error_log logs/error.log info; 7 8 #pid logs/nginx.pid; 9 10 11 events { 12 worker_connections 1024; 13 } 14 15 16 http { 17 include mime.types; 18 default_type application/octet-stream; 19 20 #log_format main '$remote_addr - $remote_user [$time_local] "$request" ' 21 # '$status $body_bytes_sent "$http_referer" ' 22 # '"$http_user_agent" "$http_x_forwarded_for"'; 23 24 #access_log logs/access.log main; 25 26 sendfile on; 27 #tcp_nopush on; 28 29 #keepalive_timeout 0; 30 keepalive_timeout 65; 31 32 #gzip on; 33 34 server { 35 listen 80; 36 server_name localhost; 37 38 #charset koi8-r; 39 40 #access_log logs/host.access.log main; 41 42 location /dist5 { 43 try_files $uri $uri/ /dist5/index.html; 44 } 45 46 location /dist6 { 47 try_files $uri $uri/ /dist6/index.html; 48 } 49 50 location /dist7 { 51 try_files $uri $uri/ /dist7/index.html; 52 } 53 54 location /dist9 { 55 try_files $uri $uri/ /dist9/index.html; 56 } 57 58 #error_page 404 /404.html; 59 60 # redirect server error pages to the static page /50x.html 61 # 62 error_page 500 502 503 504 /50x.html; 63 location = /50x.html { 64 root html; 65 } 66 67 # proxy the PHP scripts to Apache listening on 127.0.0.1:80 68 # 69 #location ~ \.php$ { 70 # proxy_pass http://127.0.0.1; 71 #} 72 73 # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 74 # 75 #location ~ \.php$ { 76 # root html; 77 # fastcgi_pass 127.0.0.1:9000; 78 # fastcgi_index index.php; 79 # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name; 80 # include fastcgi_params; 81 #} 82 83 # deny access to .htaccess files, if Apache's document root 84 # concurs with nginx's one 85 # 86 #location ~ /\.ht { 87 # deny all; 88 #} 89 } 90 91 92 # another virtual host using mix of IP-, name-, and port-based configuration 93 # 94 #server { 95 # listen 8000; 96 # listen somename:8080; 97 # server_name somename alias another.alias; 98 99 # location / { 100 # root html; 101 # index index.html index.htm; 102 # } 103 #} 104 105 106 # HTTPS server 107 # 108 #server { 109 # listen 443 ssl; 110 # server_name localhost; 111 112 # ssl_certificate cert.pem; 113 # ssl_certificate_key cert.key; 114 115 # ssl_session_cache shared:SSL:1m; 116 # ssl_session_timeout 5m; 117 118 # ssl_ciphers HIGH:!aNULL:!MD5; 119 # ssl_prefer_server_ciphers on; 120 121 # location / { 122 # root html; 123 # index index.html index.htm; 124 # } 125 #} 126 127 }
3.2.3 檢查配置與重啟查看
1. 保存退出后，在終端輸入以下代碼，檢查配置是否正確：
[root@localhost conf]# /usr/local/webserver/nginx/sbin/nginx -t
如果顯示以下內容，則表示配置正確（以下內容無需執行）：
nginx: the configuration file /usr/local/webserver/nginx/conf/nginx.conf syntax is ok
nginx: configuration file /usr/local/webserver/nginx/conf/nginx.conf test is successful
2. 重啟nginx
[root@localhost conf]# /usr/local/webserver/nginx/sbin/nginx -s reload
3. 到瀏覽器地址欄輸入地址（如果已有頁面，請清空緩存后刷新查看）查看，比如：
http://192.168.100.123/dist5
四. nginx部署單套服務
4.1前端配置
單套服務的nginx部署和多套服務部署類似，只是前端包配置和nginx對應的配置有所不同。
單套服務部署后，html文件夾目錄結構如下：
至少包含index.html,umi.css,umi.js三個文件以及一個static文件夾。
4.2 Nginx對應配置
Nginx的單套服務與多套服務配置差別在於nginx.conf的配置不同。單套服務的主要修改配置代碼部分是(80端口下的部分，第40行上下)：
location / {
root html;
index index.html index.htm;
}
修改后如下：
location / {
try_files $uri $uri/ /index.html;
}
然后查看配置正確性，再重啟nginx（參考3.2.3章節）
五. 更新操作
-
進入到nginx的html文件夾（命令請查看附錄一）
-
先刪除需要更新的包，否則可能會上傳失敗。比如（以下為示例代碼，具體包名稱以實際包為准）；
rm dist.zip
刪除提示如下：
rm：是否刪除普通文件 "dist.zip"？
只需要在后面輸入小寫字母 y ，然后回車即可。刪除后可用命令 ls 查看是否已被刪除。
-
使用命令 rz 直接上傳包
-
解壓
解壓覆蓋會產生如下提示（如果已刪除則忽略此步驟）：
replace static/background.5e1e1790.jpg? [y]es, [n]o, [A]ll, [N]one, [r]ename:
可輸入小寫字母 y 一個一個覆蓋，或者大寫字母 A，全部覆蓋。
-
去瀏覽器上進行清空緩存並刷新匯聚頁面查看是否完成更新。
附錄一：常用命令
1 ---------- 2 pwd 顯示當前目錄 3 ls 查看目錄下的內容 4 cd xxx 進入到xxx目錄 5 cd .. 返回上一層目錄 6 cat 顯示文件的內容 7 touch 創建文件 8 mv 移動文件 9 rm 刪除文件 10 rm -rf xxx 刪除文件夾（xxx是文件夾名稱） 11 rm dir 刪除目錄 12 vi/vim 查看編輯文件(vim是vi的升級版) 13 unzip xxx.zip 解壓zip的壓縮包 14 unzip -o xxx.zip 解壓.zip的壓縮包后並直接覆蓋文件 15 tar zxvf xxx.tar.gz 解壓.tar.gz的壓縮包 16 rz 上傳文件 17 rz -y 上傳並覆蓋文件 18 sz 從nginx里面下載文件 19 20 ---------- 21 ESC按鍵 退出編輯模式，才能使用以下命令 22 :q 冒號+q，退出不保存 23 :q! 強制退出不保存 24 :wq 保存並退出 25 gg 回到最上行 26 dd操作，刪除行操作，當vi xxx某個文件的時候，有編輯模式和非編輯模式兩種狀態，dd刪除操作是非編輯模式下的刪除行操作 27 u 撤銷 28 29 ---------- 30 查看nginx進程：ps aux | grep nginx 31 啟動防火牆： systemctl start firewalld 32 關閉防火牆： systemctl stop firewalld 33 查看防火牆狀態： systemctl status firewalld 34 開機禁用防火牆： systemctl disable firewalld 35 開機啟用防火牆： systemctl enable firewalld
附錄二：常見錯誤
-
刪除帶括號的會報錯
[root@localhost src]# rm pcre-8.35.tar(1).gz
-bash: 未預期的符號 `(' 附近有語法錯誤
在括號前加\ 就可以。
[root@localhost src]# rm pcre-8.35.tar\(1\).gz
-
nginx已經啟動，又再次啟動，無效
nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Address already in use) nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Address already in use) nginx: [emerg] bind() to 0.0.0.0:80 failed (98: Address already in use) ......
生成很多類似這樣的代碼。這個時候不應該啟動，而是重啟nginx
[root@localhost /]# /usr/local/webserver/nginx/sbin/nginx -s reload
-
用tar去解壓zip等壓縮包解壓不出來，tar是用來解壓*.tar.gz文件的
[root@localhost src]# tar zxvf nginx-1.6.2.tar.gz
xxx.zip文件解壓應該用命令 unzip ，如：
[root@localhost src]# unzip dist.zip
-
在終端輸入命令時，若遇到權限問題，可以直接獲得root權限。即在終端執行sudo -s，如下：
yzy@yzy-test:/usr/local/nginx/html$ sudo -s
，然后輸入當前登錄的普通用戶密碼(密碼不可見，看起來像沒有輸入一樣，保持正常輸入就好)，
[sudo] yzy 的密碼：