2023年7月18日发(作者：)

部署基于.netcore5.0的ABP框架后台Api服务端，以及使⽤Nginx部署Vue+。。。前⾯介绍了很多关于ABP框架的后台Web API 服务端，以及基于Vue+Element前端应⽤，本篇针对两者的联合部署，以及对部署中遇到的问题进⾏处理。ABP框架的后端是基于.net core5.0 的 core 应⽤，因此和常规的 core 应⽤部署⼀样；⽽Vue+Element前端应⽤则是基于nodejs的应⽤，部署⽅式⼜有所不同，这⾥介绍基于Nginx的部署。1、部署基于.netcore5.0的ABP框架后台Api服务端1）安装.net core 环境在部署 core服务前，需要在服务器中安装必须的环境。 在这⾥选择下载Hosting Bundle。因为Hosting Bundle包括了.Net Core运⾏时和IIS⽀持。下载完成以后，双击exe⽂件即可进⾏安装即可。 安装完成以后我们在命令⾏⾥⾯输⼊下⾯的命令，检查是否安装成功：dotnet --info如下图所⽰： 可以看到提⽰我们已经安装了.NET Core runtimes环境等所需软件。由于我们需要部署到IIS上⾯，所以安装完需使⽤下⾯的命令⾏重启IIS服务：net stop was /ynet start w3svc如下图所⽰：也可以在管理服务器⾥⾯重启启动IIS。2) 发布.net core项⽬服务器.net core环境弄好后，下⼀步就是准备好发布包，我们在ABP框架的Host项⽬进⾏发布。 发布选择⽂件发布，如下所⽰。 然后调整设置如下所⽰。

最后我们⽣成发布包，在对应的⽬录下，如下所⽰。G:***nReleasenet5.0publish

3）在服务器中设置IIS

把⽂件上传到服务器上，然后就是准备设置好IIS了。先在IIS服务器上创建⼀个⽹站，指定对应⽬录和端⼝等信息，如下所⽰。 然后找到对应的应⽤程序池，找到刚才创建的ABP应⽤程序池。设置.net clr版本为【⽆托管代码】 在其中把标识由ApplicationPoolIdentity修改为LocalSystem，以提供应⽤权限可以访问数据库。 最后点击【确定】按钮，⽹站及部署完成。我们就可以在浏览器⾥⾯进⾏浏览了。 顺利弄完 core的后端API服务，那么下⾯就需要同时把Vue+Element的前端部署在服务端了。

2、使⽤Nginx部署Vue+Element前端应⽤部署Vue+Element的前端应⽤，建议使⽤Nginx服务，这个对于Vue⾥⾯的URL代理转向设置⽐较⽅便些。Nginx (engine x) 是⼀个⾼性能的HTTP和反向代理web服务器。 nginx的DOS操作命令有⼏个，⽐较简单start nginx 启动nginx -s reload 刷新配置⽂件tasklist /fi "imagename eq " 查看所有的nginx进程taskkill /fi "imagename eq " /f 停⽌所有nginx进程定位到解压的⽬录，然后在DOS窗⼝中执⾏ start nginx 启动nginx服务。

也可以在cmd命令窗⼝输⼊命令 tasklist /fi "imagename eq " ，出现如下结果说明启动成功

nginx的配置⽂件是conf⽬录下的，默认配置的nginx监听的端⼝为80，如果80端⼝被占⽤可以修改为未被占⽤的端⼝即可。在处理⽹站的URL代理设置前，我们先回到我们Vue+Element 项⽬⾥⾯，我们在⾥⾯⼀般都有为跨域处理实现的代理设置，如下图所⽰。⽽发布应⽤到服务器的时候，我们需要配置它的反向代理设置。

使⽤Nginx部署Vue+Element前端应⽤的时候，我们可以利⽤它的反向代理设置配置即可。在nginx下的中修改nginx的配置⽂件，配置修改。根据我在Vue前端项⽬上的devServer的配置，我们在nginx的反向代理设置如下所⽰。 完整设置信息如下所⽰： server { listen 8000; server_name localhost; #charset koi8-r; #access_log logs/ main; location / { root html/dist; index ; try_files $uri $uri/ / =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 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 localhost:21021/api; }以上设置处理后，前端使⽤到Web API端的⽂件，反向代理也会带上对应的端⼝号，实现图⽚等上传API⽬录下的资源的正常访问了。