前端部署Nginx遠(yuǎn)程服務(wù)器

一、部署Nginx步驟

第一步: 連接服務(wù)器

如果你是Mac本沒有連接服務(wù)器的經(jīng)驗(yàn)?zāi)悄憧梢匀タ纯?a href="http://www.itdecent.cn/p/7cf4b2b28721" target="_blank">Mac連接遠(yuǎn)程服務(wù)器這片文章。

第二步：下載Nginx

下載Nginx有如下兩種方法（本文下載的是 nginx-1.16.1.tar.gz）：
1、本地下載
去nginx download官網(wǎng)下載穩(wěn)定版的nginx，上傳到服務(wù)器的某個(gè)位置（這里的位置是 /home/admin/nginx ）解壓。
2、服務(wù)器上用命令下載
在服務(wù)器 /home/admin/ 目錄下新建一個(gè) nginx 文件夾（mkdir nginx），進(jìn)入文件夾，打開命令行輸入如下命令：

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

查看當(dāng)前目錄就會(huì)看到 nginx-1.16.1.tar.gz ，這就說明壓縮包已經(jīng)下載完成。


image.png
第三步：安裝

繼續(xù)輸入命令tar -zxvf nginx-1.16.1.tar.gz（更多命令可以查看Linux下的解壓命令
）進(jìn)行解壓，解壓完成之后查看這個(gè)目錄就會(huì)出現(xiàn)一個(gè) nginx-1.16.1 文件夾，這就說明解壓成功了。
然后進(jìn)入 nginx-1.16.1 文件夾，依次輸入如下命令：
注意：在執(zhí)行下面命令時(shí)可能遇到權(quán)限問題，這時(shí)需要在命令前面加上sudo。

# ./configure的作用是檢測(cè)系統(tǒng)配置，生成makefile文件，以便你可以用 make 和 make install 來編譯和安裝程序。
# 執(zhí)行./configure的話要到你解壓好的目錄中去（cd 程序文件夾名稱）。
./configure  
# make 編譯 （make的過程是把各種語言寫的源碼文件，變成可執(zhí)行文件和各種庫文件）
make
# make install 安裝 （make install是把這些編譯出來的可執(zhí)行文件和庫文件復(fù)制到合適的地方）
make install

image.png

1、安裝 PCRE 庫
在運(yùn)行./configure時(shí)會(huì)看到如下報(bào)錯(cuò)：

./configure: error: the HTTP rewrite module requires the PCRE library.
You can either disable the module by using --without-http_rewrite_module
option, or install the PCRE library into the system, or build the PCRE library
statically from the source with nginx by using --with-pcre=<path> option.
意思是：./configure:錯(cuò)誤:HTTP重寫模塊需要 PCRE 庫。

這個(gè)時(shí)候就說明服務(wù)器中缺少 pcre-deve 庫，需要運(yùn)行yum -y install pcre-devel命令去安裝 PCRE 源碼包。
或者運(yùn)行下面命令手動(dòng)安裝 PCRE 源碼包：

cd /home/admin/  # 回到根目錄
mkdir pcre  # 創(chuàng)建 pcre 文件夾
cd pcre  # 進(jìn)入 pcre 文件夾
wget ftp://ftp.csx.cam.ac.uk/pub/software/programming/pcre/pcre-8.39.tar.gz # 下載源碼包
tar -zxvf pcre-8.39.tar.gz # 解壓源碼包
cd pcre-8.39 #  進(jìn)入解壓的源碼包
./configure # 檢測(cè)系統(tǒng)配置
make # 編譯
make install # 安裝

安裝完畢之后可以運(yùn)行rpm -qa pcre pcre-devel命令來檢查依賴，看 pcre-devel 包是否安裝成功。
2、安裝 zlib-devel 庫
在運(yùn)行./configure時(shí)會(huì)看到如下報(bào)錯(cuò)：

