專案構成:前端:vue+vant-ui,資料庫:mysql,後端:node.js
部署方式:nginx代理
一,首先要擁有自己的伺服器,阿里,騰訊都可以,我用的是阿里的
購買方式省略...
購買完成後,會跳到例項介面,也就是你的伺服器例項
建議先停止執行,改密碼後再重啟,
重啟後,按下win+r,輸入mstsc, 遠端連線你的伺服器;
地址就是你的伺服器的公網地址
使用者名稱windows系統的是Administrator
密碼是你自己設定的密碼,
點選確定後,就進入伺服器端了
開啟瀏覽器,下載nginx;
下載NGINX for Windows
下載地址:http://nginx.org/en/download.html;
下載好了,直接全部解壓,注意路徑別帶中文,不然啟動nginx時會報錯
接著,先不用管伺服器,去打包專案,npm run build;
跑完後,會在你的專案裡生成一個dist資料夾
然後把dist資料夾傳送到你的伺服器上,放在html這個資料夾內
傳送方式可以具體百度一下,我這邊目前使用的MobaXterm工具,選擇RDP進行連線
接著回來修改conf資料夾下的nginx.conf檔案,也就是配置nginx;
注意:坑來了:複製這個地址後,你得到的地址是這樣的:C:\ngx\nginx-1.20.2\nginx-1.20.2\html\dist,
所有‘\’一律要改為‘\’因為‘\’會轉義,改為如上圖所示;
還有記得把 nginx.conf裡的
完成了以上工作後,回到這個介面
注:如果在nginx中有轉發配置,可以參考這篇文章:nginx各種代理配置
點選nginx.exe,開啟,你會發現只是一閃而過,別在意,nginx啟動就是這樣的
我們可以在工作管理員檢視有沒有啟動;
只要看到這個就說明啟動成功了
接著,回到你的阿里雲控制檯,例項這裡去配置安全組,也就是開放你的埠,讓外網能夠訪問。
點選手動新增,新增8080埠;,儲存。
然後重啟nginx;