部署基於.netcore5.0的ABP框架後臺Api服務端,以及使用Nginx部署Vue+Element前端應用
前面介紹了很多關於ABP框架的後臺Web API 服務端,以及基於Vue+Element前端應用,本篇針對兩者的聯合部署,以及對部署中遇到的問題進行處理。ABP框架的後端是基於.net core5.0 的Asp.net core 應用,因此和常規的Asp.net core 應用部署一樣;而Vue+Element前端應用則是基於nodejs的應用,部署方式又有所不同,這裡介紹基於Nginx的部署。
1、部署基於.netcore5.0的ABP框架後臺Api服務端
1)安裝.net core 環境
在部署asp.net core服務前,需要在伺服器中安裝必須的環境。
由於當前ABP的Web API是基於.net core 5的,因此,我們開啟.net core 5的頁面:https://dotnet.microsoft.com/download/dotnet/5.0
在這裡選擇下載Hosting Bundle。因為Hosting Bundle包括了.Net Core執行時和IIS支援。下載完成以後,雙擊exe檔案即可進行安裝即可。
安裝完成以後我們在命令列裡面輸入下面的命令,檢查是否安裝成功:
dotnet --info
如下圖所示:
可以看到提示我們已經安裝了.NET Core runtimes環境等所需軟體。
由於我們需要部署到IIS上面,所以安裝完需使用下面的命令列重啟IIS服務:
net stop was /y net start w3svc
如下圖所示:
也可以在管理伺服器裡面重啟啟動IIS。
2) 釋出.net core專案
伺服器.net core環境弄好後,下一步就是準備好釋出包,我們在ABP框架的Host專案進行釋出。
釋出選擇檔案釋出,如下所示。
然後調整設定如下所示。
最後我們生成釋出包,在對應的目錄下,如下所示。
G:\***\Web.Host\bin\Release\net5.0\publish\
3)在伺服器中設定IIS
把檔案上傳到伺服器上,然後就是準備設定好IIS了。
先在IIS伺服器上建立一個網站,指定對應目錄和埠等資訊,如下所示。
然後找到對應的應用程式池,找到剛才建立的ABP應用程式池。設定.net clr版本為【無託管程式碼】
在其中把標識由ApplicationPoolIdentity修改為LocalSystem,以提供應用許可權可以訪問資料庫。
最後點選【確定】按鈕,網站及部署完成。我們就可以在瀏覽器裡面進行瀏覽了。
順利弄完asp.net core的後端API服務,那麼下面就需要同時把Vue+Element的前端部署在服務端了。
2、使用Nginx部署Vue+Element前端應用
部署Vue+Element的前端應用,建議使用Nginx服務,這個對於Vue裡面的URL代理轉向設定比較方便些。
Nginx (engine x) 是一個高效能的HTTP和反向代理web伺服器。
首先到nginx服務網站下載對應的程式包進行安裝:http://nginx.org/en/download.html, 建議下載穩定版本進行安裝。
nginx的DOS操作命令有幾個,比較簡單
start nginx 啟動 nginx -s reload 重新整理配置檔案 tasklist /fi "imagename eq nginx.exe" 檢視所有的nginx程序 taskkill /fi "imagename eq nginx.exe" /f 停止所有nginx程序
定位到解壓的目錄,然後在DOS視窗中執行 start nginx 啟動nginx服務。
在使用前,我們需要檢查nginx是否啟動成功,直接在瀏覽器位址列輸入網址 http://localhost:80,回車,出現以下頁面說明啟動成功。
也可以在cmd命令視窗輸入命令 tasklist /fi "imagename eq nginx.exe" ,出現如下結果說明啟動成功
nginx的配置檔案是conf目錄下的nginx.conf,預設配置的nginx監聽的埠為80,如果80埠被佔用可以修改為未被佔用的埠即可。
在處理網站的URL代理設定前,我們先回到我們Vue+Element 專案裡面,我們在vue.config.js裡面一般都有為跨域處理實現的代理設定,如下圖所示。
而釋出應用到伺服器的時候,我們需要配置它的反向代理設定。
使用Nginx部署Vue+Element前端應用的時候,我們可以利用它的反向代理設定配置即可。
在nginx下的conf\nginx.conf中修改nginx的配置檔案,配置修改。
根據我在Vue前端專案上的devServer的配置,我們在nginx的反向代理設定如下所示。
完整設定資訊如下所示:
server { listen 8000; server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; location / { root html/dist; index index.html index.htm; try_files $uri $uri/ /index.html =404; } location /baseabp { proxy_set_header Host $host:21021; #圖片等資源需帶埠獲取 proxy_set_header x-forwarded-for $remote_addr; proxy_set_header X-Real-IP $remote_addr; proxy_pass http://localhost:21021; } location /abp { proxy_set_header Host $host:21021; #圖片等資源需帶埠獲取 proxy_set_header x-forwarded-for $remote_addr; proxy_set_header X-Real-IP $remote_addr; proxy_pass http://localhost:21021/api; }
以上設定處理後,前端使用到Web API端的檔案,反向代理也會帶上對應的埠號,實現圖片等上傳API目錄下的資源的正常訪問了。
&n