我們需要根據域名訪問項目,那么就需要配置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端:

沒問題,但是此時是無法登錄后臺的,因為網站服務器中數據庫數據沒有數據。
下篇文章學習如何將數據導入到網站項目數據庫中。
- tp6+vue
- 1.工具和本地環境
- 2.啟動項目
- 3.路由、模型與數據庫操作
- 4.優化后端接口,前端使用axios實現接口功能
- 5.用戶登錄,bcrypt(hash)加密與驗證
- 6.用戶登錄(二),token驗證
- 7.分類的模型關聯和通用CRUD接口
- 8.使用vue的markdown編輯器并批量上傳圖片
- Node.js + Vue.js
- 工具,本地環境
- 2.1啟動項目
- 3.element-ui和vue-router路由的安裝和使用
- 4.使用axios,并創建接口上傳數據到mongodb數據庫
- 5.mongoodb數據庫的“刪、改、查”操作
- 6.mongodb數據庫無限層級的數據關聯(子分類)
- 7.使用mongodb數據庫關聯多個分類(關聯多個數據)
- 8.server端使用通用CRUD接口
- 9.圖片上傳
- 10.vue的富文本編輯器(vue2-editor)
- 11.動態添加分欄上傳多組數據
- 12-1.管理員模塊
- 13-1.搭建前臺web端頁面
- 1.使用sass工具搭建前臺web端頁面
- 2.sass工具的變量
- 3.使用flex布局并開始搭建web端
- 4.vue廣告輪播圖,并使用接口引入數據
- 5.使用字體圖標(iconfont)
- 6.卡片組件的封裝
- 14-1.生產環境編譯
- 1.環境編譯
- 2.購買域名服務器并解析域名到服務器
- 3.nginx配置web服務器并安裝網站環境
- 4.git拉取代碼到服務器
- 5.配置Nginx反向代理
- 6.遷移本地數據到服務器(mongodump)
- uni
- 1.工具&本地環境
- 2.頁面制作
- 3.頁面制作、組件與輪播
- 4.頁面跳轉與橫向滑動
- 5.用戶授權登錄和用戶信息獲取
- 6.用戶注冊和數據存儲
- 7.用戶填寫表單信息