65.9K
CodeProject 正在变化。 阅读更多。
Home

Angular2 & WebApi (SPA) 用于企业应用 - 第 8 部分 - 构建和部署应用程序

tranthanhtu.vn
starIconstarIconstarIcon
emptyStarIcon
starIcon
emptyStarIcon

3.34/5 (13投票s)

2016 年 12 月 15 日

CPOL

3分钟阅读

viewsIcon

47552

在本篇文章中，我们将学习如何构建和部署代码。

系列中的其他文章

  1. 概述
  2. 添加新权限
  3. 项目结构
  4. 多语言 (i18n)
  5. DI & IoC - 为什么以及为什么不？
  6. RESTful & WebApi
  7. 管理应用生命周期
  8. TinyERP新版本（使用Angular 2 (typescript)）
  9. CQRS：避免企业应用程序中的性能问题（基础）
  10. 多个数据存储：扩展你的存储库（第1部分）
  11. 多个数据存储：扩展你的存储库（第2部分）

我能从本文学到什么？

在本文中，我将介绍如何在2种模式下将应用程序部署到生产环境。

  • 客户端和 API 在不同的域
  • 客户端和 API 在同一个域

如何部署客户端和 API 到不同域？

好的，将客户端和 API 部署到不同的域相当简单，如下所示：

  1. 更新配置（在 app.common/configurations/configuration.release.config）以用于生产环境。
  2. 使用 Visual Studio 编辑器发布 API 代码。
  3. 将 API 代码上传到 API 域。
  4. 更新 app/config/appConfig.ts 中的 ApiBaseUrl 指向 API 域。
  5. 构建客户端。
  6. 将客户端上传到客户端域。

1. 更新配置（在 app.common/configurations/configuration.release.config）以用于生产环境。

在 Visual Studio 中打开您的代码，并在 app.common 项目中导航到“configurations/configuration.release.config”，如下图所示。

<?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>

请注意 <databases />。这是我们应用程序使用的 connectionstrings 列表。默认名称为“DefaultConnection”。

请根据以下示例更新相应的信息：

<add name="DefaultConnection" 
database="MyERP" server="localhost" port="1433" 
userName="tinyerp" password="123456" 
dbType="MSSQL" default="true"></add>

2. 使用 Visual Studio 编辑器发布 API 代码。

  • 右键单击 App.Api，然后从上下文菜单中选择“Publish”。

  • 从下拉列表中选择“published”，然后单击对话框底部的“Publish”按钮。

  • 您将看到如下结果。

发布代码位于 <solution root>/application.api/published。

要部署 API，只需将其上传到 API 域（例如：api.tinyerp.com）。

3. 将 API 代码上传到 API 域。

使用任何 FTP 客户端将发布的文件上传到您的域。

访问 api.tinyerp.com，您将看到如下内容。

4. 更新 app/config/appConfig.ts 中的 ApiBaseUrl 指向 API 域。

请在“<root>/app/config/appConfig.ts”中更改 baseUrl，如下所示：

5. 构建客户端。

打开命令提示符/终端，进入“<root>/client/”目录，然后运行“gulp build”。

在此命令完成后，已编译的代码将位于“<root>/client/dist”文件夹中。

查看此文件夹，所有 ts 文件都已编译为 js 文件，并压缩为“<root>/client/dist/bundle.js”。其余的是 html/image 文件。

打开“<root>/client/dist/bundle.js”，我们看到内容已被压缩。

我们也可以在编译过程中应用一些最小化处理。因此，代码可以安全地交付。

6. 将客户端上传到客户端域。

请使用任何 FTP 客户端工具，例如 filezilla，然后将这些文件上传到您的域（例如“tinyerp.com”）。然后，我们可以通过访问“http://tinyerp.com”来检查它。

结果如下所示。

使用“tu.tran@yahoo.com/123456”登录。我们将看到如下的默认页面。

恭喜！您已成功部署了您的客户端。

我在 IIS 上遇到以下错误，如何解决？

如果查看“<root>/client/dist”，有一个 web.config 文件。在将应用程序部署到 IIS 时，我们需要此文件。

web.config 中有一个重写规则，它会将请求始终重定向到 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>

没有此规则，当用户访问“tinyerp.com/security/permissions”时，IIS 可能无法处理请求。

为了解决这个问题，我们需要为您的 IIS 安装“Url Rewrite”。我们可以在此处下载。

我在 IIS 上安装“Url Rewrite Module”时遇到异常？

这主要与 IIS 问题有关。请参阅此链接以解决此问题。

如何部署客户端和 API 到同一个域？

将 API 和客户端部署到同一个域，与部署到不同域的过程基本相同。已编译的 API 代码将与客户端上传到相同的文件夹，但有一些修改。

  • 从 App.Api 中删除 index.html。
  • 合并客户端和 App.Api 中的 web.config 文件。

最终文件夹将是：

© . All rights reserved.