./configure: error: the HTTP gzip module requires the zlib library.
You can either disable the module by using --without-http_gzip_module
option, or install the zlib library into the system, or build the zlib library
statically from the source with nginx by using --with-zlib=<path> option.
意思是：./configure:錯(cuò)誤:HTTP gzip模塊需要zlib庫。

這個(gè)時(shí)候就說明服務(wù)器中缺少 zlib-devel 庫，需要運(yùn)行yum -y install zlib-devel命令去安裝 zlib-devel 源碼包。
或者運(yùn)行下面命令手動(dòng)安裝 zlib 源碼包：

cd /home/admin/  # 回到根目錄
mkdir zlib  # 創(chuàng)建 zlib 文件夾
cd zlib  # 進(jìn)入 zlib 文件夾
wget http://zlib.net/zlib-1.2.11.tar.gz # 下載源碼包
tar -zxvf zlib-1.2.11.tar.gz # 解壓源碼包
cd zlib-1.2.11 #  進(jìn)入解壓的源碼包
./configure # 檢測(cè)系統(tǒng)配置
make # 編譯
make install # 安裝

安裝完畢之后可以運(yùn)行rpm -qa zlib-devel命令來檢查依賴，看 zlib-devel 包是否安裝成功。
3、安裝 openssl-devel 庫（某些vps默認(rèn)沒裝ssl)
在運(yùn)行./configure時(shí)會(huì)看到如下報(bào)錯(cuò)：

./configure: error: the HTTP cache module requires md5 functions
from OpenSSL library. You can either disable the module by using
--without-http-cache option, or install the OpenSSL library into the system,
or build the OpenSSL library statically from the source with nginx by using
--with-http_ssl_module --with-openssl=<path> options.

意思是：./configure:錯(cuò)誤:HTTP緩存模塊需要md5函數(shù)從OpenSSL庫。

這個(gè)時(shí)候就說明服務(wù)器中缺少 openssl-devel 庫，需要運(yùn)行yum -y install openssl openssl-devel命令去安裝 openssl-devel 源碼包。
或者運(yùn)行下面命令手動(dòng)安裝 openssl 源碼包：

cd /home/admin/  # 回到根目錄
mkdir openssl  # 創(chuàng)建 openssl 文件夾
cd openssl  # 進(jìn)入 openssl 文件夾
wget https://www.openssl.org/source/openssl-1.0.1t.tar.gz # 下載源碼包
tar -zxvf openssl-1.0.1t.tar.gz # 解壓源碼包

安裝完畢之后可以運(yùn)行rpm -qa openssl openssl-devel命令來檢查依賴，看 zlib-devel 包是否安裝成功。

第四步： 啟動(dòng)

如果安裝時(shí)沒有報(bào)錯(cuò)，那么就說明已經(jīng)安裝成功了，接下來運(yùn)行cd /usr/local/nginx/sbin命令，進(jìn)入 /usr/local/nginx/sbin 目錄，在此目錄中會(huì)有一個(gè)名為 nginx 的文件，接著運(yùn)行./nginx -s reload（重啟命令）啟動(dòng)Nginx。

這個(gè)時(shí)候Nginx可能會(huì)報(bào)錯(cuò)：
nginx: [error] open() "/usr/local/nginx/logs/nginx.pid" failed (2: No such file or directory)
意思就是：/usr/local/nginx/logs/ 目錄下沒有找到nginx.pid文件。
解決方法：命令行輸入啟動(dòng)命令 /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf（如果出現(xiàn)權(quán)限問題就在開頭加 sudo）

如果啟動(dòng)時(shí)Nginx報(bào)錯(cuò)，那么解決了報(bào)錯(cuò)信息之后，還需要重新啟動(dòng)一下Nginx。


image.png

當(dāng)啟動(dòng)Nginx之后沒有報(bào)錯(cuò)，并且在瀏覽器輸入服務(wù)器域名或IP出現(xiàn)如下頁面，那么就說明Nginx啟動(dòng)成功了。


image.png
第五步：將前端 build 好的包上傳到服務(wù)器

