摘要：上一篇文章中大概嘗試安裝的一些過(guò)程以及在配置中出現(xiàn)的問(wèn)題還有一些解決方式，那么在本次過(guò)程嘗試中，將進(jìn)一步進(jìn)行服務(wù)器的基礎(chǔ)配置，以及前端應(yīng)用部署經(jīng)過(guò)上次已經(jīng)安裝至服務(wù)器中了，在這里面主要介紹一下部署相關(guān)所需要的配置，例如監(jiān)聽(tīng)端口服務(wù)轉(zhuǎn)發(fā)靜態(tài)資

OK! 上一篇文章中大概嘗試安裝mysql、nginx、nodeJs、pm2 的一些過(guò)程以及在配置中出現(xiàn)的問(wèn)題還有一些解決方式，那么在本次過(guò)程嘗試中，將進(jìn)一步進(jìn)行服務(wù)器的基礎(chǔ)配置，以及前端應(yīng)用 node、pm2 部署

經(jīng)過(guò)上次 nginx 已經(jīng)安裝至服務(wù)器中了，在這里面主要介紹一下部署相關(guān)所需要的配置，例如：監(jiān)聽(tīng)端口、服務(wù)轉(zhuǎn)發(fā)、靜態(tài)資源、ssl 證書(shū)（https） 的配置

在我們沒(méi)有后端服務(wù)的時(shí)候，只是想要寫(xiě)一些demo或者靜態(tài)頁(yè)面時(shí)，就可以使用nginx作為靜態(tài)資源服務(wù)器，可以被外網(wǎng)訪問(wèn)到，以下就是 具體的配置了，可以在nginx.conf 中建立二級(jí)域名，來(lái)搭建。

http {
    server {
        listen            80; # 監(jiān)聽(tīng)的端口號(hào)
        server_name        static.scrscript.com # 轉(zhuǎn)發(fā)的名稱(chēng) 也就是二級(jí)域名 不過(guò)二級(jí)域名雖然不需要重新備案但是 域名解析要有 static 關(guān)鍵字
        location /  {
            root        /cloud/static
        }
    }
}

說(shuō)明： 監(jiān)聽(tīng)的 80 端口 然后 轉(zhuǎn)發(fā)名稱(chēng)為 server_name 所對(duì)應(yīng)的靜態(tài)路徑為 /cloud/static/ 其實(shí)就是 location root + localtioon name 這樣就nginx就可以讀取到 /cloud/static/ 目錄下的文件了，server_name 設(shè)置二級(jí)域名時(shí)前綴后面最好跟的是自己的域名 自定義前綴+自己的域名，而域名解析最好要加上*得以匹配其他二級(jí)域名來(lái)訪問(wèn)

服務(wù)器靜態(tài)的資源的轉(zhuǎn)發(fā) 其實(shí)有兩種寫(xiě)法:

location / {
    root /cloud/static # 這種寫(xiě)法 主要是 location root + location name
    # alias /cloud/static # 這種寫(xiě)法就睡 就是直接location alias  的路徑信息了
}

檢驗(yàn)一下

當(dāng)我們有后端服務(wù)時(shí)， 我們那么我們可以通過(guò)nginx的轉(zhuǎn)發(fā)配置，來(lái)讓我們的網(wǎng)站可以被訪問(wèn)到

http {
    # 使用upstream（上游）模塊
    # server 監(jiān)聽(tīng)的端口
    # weight 權(quán)重
    # max_fails 最大允許失敗數(shù)
    # fail_timeout max_fails次失敗后，暫停時(shí)間
    upstream blog {
        #ip_hash;
        server localhost:9931 weight=2 max_fails=2 fail_timeout=3s;
    }
    
    server {
        listen            80 default;
        server_name        _;
        location / {
            proxy_pass: http://blog;
        }
    }
}

說(shuō)明：在請(qǐng)求的過(guò)程中 如果請(qǐng)求的地址 與 server_name 匹配上那么就會(huì)采用這個(gè)配置 如果都不匹配 那么就會(huì)先行查看 listen 監(jiān)聽(tīng)的域名 后有default 配置項(xiàng)的，注意 default 只能寫(xiě)一個(gè)。

轉(zhuǎn)發(fā)說(shuō)明：

upstream 中的 server 監(jiān)聽(tīng)的是服務(wù)器中啟動(dòng)的端口

當(dāng)請(qǐng)求匹配上 server server_name 時(shí) 就會(huì) 進(jìn)行匹配 location

在匹配成功 location 中的反向代理proxy_pass 為 http:// + upstream 時(shí)

就會(huì)代理到 upstream 中的 server 監(jiān)聽(tīng)的端口

檢驗(yàn)一下

