摘要：上一篇文章中大概嘗試安裝的一些過程以及在配置中出現的問題還有一些解決方式，那么在本次過程嘗試中，將進一步進行服務器的基礎配置，以及前端應用部署經過上次已經安裝至服務器中了，在這里面主要介紹一下部署相關所需要的配置，例如監聽端口服務轉發靜態資

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

經過上次 nginx 已經安裝至服務器中了，在這里面主要介紹一下部署相關所需要的配置，例如：監聽端口、服務轉發、靜態資源、ssl 證書（https） 的配置

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

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

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

服務器靜態的資源的轉發 其實有兩種寫法:

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

檢驗一下

當我們有后端服務時， 我們那么我們可以通過nginx的轉發配置，來讓我們的網站可以被訪問到

http {
    # 使用upstream（上游）模塊
    # server 監聽的端口
    # weight 權重
    # max_fails 最大允許失敗數
    # 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 監聽的域名 后有default 配置項的，注意 default 只能寫一個。

轉發說明：

upstream 中的 server 監聽的是服務器中啟動的端口

當請求匹配上 server server_name 時 就會 進行匹配 location

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

就會代理到 upstream 中的 server 監聽的端口

檢驗一下

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

當然還是要買免費的啦，個人需求，嘿嘿～

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

因為我們轉發是使用 nginx 來寫的 所以應該使用 nginx 版本證書類型，下載完成后，需要把這些證書放在服務器中，當然證書的位置還是要放在 nginx.conf 所在的文件夾中

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

http {
    # 使用upstream（上游）模塊
    # server 監聽的端口
    # weight 權重
    # max_fails 最大允許失敗數
    # fail_timeout max_fails次失敗后，暫停時間
    upstream blog {
        #ip_hash;
        server localhost:9931 weight=2 max_fails=2 fail_timeout=3s;
    }
    
    server {
        listen 443 ssl; # 一定要開啟 443 服務器端口
        server_name xxx.com;  # 需要ssl的域名
        ssl on;
        # root /cloud/node/;
        # index index.html index.htm;
        ssl_certificate  cert/a.pem; # ssl 證書在服務器中相對于 nginx.conf 的路徑
        ssl_certificate_key cert/a.key; # ssl 證書在服務器中相對于 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 項目的部署過程，還有 html 文件怎么在瀏覽器中訪問到

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

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

上傳至 服務器 后 我們可以用 pm2 來啟動 達到負載均衡, 守護進程的效果 pm2 start xxx

檢驗一下

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

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

下面請看我的文件目錄

先上傳至服務器然后 npm install or cnpm i

然后進入到相應的 應用文件目錄 執行 pm2 start npm --name "進程名稱" -- run start

部署完畢 blog nuxt

配置nginx靜態服務器

nginx server 匹配順序

nuxt 部署參考

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