寫給前端的nginx教程

以下文章來源于vkcyan的開發(fā)隨筆 ，作者吳凱

寫給前端新人的nginx教程



前言
我相信大部分前端新手是接觸不到部署相關(guān)的工作的，一般都是將代碼包交給后端，或者通過CI，F(xiàn)TP完成代碼的更新，至于代碼如何部署，如何從域名到前端代碼包，很多前端仔沒有實際操作過，自然是不知道的，這篇文章就是要幫助未接觸過部署的人學(xué)會在服務(wù)器上線部署一個前端項目，在這個主線中帶大家慢慢的熟悉nginx

記得在2017年暑假，那時候大二還沒開學(xué)，當(dāng)時我只會寫一點簡單代碼，linux和運維完全沒接觸過，一沖動在阿里云購買了一個服務(wù)器，外加一個域名，域名現(xiàn)在已經(jīng)不能訪問了；那時候單純的興趣使然，想搭建一個網(wǎng)站，因為實力不足，也不知道求助別人，前前后后折騰了一個月，最終竟然成功在服務(wù)器上面部署了wordpress服務(wù)，后面域名備案也成功了；

依稀記得在盛夏的傍晚，我坐在慢慢暗下來的客廳，頭上還殘留著因為緊張流下的細(xì)汗，眼睛因為專注而干澀，面對不太看得懂的文檔，一遍一遍嘗試；我自然不希望大家在這上面浪費時間，這也是寫這篇文章的初衷。

前置知識
一個云服務(wù)器，阿里云，騰訊云，xx云都行，首次購買或者學(xué)生認(rèn)證都是有很大的優(yōu)惠（本文以阿里云為例子）
了解linux基礎(chǔ)命令，也就是對各種文件的增刪改查
本教程基于CentOS 7.5系統(tǒng)，如果是圖形化界面，或者其他系統(tǒng)，命令可能不完全一致，但是流程都是一致的，建議看對應(yīng)教程
相關(guān)工具 上傳文件FTP[1] ssh工具 阿里云自帶
重要: 如果linux基礎(chǔ)命令不會。下面的也不用看了，立刻去學(xué)

搭建環(huán)境
購買一個ECS云服務(wù)器，前段時間折扣，一年1核2G 40塊錢不到~，新人長期存在優(yōu)惠

連接服務(wù)器
通過遠(yuǎn)程工具（CRT，Xshell）或者自帶的遠(yuǎn)程連接進(jìn)入自己的服務(wù)器，連接方式選擇公網(wǎng)ip



image-20220113105611506
安裝nginx
CentOS自帶yum命令，這個命令很關(guān)鍵，自行了解

執(zhí)行命令

yum install nginx // 中途遇到需要確認(rèn)的，直接確認(rèn)即可
復(fù)制代碼
安裝完成后,主機中便有了nginx服務(wù)，相關(guān)命令如下，啟動完成后

nginx
復(fù)制代碼
啟動完成后，瀏覽器訪問公網(wǎng)IP,就可以訪問到nginx的默認(rèn)主頁



到這一步就算是nginx部署成功了

nginx相關(guān)文件路徑
/etc/nginx/ // 配置文件
/usr/share/nginx/ // 默認(rèn)前端代碼存放處
復(fù)制代碼
默認(rèn)配置在/etc/nginx/nginx.conf,nginx根據(jù)默認(rèn)配置，監(jiān)聽80端口，80端口指定了/usr/share/nginx/html這個文件夾，于是你訪問公網(wǎng)ip -> 公網(wǎng)ip:80 -> /usr/share/nginx/html,于是"Welcome to CentOS"便呈現(xiàn)在你的面前

如果你希望不顯示默認(rèn)的頁面，而是顯示你自己寫的項目，直接替換/etc/nginx/nginx.conf中的root,字段為自己程序包的路徑



在7777端口上搭建一個站點
我們的代碼除了部署在默認(rèn)80端口上面，還可以其他端口上，例如8888，7777，等等

接下來我們就在一個自定義的端口上面部署一個站點

這里我們需要注意nginx.conf中的一行配置

含義：在目標(biāo)文件夾下面所有nginx的配置文件都會自動生效



根據(jù)配置文件的提示我們到/etc/nginx/conf.d/下面，建立test.conf，nginx.conf根據(jù)通配符匹配conf.d/下的配置文件

通過·vi 寫入內(nèi)容

server {
    listen       7777;
    server_name  _;

    root /usr/share/nginx/test;
}
復(fù)制代碼
再去文件夾/usr/share/nginx/test下建立一個index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div>我是7777端口</div>
</body>
</html>
復(fù)制代碼
最后重啟nginx

nginx重啟是瞬間的，沒有報錯就是重啟成功

nginx -s reload
復(fù)制代碼





訪問我們部署的項目ip:7777

然后你會發(fā)現(xiàn)訪問不了，最終訪問超時(==)，這是因為服務(wù)器限制了可訪問端口，此時需要到云管理后臺設(shè)置安全組



