部署基于.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

部署基于.netcore5.0的ABP框架后台Api服务端,以及使用Nginx部署Vue+Element前端应用

在这里选择下载Hosting Bundle。因为Hosting Bundle包括了.Net Core运行时和IIS支持。下载完成以后,双击exe文件即可进行安装即可。

部署基于.netcore5.0的ABP框架后台Api服务端,以及使用Nginx部署Vue+Element前端应用

安装完成以后我们在命令行里面输入下面的命令,检查是否安装成功:

dotnet --info

如下图所示:

部署基于.netcore5.0的ABP框架后台Api服务端,以及使用Nginx部署Vue+Element前端应用

可以看到提示我们已经安装了.NET Core runtimes环境等所需软件。

由于我们需要部署到IIS上面,所以安装完需使用下面的命令行重启IIS服务:

net stop was /y
net start w3svc

如下图所示:

部署基于.netcore5.0的ABP框架后台Api服务端,以及使用Nginx部署Vue+Element前端应用

也可以在管理服务器里面重启启动IIS。

2) 发布.net core项目

服务器.net core环境弄好后,下一步就是准备好发布包,我们在ABP框架的Host项目进行发布。

部署基于.netcore5.0的ABP框架后台Api服务端,以及使用Nginx部署Vue+Element前端应用

发布选择文件发布,如下所示。

部署基于.netcore5.0的ABP框架后台Api服务端,以及使用Nginx部署Vue+Element前端应用

然后调整设置如下所示。

部署基于.netcore5.0的ABP框架后台Api服务端,以及使用Nginx部署Vue+Element前端应用

最后我们生成发布包,在对应的目录下,如下所示。

G:\***\Web.Host\bin\Release\net5.0\publish\ 

3)在服务器中设置IIS 

把文件上传到服务器上,然后就是准备设置好IIS了。

先在IIS服务器上创建一个网站,指定对应目录和端口等信息,如下所示。

部署基于.netcore5.0的ABP框架后台Api服务端,以及使用Nginx部署Vue+Element前端应用

然后找到对应的应用程序池,找到刚才创建的ABP应用程序池。设置.net clr版本为【无托管代码

部署基于.netcore5.0的ABP框架后台Api服务端,以及使用Nginx部署Vue+Element前端应用

在其中把标识由ApplicationPoolIdentity修改为LocalSystem,以提供应用权限可以访问数据库。

部署基于.netcore5.0的ABP框架后台Api服务端,以及使用Nginx部署Vue+Element前端应用

最后点击【确定】按钮,网站及部署完成。我们就可以在浏览器里面进行浏览了。

部署基于.netcore5.0的ABP框架后台Api服务端,以及使用Nginx部署Vue+Element前端应用

顺利弄完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,  建议下载稳定版本进行安装。

部署基于.netcore5.0的ABP框架后台Api服务端,以及使用Nginx部署Vue+Element前端应用

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,回车,出现以下页面说明启动成功。

部署基于.netcore5.0的ABP框架后台Api服务端,以及使用Nginx部署Vue+Element前端应用

也可以在cmd命令窗口输入命令 tasklist /fi "imagename eq nginx.exe" ,出现如下结果说明启动成功

部署基于.netcore5.0的ABP框架后台Api服务端,以及使用Nginx部署Vue+Element前端应用

nginx的配置文件是conf目录下的nginx.conf,默认配置的nginx监听的端口为80,如果80端口被占用可以修改为未被占用的端口即可。

在处理网站的URL代理设置前,我们先回到我们Vue+Element 项目里面,我们在vue.config.js里面一般都有为跨域处理实现的代理设置,如下图所示。

部署基于.netcore5.0的ABP框架后台Api服务端,以及使用Nginx部署Vue+Element前端应用

而发布应用到服务器的时候,我们需要配置它的反向代理设置。

使用Nginx部署Vue+Element前端应用的时候,我们可以利用它的反向代理设置配置即可。

在nginx下的conf\nginx.conf中修改nginx的配置文件,配置修改。

根据我在Vue前端项目上的devServer的配置,我们在nginx的反向代理设置如下所示。

部署基于.netcore5.0的ABP框架后台Api服务端,以及使用Nginx部署Vue+Element前端应用

完整设置信息如下所示:

    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目录下的资源的正常访问了。

部署基于.netcore5.0的ABP框架后台Api服务端,以及使用Nginx部署Vue+Element前端应用

上一篇:基于vue2.0+vuex+localStorage开发的本地记事本


下一篇:Vue3 + Element ui 后台管理系统