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

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

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

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

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

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

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

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

檢驗(yàn)一下

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

http {
    # 使用upstream（上游）模塊
    # server 監(jiān)聽的端口
    # weight 權(quán)重
    # max_fails 最大允許失敗數(shù)
    # fail_timeout max_fails次失敗后，暫停時間
    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;
        }
    }
}

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

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

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

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

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

就會代理到 upstream 中的 server 監(jiān)聽的端口

檢驗(yàn)一下

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

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

當(dāng)購買完成以后，需要一定時間來等待證書簽發(fā)，如果簽發(fā)完成了以后，就來下載證書信息

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

然后我們就開始 修改 nginx.conf 文件吧

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

在這里 著重來說一下 vue 項(xiàng)目的部署過程，還有 html 文件怎么在瀏覽器中訪問到

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

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

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

檢驗(yàn)一下

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

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

下面請看我的文件目錄

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

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

部署完畢 blog nuxt

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

nginx server 匹配順序

nuxt 部署參考

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