將前端 build 好的包放到一個(gè)文件夾內(nèi)（例如：dataops），重新打開一個(gè)終端運(yùn)行如下命令：

scp -r 上傳文件的目錄 用戶名@IP:/上傳到服務(wù)器的目錄

其他命令請(qǐng)點(diǎn)擊Linux常用命令查看

image.png

在服務(wù)器的目錄下可以看到上傳的項(xiàng)目包
image.png

第六步：配置nginx服務(wù)器

運(yùn)行cd /usr/local/nginx/conf進(jìn)入安裝的Nginx目錄，/usr/local/nginx/html 目錄下應(yīng)該放置我們前端 build好的代碼，但是因?yàn)檫@個(gè)html目錄是只讀目錄，所以我一般都不會(huì)把項(xiàng)目放到html目錄下。/usr/local/nginx/conf目錄下有個(gè)非常重要的文件nginx.conf，用來配置nginx服務(wù)器。

image.png

因?yàn)檫@里的nginx.conf是只讀文件，不允許修改，所以輸入命令編輯時(shí)需要加 sudo 。
運(yùn)行sudo vim nginx.conf命令，打開nginx.conf文件，直接找到配置server 的地方，取消掉暫時(shí)用不到的配置，下面便是我的配置:

修改配置文件時(shí)用到的快捷鍵：
i：開始編輯
esc：編輯完退出編輯
:wq：保存編輯

server {
        # 啟動(dòng)后的端口
        listen       8080;   
        
        # 啟動(dòng)時(shí)的地址 可以改為你服務(wù)器的IP
        server_name  localhost;

        # 啟動(dòng)后，地址欄輸入: localhost:8080, 默認(rèn)會(huì)在/home/admin/dataops文件夾下找 index.html文件
        location / {
            # 項(xiàng)目build包存放的文件夾
            root   /home/admin/dataops;
            # 項(xiàng)目build包存放的文件夾下的主入口文件
            index  index.html; 
            # 當(dāng)用戶請(qǐng)求 http://localhost:8080/home 時(shí)，這里的 $uri 就是 /home。
            # try_files 會(huì)到硬盤里嘗試找這個(gè)文件。如果存在名為 /$root/home（其中 $root 是項(xiàng)目代碼安裝目錄）的文件，就直接把這個(gè)文件的內(nèi)容發(fā)送給用戶。 
            # 如果沒有找到這個(gè)文件，然后就看 $uri/，增加了一個(gè) /，也就是看有沒有名為 /$root/home/ 的目錄。
            # 如果還找不到，就會(huì) fall back 到 try_files 的最后一個(gè)選項(xiàng) /index.html，發(fā)起一個(gè)內(nèi)部 “子請(qǐng)求”，也就是相當(dāng)于 nginx 發(fā)起一個(gè) HTTP 請(qǐng)求到 http://localhost:8080/index.html。 
            # try_files方法讓 Ngxin 嘗試訪問后面得 $uri 鏈接，并進(jìn)根據(jù) /index.html 配置進(jìn)行內(nèi)部重定向。
            # 當(dāng)然try_files也可以以錯(cuò)誤代碼賦值，如try_files /index.php = 404 @apache，則表示當(dāng)嘗試訪問得文件返回404時(shí)，根據(jù)@apache配置項(xiàng)進(jìn)行重定向。
            try_files $uri $uri/ /index.html;
        }

        # 配置代理。由于項(xiàng)目是在本地起動(dòng)的，而我們的request需要請(qǐng)求其他ip地址。如果你的request鏈接為localhost:8080/abc/login?name=12345,那么下面配的就是location /abc
        location /api/ {
           proxy_pass   http://192.168.0.0:8080/;       
        }
        
        # 404頁面配置，頁面同樣在html文件夾中
        error_page  404    /404.html;
        location = /404.html {
            root   html;
        }
        

        # 其他錯(cuò)誤碼頁面配置
        error_page  500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # 一把前端不管用vue，還是react等框架，默認(rèn)都是單頁面的，如果你的項(xiàng)目是多頁面的，則需要用到下面的配置。
        # 因?yàn)榇藭r(shí)你的瀏覽器的url不是localhost:8080/#/login,而是 localhost:8080/a.html/#/login
        # 所以我們需要將路徑中a.html指向具體的html文件夾中的文件，因?yàn)槟J(rèn)是index.html
        location /a.html {
          alias html;
          index a.html;
        }
        location /b.html{
          alias html;
          index b.html;
        }
}

