技能學習：學習使用Node.js + Vue.js，開發前端全棧網站-14-5.配置Nginx反向代理

我們需要根據域名通路項目，那麼就需要配置Nginx反向代理，讓通路的域名轉發到localhost:3000上。

1.vscode安裝remote-ssh插件

由于要操作很多檔案，是以我們需要一個可視化工具進行修改項目。

vscode中的remote-ssh插件可以如本地操作一樣，直接在本地操作伺服器項目。類似寶塔。

插件搜尋remote-ssh：

安裝完成後，左側導航欄就會出現遠端連接配接圖示：

2.使用remote-ssh進行遠端連接配接

在遠端資料總管中找到設定圖示，選擇出現的第一條内容：

此時會出現配置檔案，按照其格式寫入我們的域名（或ip位址）等資訊：

儲存後會陳列在左側遠端連接配接視窗，滑鼠移入會出現連接配接圖示，點選連接配接：

根據提示選擇網站伺服器的系統類型，再輸入密碼：

打開檔案夾找到我們需要配置的頁面，此時我們進入伺服器的根配置檔案夾/etc/nginx/：

再次輸入密碼，進入頁面：

3.配置nginx反向代理

（1）使用DigitalOcean網站nginxconfig.io工具

直接引擎輸入nginxconfig.io，由于是外網是以需要多等一會，進入頁面後選擇node.js，開始配置。

其中子域名重定向暫時不用啟用，另外https端口也不要啟用，其他預設：

來到下方，下載下傳配置檔案：

打開，檢視其中内容，其中網站伺服器中已存在兩個檔案夾，直接将其内部檔案拖拽進已有的兩個檔案夾中。.io檔案夾直接拖入這個目錄中，.conf檔案是剛才網站的配置檔案，不用管它：

如果不能直接拖拽，就建立同名檔案，然後複制内容進去，最終呈現：

4.配置完成後重新開機伺服器

service nginx reload           

如果跟我一樣報錯，可以按照網站中的提示再次輸入到終端執行一遍：

根據上線指令重新開機nginx服務：

sudo nginx -t && sudo systemctl reload nginx           

然後重新開機伺服器，重新整理頁面，此時跳出502錯誤，502表示nginx伺服器沒問題：

此時重新進入網站伺服器，pm2檢視網站是否啟動項目：

可見重新開機伺服器後pm2項目也關閉了，我們再次啟動pm2項目：

開啟後，可以進入頁面了，此時進入admin端：

沒問題，但是此時是無法登入背景的，因為網站伺服器中資料庫資料沒有資料。

下篇文章學習如何将資料導入到網站項目資料庫中。