1. 程式人生 > 實用技巧 >linux nginx 部署多套服務(以react包為例)

linux nginx 部署多套服務(以react包為例)

前言

今天我特地寫下筆記,希望可以完全掌握這個東西,也希望可以幫助到任何想對學習這個東西的同學。

本文用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操作

  1. 當前文件以xshell為例。開啟xshell後,新建會話連線,先輸入會話名稱和伺服器的ip:

  1. 點選使用者身份驗證,輸入伺服器的使用者名稱和密碼,確定後儲存:

  2. 連線後進入程式碼編輯:

2.2 安裝PCRE

  這裡安裝使用的是安裝包模式。

  1. 進入統一設定(可以自己定義路徑)的資料夾:

[root@localhost ~]# cd /usr/local/src
  1. 使用命令 rz 後直接回車,然後選擇 pcre-8.35 安裝包上傳。

[root@localhost src]# rz
(上傳後,可用命令 ls 檢視是否有上傳)
  1. 解壓安裝包

[root@localhost src]# tar zxvf pcre-8.35.tar.gz
(上傳後,可用命令 ls 檢視是否有解壓)
  1. 進入pcre安裝包目錄

[root@localhost src]# cd pcre-8.35
  1. 檢測配置

./configure 是用來檢測你的安裝平臺的目標特徵的。比如它會檢測你是不是有CC或GCC,並不是需要CC或GCC,它是個shell指令碼。配置完之後控制檯會打印出pcre配置的摘要資訊。

[root@localhost pcre-8.35]# ./configure
  1. 編譯

    make 是用來編譯的,它從Makefile中讀取指令,然後編譯。

[root@localhost pcre-8.35]# make
  1. 安裝

    make install 是用來安裝的,它也從Makefile中讀取指令,安裝到指定的位置。

[root@localhost pcre-8.35]# make install
  1. 安裝後,可檢視pcre版本。

[root@bogon pcre-8.35]# pcre-config --version

如上圖所示,有顯示8.35版本,則表示安裝成功。

2.3 安裝Nginx

  這裡安裝使用的是安裝包模式。

  1. 進入統一設定(可以自己定義路徑)的資料夾:

[root@bogon pcre-8.35]# cd /usr/local/src
  1. 使用命令 rz 後直接回車,然後選擇 nginx-1.6.2 安裝包上傳。

[root@localhost src]# rz
(上傳後,可用命令 ls 檢視是否有上傳)
  1. 解壓安裝包

[root@localhost src]# tar zxvf nginx-1.6.2.tar.gz
(上傳後,可用命令 ls 檢視是否有解壓)
  1. 進入nginx安裝包目錄

[root@bogon src]# cd nginx-1.6.2
  1. 配置(如想了解更多配置,可以訪問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
  1. 編譯

[root@localhost nginx-1.6.2]# make
  1. 安裝

[root@localhost nginx-1.6.2]# make install
  1. 安裝後,檢視版本號

[root@localhost nginx-1.6.2]# /usr/local/webserver/nginx/sbin/nginx -v

如果如下所示,顯示版本號(以下程式碼無需執行),則表示已安裝。

nginx version: nginx/1.6.2
  1. 啟動nginx

[root@localhost nginx-1.6.2]# /usr/local/webserver/nginx/sbin/nginx
  1. 請到瀏覽器位址列輸入伺服器地址,比如當前示例地址是 192.168.100.123 ,進行訪問,如下所示,表示nginx安裝成功,並可以訪問。

  1. 如果訪問不了,可能是伺服器防火牆沒有關閉,關閉命令如下:

[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.
  1. 關閉後重啟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,先找到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 兩個資料夾。

3.2.2 配置 nginx.conf

首先進入(cd conf)conf資料夾,然後使用命令 vi nginx.conf 進行檢視檔案,

注意,命令vi nginx.conf 如果Enter後出現如下圖提示

則再 Enter一次,否則就略過此步驟

檔案預設配置如下:

#user  nobody;
worker_processes 1;

#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;

#pid logs/nginx.pid;


events {
worker_connections 1024;
}


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

sendfile on;
#tcp_nopush on;

#keepalive_timeout 0;
keepalive_timeout 65;

#gzip on;

server {
listen 80;
server_name localhost;

#charset koi8-r;

#access_log logs/host.access.log main;

location / {
root html;
index index.html index.htm;
}

#error_page 404 /404.html;

# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root 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;
#}
}


# another virtual host using mix of IP-, name-, and port-based configuration
#
#server {
# listen 8000;
# listen somename:8080;
# server_name somename alias another.alias;

# location / {
# root html;
# index index.html index.htm;
# }
#}


# HTTPS server
#
#server {
# listen 443 ssl;
# server_name localhost;

# ssl_certificate cert.pem;
# ssl_certificate_key cert.key;

# ssl_session_cache shared:SSL:1m;
# ssl_session_timeout 5m;

# ssl_ciphers HIGH:!aNULL:!MD5;
# ssl_prefer_server_ciphers on;

# location / {
# root html;
# index index.html index.htm;
# }
#}

}

然後,當前文字有編輯狀態和非編輯狀態兩種模式(底部含有 -- INSTERT -- 表示編輯狀態,無此標誌表示非編輯狀態),預設是非編輯狀態。

修改配置有兩種方式:

第一種,主動進入編輯狀態(按a鍵或i鍵),編輯程式碼(80埠下,大概35行上下):

     ...
location / {
root html;
index index.html index.htm;
}
...

編輯後為:

     ...
location /dist5 {
try_files $uri $uri/ /dist5/index.html;
}

location /dist6 {
try_files $uri $uri/ /dist6/index.html;
}

location /dist7 {
try_files $uri $uri/ /dist7/index.html;
}

location /dist9 {
try_files $uri $uri/ /dist9/index.html;
}
...

然後按鍵ESC先退出編輯狀態,之後再用命令 :wq 儲存退出。(其他命令請看附錄一)

第二種,非編輯狀態下可直接長按d鍵全部刪除,刪除後可能會自動進入編輯狀態,接著將下面內容複製貼上替換(注意:如果是xshell操作複製貼上,有時候第一行的user會缺失一部分字元,需要補全。)。替換後,先用 ESC退出編輯狀態,然後再用命令 :wq 儲存退出。(其他命令請看附錄一)

#user  root;
worker_processes 1;

#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;

#pid logs/nginx.pid;


events {
worker_connections 1024;
}


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

sendfile on;
#tcp_nopush on;

#keepalive_timeout 0;
keepalive_timeout 65;

#gzip on;

server {
listen 80;
server_name localhost;

#charset koi8-r;

#access_log logs/host.access.log main;

location /dist5 {
try_files $uri $uri/ /dist5/index.html;
}

location /dist6 {
try_files $uri $uri/ /dist6/index.html;
}

location /dist7 {
try_files $uri $uri/ /dist7/index.html;
}

location /dist9 {
try_files $uri $uri/ /dist9/index.html;
}

#error_page 404 /404.html;

# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root 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;
#}
}


# another virtual host using mix of IP-, name-, and port-based configuration
#
#server {
# listen 8000;
# listen somename:8080;
# server_name somename alias another.alias;

# location / {
# root html;
# index index.html index.htm;
# }
#}


# HTTPS server
#
#server {
# listen 443 ssl;
# server_name localhost;

# ssl_certificate cert.pem;
# ssl_certificate_key cert.key;

# ssl_session_cache shared:SSL:1m;
# ssl_session_timeout 5m;

# ssl_ciphers HIGH:!aNULL:!MD5;
# ssl_prefer_server_ciphers on;

# location / {
# root html;
# index index.html index.htm;
# }
#}

}

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對應的配置有所不同。