在ESC服務(wù)器后臺增加安全組規(guī)則



之后就可以正常訪問了！



至此，便完成了第一個nginx項目的部署

部署一個vue項目
通過上面的例子，我們已經(jīng)可以完成一個自定義站點的部署了，那么真實項目呢，例如將一個vue項目部署到3006端口

首先編寫xxx.conf
server {
    listen       3006;
    server_name  _;
    
   # 開啟gzip相關(guān)配置
    gzip on;
    gzip_static on;
    gzip_min_length 2k;
    gzip_buffers 4 8k;
    gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/x-icon application/javascript;
    gzip_comp_level 9;
    gzip_disable "MSIE [1-6].";

  # 站點代碼路徑
    root         /usr/share/nginx/client;
  # 單頁應(yīng)用必須設(shè)置（刷新404問題）
    location / {
     try_files $uri $uri/ /index.html;
    }
}

復(fù)制代碼
將打包之后的代碼，通過FTP上傳代碼到目標(biāo)文件夾/usr/share/nginx/client（注意文件夾名稱）
重啟nginx nginx -s reload
這邊完成了一個站點的部署！是不是很簡單



綁定域名
直接拿ip+端口給別人訪問是不太好的，大家都給自己站點綁定上一個好記憶的域名，那么nginx如何綁定域名呢？

購買一個域名wanwang.aliyun.com/domain/，備案域…[2]
備案完成后，域名就可以使用了
我們需要去修改我們的nginx配置，將server_name的值修改為需要綁定的域名即可；

server {
    listen       3006;
    server_name  xxx.com;
// ....
復(fù)制代碼
增加https支持
申請一個https證書，數(shù)字證書管理[3]，以阿里云為例子，國內(nèi)云廠商都有
將證書放在服務(wù)器中你可以記得住的文件夾里面
修改nginx配置
server { // # 將當(dāng)前域名的http自動打到https
        listen  80;
        server_name     xxx.com;
        rewrite ^(.*)$  https://$host$1 permanent;
}

server {
    listen       443 ssl http2;
    server_name  xxx.com;
    ssl_certificate xxxx/yy.pem; # 證書
    ssl_certificate_key xxxx/yy.key; # 證書秘鑰

    # ssl驗證相關(guān)配置
    ssl_session_timeout  5m;    #緩存有效期
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;    #加密算法
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;    #安全鏈接可選的加密協(xié)議
    ssl_prefer_server_ciphers on;   #使用服務(wù)器端的首選算法
    #charset koi8-r;
    #access_log  /var/log/nginx/host.access.log  main;
    
  root   /usr/share/nginx/client;
    location / {   
      try_files $uri $uri/ /index.html;
    }
}
復(fù)制代碼
一些常見問題
注意：本文使用linux版本為centos7.5，版本不同配置不一定一樣

執(zhí)行nginx -s reload,重啟命令之后，沒反應(yīng)是正常，nginx重啟很來就是毫秒級的

重啟報錯
這個就比較復(fù)雜了，報錯的可能性太多了，所以無法給出參考案例

建議按如下流程排查問題

翻譯報錯信息，如果提示某一行，某一列錯誤，直接改配置文件
翻譯了也看不懂，帶著你的liunx版本以及報錯去百度（google效率更高）
實在搞不定，但是別人都正常，考慮可能存在之前誤操作的可能性，直接重做系統(tǒng)，重新配置
訪問404報錯
ngxin中沒有配置該端口，檢查nginx配置中的listen字段是否配置錯誤，是否忘記重啟

訪問502報錯
nginx啟動/重啟成功后，訪問站點出現(xiàn)502，檢查nginx配置中root字段 指向的文件地址是否錯誤，是否存在可訪問文件

訪問長時間無反應(yīng)
檢查云服務(wù)器的安全組策略，是否開放了你當(dāng)前訪問的端口

相關(guān)推薦
基于ssh的輕量級前端更新方案 文章鏈接[4]，個人項目用這個非常ok，非常方便，一行命令更新代碼

基于gitLab CI/CD的前端更新方案 文章鏈接[5]，公司項目建議用這個

結(jié)語
雖然部署一個站點，僅僅是用到nginx，但是涉及到的知識點還是很多的，一個有經(jīng)驗的開發(fā)人員部署一個站點，或許半小時就弄完了，但是對新手來說遇到一個報錯都是滅頂之災(zāi)

如果遇到了錯誤，一定要仔細(xì)檢查報錯信息，百度百度基本都能得到答案，如果實在搞不定，直接重做云服務(wù)器系統(tǒng)，重頭再來；

小綠與小藍(lán)，https://juejin.cn/post/7052952117425733663

作者：吳凱



歡迎關(guān)注微信公眾號 ：前端晚間課

更多文章，收錄于小程序-互聯(lián)網(wǎng)小兵