平常我們部署的時(shí)候，會(huì)發(fā)現(xiàn)瀏覽器的地址欄會(huì)有(http://) 然后會(huì)有不安全的字樣, 哼～！作為強(qiáng)迫癥可是不想有這種字樣，那么我們就來(lái)配置https 安全吧

當(dāng)然還是要買(mǎi)免費(fèi)的啦，個(gè)人需求，嘿嘿～

當(dāng)購(gòu)買(mǎi)完成以后，需要一定時(shí)間來(lái)等待證書(shū)簽發(fā)，如果簽發(fā)完成了以后，就來(lái)下載證書(shū)信息

因?yàn)槲覀冝D(zhuǎn)發(fā)是使用 nginx 來(lái)寫(xiě)的 所以應(yīng)該使用 nginx 版本證書(shū)類(lèi)型，下載完成后，需要把這些證書(shū)放在服務(wù)器中，當(dāng)然證書(shū)的位置還是要放在 nginx.conf 所在的文件夾中

然后我們就開(kāi)始 修改 nginx.conf 文件吧

http {
    # 使用upstream（上游）模塊
    # server 監(jiān)聽(tīng)的端口
    # weight 權(quán)重
    # max_fails 最大允許失敗數(shù)
    # fail_timeout max_fails次失敗后，暫停時(shí)間
    upstream blog {
        #ip_hash;
        server localhost:9931 weight=2 max_fails=2 fail_timeout=3s;
    }
    
    server {
        listen 443 ssl; # 一定要開(kāi)啟 443 服務(wù)器端口
        server_name xxx.com;  # 需要ssl的域名
        ssl on;
        # root /cloud/node/;
        # index index.html index.htm;
        ssl_certificate  cert/a.pem; # ssl 證書(shū)在服務(wù)器中相對(duì)于 nginx.conf 的路徑
        ssl_certificate_key cert/a.key; # ssl 證書(shū)在服務(wù)器中相對(duì)于 nginx.conf 的路徑
        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;
        ssl_prefer_server_ciphers on;
        location / {
            proxy_pass http://blog;
        }
    }
    
    server {
        listen            80 default;
        server_name        _;
        rewrite ^(.*)$  https://$host$1 permanent; # 重定向到 https
        location / {
            proxy_pass: http://blog;
        }
    }
}

注意一定要 重啟 nginx nginx -s reload

哈哈哈哈 小鎖 還有 https

在這里 著重來(lái)說(shuō)一下 vue 項(xiàng)目的部署過(guò)程，還有 html 文件怎么在瀏覽器中訪問(wèn)到

其實(shí)在上面 nginx 中，我們配置了 nginx 靜態(tài)資源服務(wù)器，其實(shí)靜態(tài)資源的部署 非常簡(jiǎn)單 就是直接把 html 文件 放在靜態(tài)資源所配置的目錄就可以了， 這樣我們平時(shí)寫(xiě)的項(xiàng)目 或者 demo 都可放在這個(gè)目錄下，來(lái)實(shí)現(xiàn)瀏覽

blog 的 后端是使用的是 node-express 腳手架，在 express 腳手架中 express.static 定義的是 靜態(tài)資源所在的位置，我們可以直接放在 項(xiàng)目的根目錄下 然后啟動(dòng)項(xiàng)目 就可以直接訪問(wèn)到了。
靜態(tài)資源訪問(wèn)路徑： app.use("" ,express.static(path.join(__dirname, "dist")));
請(qǐng)看我的項(xiàng)目結(jié)構(gòu)

上傳至 服務(wù)器 后 我們可以用 pm2 來(lái)啟動(dòng) 達(dá)到負(fù)載均衡, 守護(hù)進(jìn)程的效果 pm2 start xxx

檢驗(yàn)一下

nuxt 是 vue 的 服務(wù)端渲染，有利于 seo 的服務(wù)端渲染應(yīng)用框架，作為前臺(tái)應(yīng)用 當(dāng)然是想要自己寫(xiě)的文章 能讓更多人搜索到，nuxt 當(dāng)然是我的不二之選，哈哈哈哈，OK 我們來(lái)說(shuō)下 nuxt 如何來(lái)部署吧

首先 我們應(yīng)該先給 nuxt 應(yīng)用執(zhí)行打包命令 npm run build 打包完成后，我們可以把有用的文件事先剔除出來(lái)

下面請(qǐng)看我的文件目錄

先上傳至服務(wù)器然后 npm install or cnpm i

然后進(jìn)入到相應(yīng)的 應(yīng)用文件目錄 執(zhí)行 pm2 start npm --name "進(jìn)程名稱(chēng)" -- run start

部署完畢 blog nuxt

配置nginx靜態(tài)服務(wù)器

nginx server 匹配順序

nuxt 部署參考

基礎(chǔ)的配置 基本上已經(jīng)走完一遍了，其實(shí)如果是 部署頻率低的情況下 那么這樣一遍遍部署 其實(shí)是費(fèi)不了多大事，但是呢，在初期的時(shí)候總有不少東西要改，那這樣一遍遍部署 不僅繁瑣 而且還浪費(fèi)我們 寶貴的時(shí)間那么，下次我將配置 docker and jenkins 自動(dòng)化部署，省時(shí)又省力～，哈哈哈