前面介紹了很多關於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