首页 / DncZeus / 正文

DncZeus前后端分离项目打包/发布/部署及注意事项

6015 2 1评论 发布于: 2019-07-11 读完约需5分钟

DncZeus前后端分离项目打包/发布/部署及注意事项

前言

DncZeus这个基于ASP.NET Core + Vue.js前后端分离的通用后台管理框架从发布到现在已有大半年时间了,期间很多使用者问到DncZeus项目怎么打包,怎么发布,怎么部署等等类似的问题。之前也未在DncZeus的文档中提及关于打包,发布和部署的相关资料,今天就以DncZeus为例为大家介绍:

  • DncZeus前端项目如何打包及注意事项?
  • DncZeus后端项目如何发布及注意事项?

DncZeus前端项目(DncZeus.App)打包

首先,我们要知道,DncZeus的前端项目是基于Vue.js实现,运行和打包都依赖于webpack(至于什么是webpack本文不作介绍,请自行查阅资料)。

如果要在本地运行DncZeus前端项目,我们得进入前端项目(DncZeus.App)的根目录,然后运行命令:

那么,如果要将DncZeus前端项目打包成可以部署到服务器的Web网站项目,我们得在前端项目(DncZeus.App)的根目录,运行如下命令:

此命令会在当前的前端项目的根目录中创建一个命名dist的文件夹,并将打包好的所有前端项目的静态文件放入其中,静态文件包含:.html,.css,.js以及所有前端项目可能所涉及的图片文件等等。

简而言之,npm run build命令打包生成的前端项目dist文件夹其实就是一个静态Web网站,你可以将这个Web网站部署到任何服务器环境,包括但不限于:IIS,Apache,Tomcat,Nginx等。

前端项目打包注意事项

在打包前端项目之前,你可能需要注意以下几个方面:

vue.config.js

请仔细核对vue全局配置文件vue.config.js中的配置,并将其中的选项值修改成你自己环境所需要的值,其中像这样的判断:process.env.NODE_ENV === 'production'表示生产环境,也就是需要发布到外部服务器的环境,举例如下:

以上这条语句表示:

如果你运行npm run dev命令,那么process.env.NODE_ENV的值为:dev,即本地开发环境
如果你运行npm run build命令,那么process.env.NODE_ENV的值为:production,即生产环境

请注意修改BASE_URL在不同环境中对应的值,说明如下:

config/index.js

前端项目配置文件位于:/config/index.js中,此文件中你可以配置前端项目的全局参数,如:title,’cookieExpires’,’useI18n’,’baseUrl’,’homeName’等等,详情请打开对应文件查看,有详细的注释文档。

其中需要特别注意的是:baseUrlauthUrl这两个属性,其中的dev表示开发环境,pro表示生产环境。

特别是pro对应的值,请一定修改成你实际的后端项目的路径,否则当你部署到生产环境后,API请求将失败,因为你的生产环境的API地址不正确。比如,如果我后端API项目的地址是:https://api.dnczeus.com/,那么baseUrlauthUrl的配置分别为:

DncZeus后端项目(DncZeus.Api)发布及注意事项

打包和发布

DncZeus后端项目(DncZeus.Api)是一个ASP.NET Core 2的项目,本地开发数据库为mssqllocaldb。

至于ASP.NET Core项目的发布,你可以使用Visual Studio 2019的发布功能,也可以使用dotnet命令行发布,这里不作具体的说明。

由于ASP.NET Core 是支持跨平台的,所以发布后的DncZeus后端项目可以部署到Windows,Linux等等操作系统。

后端项目注意事项

后端项目需要注意的是跨域的问题,默认是AllowAnyOrigin(),这是一种不安全的行为,请根据你的实际情况指定域,特别是在.NET Core 2.2+中,已不再支持AllowAnyOrigin()方法,请用WithOrigins()指定具体的域

版权声明:本作品系原创,版权归码友网所有,如未经许可,禁止任何形式转载,违者必究。

上一篇: C#/.NET应用程序编程开发中将一个对象(object)序列化成xml文档的方法有哪些?

下一篇: [C#/.NET]使用Dapper的扩展组件DapperExtensions自定义映射主键,列/表的别名以及忽略部分列

本文永久链接码友网 » DncZeus前后端分离项目打包/发布/部署及注意事项

分享扩散:

发表评论

登录用户才能发表评论, 请 登 录 或者 注册

热门评论

蓝染 (2020-07-12 14:53)

用户管理菜单编辑时提示:AutoMapper.AutoMapperMappingException:“Missing type map configuration or unsupported mapping.” 请问该怎么解决?
回复 赞(0)