前面介紹了很多關于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目錄下的資源的正常訪問了，
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/232807.html
標籤：.NET技术