Server 主機屋雲服務器 寶塔面板 部署nginx反向代理的vue項目

圖文記錄雲服務器上部署需要nginx反向代理的vue項目；

一、先登錄並購買雲服務器，根據自己需求購買，此處不詳細介紹；

二、登錄后如下圖，點擊進入雲服務器界面；

三、在雲服務器界面點擊管理，進入管理界面，操作如下；

四、如未安裝操作系統（購買后默認是沒安裝的），點擊進入安裝操作系統界面，操作如下；

五、按下圖1到4步驟操作，進行操作系統的安裝，安裝完畢后點擊圖中第4步所指鏈接進入操作系統（此處為寶塔面板）；

六、進入寶塔面板，先安裝運行環境、ftp等軟件，否則無法繼續后續操作；

七、安裝軟件界面如下圖，根據軟件說明自選安裝；

八、從側欄導航進入首頁並點擊添加網站；

九、添加網站操作如下圖所示，在“域名”輸入框中填寫域名或ip然后添加端口即可，其他資料會自動補全，亦可自行修改，注意不要占用其他默認開通的端口，填寫完畢點擊提交即完成添加網站；

如果使用nginx反向代理（要先安裝nginx），根目錄填寫nginx中的html目錄，如：D:\BtSoft\WebSoft\nginx\html，並且通過ftp上傳打包好的靜態文件到html目錄內，網站入口默認為html目錄中的index文件；

十、點擊側欄網站導航，進入網站管理界面，可以看到所添加的網站，點擊設置按鈕可進行設置修改；

十一、操作如下圖，到此網站基本部署已經完成，可輸入網站域名，或直接點擊域名進行訪問；

 

如需設置nginx反向代理還需添加一些設置，原理和Nginx反向代理解決生產環境跨域一樣，操作如下圖

找到nginx.conf進行編輯

添加代碼：

        location /api {
            rewrite  ^.+api/?(.*)$ /$1 break;
            include  uwsgi_params;
            proxy_pass   https://www.xxxx.cn:111;
        }

 再次打開自己的網站：

數據接口獲取正常，一切皆OK~