注意事項(xiàng)

1、在修改nginx.conf文件時(shí)，每行的末尾必須帶有分號(hào)";"，否則會(huì)報(bào)錯(cuò)。

當(dāng)修改好配置保存之后，需要重新回到 /usr/local/nginx/sbin 目錄下，重新啟動(dòng)Nginx，然后在瀏覽器下就可以看到你的項(xiàng)目頁面了。

二、nginx啟動(dòng)、重啟、關(guān)閉

啟動(dòng)

啟動(dòng)代碼格式：nginx安裝目錄地址 -c nginx配置文件地址
例如：/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf

重啟

1、驗(yàn)證nginx配置文件是否正確
方法一：進(jìn)入nginx安裝目錄 /usr/local/nginx/sbin/ 下，輸入命令./nginx -t看到如下顯示

nginx.conf syntax is ok
nginx.conf test is successful

說明配置文件正確！

image.png

方法二：在啟動(dòng)命令-c前加-t
image.png

2、重啟Nginx服務(wù)
方法一：進(jìn)入nginx可執(zhí)行目錄 /usr/local/nginx/sbin/ 下，輸入命令./nginx -s reload即可
image.png

方法二：在 /usr/local/nginx/sbin/ 目錄下，輸入ps -ef|grep nginx命令，查找當(dāng)前nginx進(jìn)程號(hào)，然后輸入命令kill -HUP 進(jìn)程號(hào)實(shí)現(xiàn)重啟nginx服務(wù)
image.png

停止

nginx的停止有三種方式：

  • 普通停止
    1、查看進(jìn)程號(hào)ps -ef|grep nginx
    image.png

    2、殺死進(jìn)程kill -QUIT 31927
    image.png
  • 快速停止
    1、查看進(jìn)程號(hào)ps -ef|grep nginx
    2、殺死進(jìn)程kill -TERM 9207 或 kill -INT 9388
    image.png
  • 強(qiáng)制停止pkill -9 nginx
    image.png

三、訪問頁面遇到的問題及解決辦法

1、訪問頁面出現(xiàn)500錯(cuò)誤信息

image.png

這個(gè)時(shí)候就要在服務(wù)器 /usr/local/nginx/logs 目錄下，打開 error.log 文件查看錯(cuò)誤信息。
我的錯(cuò)誤信息如下：

2019/11/22 00:58:38 [crit] 32603#0: *3 stat() "/root/photoAlbum/reactproject/index.html" failed (13: Permission denied), client: 115.193.160.204, server: localhost, request: "GET / HTTP/1.1", host: "xxx.xxx.xxx.xxx"
意思就是：2019/11/22“root / photoAlbum / reactproject / index?！笆?13:拒絕許可)

問題一：可能是由于啟動(dòng)用戶和nginx工作用戶不一致所致
運(yùn)行ps -ef|grep nginx查看進(jìn)程，發(fā)現(xiàn)啟動(dòng)用戶是 root ，nginx工作用戶是 nobody。

image.png

解決方法是：
進(jìn)入 /usr/local/nginx/conf 目錄，編輯 nginx.conf 文件，找到 user （默認(rèn)是 nobody ），然后打開注釋將 nobody 改為我自己的用戶 root。重新進(jìn)入 /usr/local/nginx/sbin 目錄，重啟 nginx，查看端口，發(fā)現(xiàn) nginx 工作用戶變成了root。現(xiàn)在這個(gè)問題就解決了，如果你只是這個(gè)問題的原因，那么重新刷頁面就可以看到自己的項(xiàng)目了。
image.png

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容