多套服務需要配置6個點(請參考3.1章節的第一步,前端包的index.html預設程式碼),而單套服務只需要配置第3,第4,第5個點,即IP,埠號,topic三個。配置方式和3.1章講的方式一樣,其中,url的埠號統一都是8899

至於其他的點無須修改新增。

單套服務部署後,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章節)

五. 更新操作

  1. 進入到nginx的html資料夾(命令請檢視附錄一)

  2. 先刪除需要更新的包,否則可能會上傳失敗。比如(以下為示例程式碼,具體包名稱以實際包為準);

rm dist.zip

刪除提示如下:

rm:是否刪除普通檔案 "dist.zip"?

只需要在後面輸入小寫字母 y ,然後回車即可。刪除後可用命令 ls 檢視是否已被刪除。

  1. 使用命令 rz 直接上傳包

  2. 解壓

解壓覆蓋會產生如下提示(如果已刪除則忽略此步驟):

replace static/background.5e1e1790.jpg? [y]es, [n]o, [A]ll, [N]one, [r]ename:

可輸入小寫字母 y 一個一個覆蓋,或者大寫字母 A,全部覆蓋。

  1. 去瀏覽器上進行清空快取並重新整理匯聚頁面檢視是否完成更新。

    如果遇到需要回滾版本的情況,則對上一次收到的前端包進行操作即可。

附錄一:常用命令

----------
pwd 顯示當前目錄
ls 檢視目錄下的內容
cd xxx 進入到xxx目錄
cd .. 返回上一層目錄
cat 顯示檔案的內容
touch 建立檔案
mv 移動檔案
rm 刪除檔案
rm -rf xxx 刪除資料夾(xxx是資料夾名稱)
rm dir 刪除目錄
vi 檢視編輯檔案
unzip xxx.zip 解壓zip的壓縮包
tar

----------
ESC按鍵 退出編輯模式,才能使用以下命令
:q 冒號+q,退出不儲存
:q! 強制退出不儲存
:wq 儲存並退出
gg 回到最上行
dd操作,刪除行操作,當vi xxx某個檔案的時候,有編輯模式和非編輯模式兩種狀態,dd刪除操作是非編輯模式下的刪除行操作
u 撤銷

----------
檢視nginx程序:ps aux | grep nginx
啟動防火牆: systemctl start firewalld
關閉防火牆: systemctl stop firewalld
檢視防火牆狀態: systemctl status firewalld
開機禁用防火牆: systemctl disable firewalld
開機啟用防火牆: systemctl enable firewalld

附錄二:常見錯誤

  1. 刪除帶括號的會報錯

[root@localhost src]# rm pcre-8.35.tar(1).gz
-bash: 未預期的符號 `(' 附近有語法錯誤

在括號前加\ 就可以。

[root@localhost src]# rm pcre-8.35.tar\(1\).gz
  1. 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
  1. 用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
  1. 在終端輸入命令時,若遇到許可權問題,可以直接獲得root許可權。即在終端執行sudo -s,如下:

yzy@yzy-test:/usr/local/nginx/html$ sudo -s

,然後輸入當前登入的普通使用者密碼(密碼不可見,看起來像沒有輸入一樣,保持正常輸入就好),

[sudo] yzy 的密碼: 

即可進入到root使用者模式。