[译]用于企业应用程序的Angular2和WebApi(SPA)-第8部分-构建和部署应用程序
By robot-v1.0
本文链接 https://www.kyfws.com/applications/bui-zh/
版权声明 本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!
- 7 分钟阅读 - 3397 个词 阅读量 0[译]用于企业应用程序的Angular2和WebApi(SPA)-第8部分-构建和部署应用程序
原文地址:https://www.codeproject.com/Articles/1151588/bui
原文作者:tranthanhtu.vn
译文由本站 robot-v1.0 翻译
前言
In this article, we will learn how to build and deploy the code
在本文中,我们将学习如何构建和部署代码
系列中的其他文章(Other Articles in the Series)
- 总览(Overview)
- 新增权限(Add new Permission)
- 项目结构(Project structure)
- 多国语言(i18n)(Multi-Languages (i18n))
- DI&IoC-为什么和为什么不?(DI & IoC - Why and Why not?)
- RESTful和Web Api(RESTful & WebApi)
- 管理应用程序生命周期(Manage Application Lifecycle)
- 带有Angular 2的TinyERP的新版本(打字稿)(New version of TinyERP with Angular 2 (typescript))
- CQRS:避免企业应用程序中的性能问题(基本)(CQRS: Avoiding performance issues in enterprise app (basic))
- 多个数据存储:扩展存储库(第1部分)(Multiple data-stores: Scale your repository (Part 1))
- 多个数据存储:扩展存储库(第2部分)(Multiple data-stores: Scale your repository (Part 2))
我可以从这篇文章中学到什么?(What Can I Get From This Article?)
在本文中,我将介绍如何以两种模式将应用程序部署到生产环境:(In this article, I will introduce how to deploy the app to production environment in 2 modes:)
- 客户端和Api在单独的域中(Client and Api in separated domain)
- 客户端和Api在同一域中(Client and Api in the same domain)
如何在分离域中部署客户端和API?(What Should I Do To Deploy Client and API in Separated Domain?)
好的,将客户端和Api部署在不同的域上非常简单,如下所示:(OK, for deploying the client and Api on different domains is rather simple as below:)
- 更新配置(在(Update configuration (in)app.common/configurations/configuration.release.config(app.common/configurations/configuration.release.config))用于生产环境() for production environment)
- 使用Visual Studio编辑器发布Api代码(Publish code of Api using Visual Studio Editor)
- 将Api代码上传到Api域(Upload Api code to Api domain)
- 更新资料(Update)
ApiBaseUrl
在(in)**app/config/appConfig.ts(app/config/appConfig.ts)**指向Api域(point to Api domain) - 建立客户端(Build client side)
- 将客户端上传到域以供客户端使用(Upload client to domain for client side)
1.更新生产环境的配置(在app.common/configurations/configuration.release.config中)(1. Update Configuration (in app.common/configurations/configuration.release.config) for Production Environment)
在Visual Studio中打开代码,然后导航到"(Open your code in Visual Studio and navigate to “)**配置/(configurations/)configuration.release.config(configuration.release.config)**在(” in) app.common
项目如下:(project as below:)
<?xml version="1.0" encoding="utf-8" ?>
<appconfiguration>
<authentication tokenExpiredAfterInMinute="20" ></authentication>
<paging pageSize="10"></paging>
<databases>
<clear />
<add name="DefaultConnection"
database="MyERP" server="<server>" port="<port>"
userName="<username>" password="<pwd>"
dbType="MSSQL" default="true"></add>
</databases>
<localization defaultLanguageCode="en"></localization>
<uitest reportTemplate="templates/report.xlsx"
notificationReceiver="thanhtuit27@gmail.com"
zipFile="report_{0}.zip" environtmenFile="environments.xml"
basePath="C:\data\projects\myERP\api\App.UI.Test\config\"
baseOutput="C:\data\projects\myERP\api\App.UI.Test\output\"
timeout="10"></uitest>
<mail server="smtp.gmail.com" port="587"
ssl="true" username="techcoaching123465789@gmail.com "
password="pwd" displayName="No-reply"
defaultSender="techcoaching123465789@gmail.com " />
<folder mailTemplate="templates/email/"
baseResourceFolder="C:\data\projects\myERP\api\App.UI.Test/resources/"></folder>
</appconfiguration>
请注意(Please be aware of) <databases />
.这是清单(. This is the list of) connectionstrings
在我们的应用中使用的默认情况下,其名称为"(that were used in our app. By default, it’s name is “) DefaultConnection
“.(”.)
请更新以下示例中的适当信息:(Please update appropriate information as sample below:)
<add name="DefaultConnection"
database="MyERP" server="localhost" port="1433"
userName="tinyerp" password="123456"
dbType="MSSQL" default="true"></add>
2.使用Visual Studio编辑器发布API代码(2. Publish Code of API using Visual Studio Editor)
-
右键点击(Right click on)
App.Api
并从上下文菜单中选择"发布”:(and select “Publish” from context menu:) -
选择 “(Select “)
published
“,然后单击对话框底部的"发布"按钮:(” from dropdownlist and click on “Publish” button at the bottom of dialog:) -
您将看到如下结果:(You will see the result as below:)
发布代码位于(The publish code was located at)<解决方案根目录>/application.api/published(/application.api/published).(.)
要部署API,只需将其上传到API域(例如:(To deploy the API, just upload this to API domain (for example:) api.tinyerp.com
)())
3.将API代码上传到API域(3. Upload API code to API Domain)
使用任何FTP客户端将发布的文件上传到您的域:(Using any FTP client to upload published file to your domain:)
进入(Access to) api.tinyerp.com
,您将收到以下信息:(, you will receive as below:)
4.更新app/config/appConfig.ts中的ApiBaseUrl指向API域(4. Update ApiBaseUrl in app/config/appConfig.ts Point to API Domain)
请更改(Please change the) baseUrl
在”(in “)/app/config/appConfig.ts(/app/config/appConfig.ts)” 如下:(” as below:)
5.建立客户端(5. Build Client Side)
打开命令提示符/终端,然后转到"(Open command prompt/ terminal and go to “)/客户/(/client/)",然后运行”(", and run “) gulp build
“:(":)
完成此命令后,已编译的代码位于”(After this command was finished, the compiled code was located in “)/客户/dist(/client/dist)“文件夹:(” folder:)
看看这个文件夹,所有ts文件都被编译成js文件,并被压缩成”(Look at this folder, all ts files were compiled into js files and were compressed into “)/client/dist/bundle.js(/client/dist/bundle.js)".其余的是(”. The remaining are)**html/图片(html/ image)**文件.(files.)
打开 “(Open the “)/client/dist/bundle.js(/client/dist/bundle.js)",我们看到内容已压缩:(”, we see the content was compressed:)
我们还可以在编译过程中应用一些缩小.因此,代码可以安全地交付.(We can also apply some minification during the compile process. So the code is safe to be delivered.)
6.将客户端上载到客户端的域(6. Upload Client to Domain for Client Side)
请使用任何FTP客户端工具(例如filezilla)并将这些文件上传到您的域中(例如” tinyerp.com”).然后,我们可以通过访问" http://tinyerp.com"进行检查.(Please use any FTP client tool, such as filezilla and upload those files into your domain (for example “tinyerp.com”). Then, we can check it by access to “http://tinyerp.com”.)
结果是下面的照片:(The result is the photo below:)
使用"(Login with “) tu.tran@yahoo.com/123456
“.我们将看到默认页面如下:(”. We will see default page as below:)
恭喜你!您已成功部署客户端.(Congratulations! You deployed your client successfully.)
在IIS上出现以下错误,我该如何解决?(I Got An Error as Below on IIS, How Can I Solve It?)
如果看”(If looked at “)/客户/dist(/client/dist)”, 有(", there is)**web.config(web.config)**文件.在IIS上部署应用程序时,我们需要此文件.(file. We need this file when deploying the app on IIS.)
有重写规则(There is rewrite rule in)web.config(web.config),这将始终将请求重定向到(, this will always redirect the request to)index.html(index.html).(.)
<rewrite>
<rules>
<rule name="Rewrite to default"
enabled="true" stopProcessing="true">
<match url="^[^.]+$" />
<conditions>
<add input="/api/" pattern="^OFF$"/>
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
如果没有此规则,则当用户访问"(Without this rule, IIS may not be able to handle request when user accesses “)tinyerp.com/security/permissions(tinyerp.com/security/permissions)”.(".)
为了解决这个问题,我们需要安装"(To solve this, we need to install “) Url Rewrite
“用于您的IIS.我们可以从(” for your IIS. We can download it from) 这里(here) .(.)
在IIS上安装” URL重写模块"时出现异常?(I Got An Exception When Installing “Url Rewrite Module” on IIS?)
这主要与IIS问题有关.请参阅(This mostly related to IIS issue. Please refer to) 这个连结(this link) 解决这个问题.(for solving this problem.)
我应该怎么做才能在同一域中部署客户端和API?(What Should I Do to Deploy Client and API in the Same Domain?)
为了将API和客户端部署在相同的域中,它与单独的域中的大多数相同.进行一些修改后,已编译的Api代码已通过客户端上传到示例文件夹:(To deploy API and client on the same domain, it was mostly the same as in separated domain. The compiled Api code was uploaded to the sample folder with client with some modifications:)
- 去掉(Remove)**index.html(index.html)**从(from)
App.Api
- 合并(Merge)**web.config(web.config)**在客户端和(in both client and)
App.Api
最终文件夹将是:(The final folder will be:)
许可
本文以及所有相关的源代码和文件均已获得The Code Project Open License (CPOL)的许可。
Javascript CSS C# Mobile .NET Visual-Studio ADO ASP.NET DBA Architect 新闻 翻译