vue專案部署到阿里雲伺服器(windows - Nginx代理)

墨城發表於2023-03-27

專案構成:前端:vue+vant-ui,資料庫:mysql,後端:node.js

部署方式:nginx代理

一,首先要擁有自己的伺服器,阿里,騰訊都可以,我用的是阿里的
1679895899329.png

購買方式省略...

購買完成後,會跳到例項介面,也就是你的伺服器例項

建議先停止執行,改密碼後再重啟,

重啟後,按下win+r,輸入mstsc, 遠端連線你的伺服器;

image.png

image.png

地址就是你的伺服器的公網地址

image.png

使用者名稱windows系統的是Administrator

密碼是你自己設定的密碼,

點選確定後,就進入伺服器端了

1679896266103.png

開啟瀏覽器,下載nginx;

下載NGINX for Windows

下載地址:http://nginx.org/en/download.html

下載好了,直接全部解壓,注意路徑別帶中文,不然啟動nginx時會報錯

image.png

接著,先不用管伺服器,去打包專案,npm run build;

跑完後,會在你的專案裡生成一個dist資料夾

1679896424388.png

然後把dist資料夾傳送到你的伺服器上,放在html這個資料夾內

image.png

image.png

傳送方式可以具體百度一下,我這邊目前使用的MobaXterm工具,選擇RDP進行連線

image.png

接著回來修改conf資料夾下的nginx.conf檔案,也就是配置nginx;

image.png

注意:坑來了:複製這個地址後,你得到的地址是這樣的:C:\ngx\nginx-1.20.2\nginx-1.20.2\html\dist,

所有‘\’一律要改為‘\’因為‘\’會轉義,改為如上圖所示;

image.png

還有記得把 nginx.conf裡的

image.png

完成了以上工作後,回到這個介面
注:如果在nginx中有轉發配置,可以參考這篇文章:nginx各種代理配置

image.png

點選nginx.exe,開啟,你會發現只是一閃而過,別在意,nginx啟動就是這樣的

我們可以在工作管理員檢視有沒有啟動;

image.png

只要看到這個就說明啟動成功了

接著,回到你的阿里雲控制檯,例項這裡去配置安全組,也就是開放你的埠,讓外網能夠訪問。

點選手動新增,新增8080埠;,儲存。

然後重啟nginx;

相關文章