部署基於.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的頁面：//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服務網站下載對應的程式包進行安裝：//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是否啟動成功，直接在瀏覽器地址欄輸入網址 //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目錄下的資源的正常訪問了。

Tags: ABP框架使用循序漸進VUE+Element