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

易学易用 .NET 6.0 和 Angular – 独立模板和 WEB API 发布到 IIS – 第 5 部分

syed shanu
starIconstarIconstarIconstarIconstarIcon

5.00/5 (3投票s)

2022 年 7 月 15 日

CPOL

11分钟阅读

viewsIcon

10075

downloadIcon

99

开始使用 .NET 6.0 和带有 WEB API 的独立 Angular 模板，并将 WEB API 和 Angular 项目都发布到 IIS

引言

一直以来，我都在计划发布 .NET 6.0 和 Angular 系列文章。在这个系列中，我计划发布以下文章：

在本文中，我们将详细了解如何开始使用 .NET 6.0 和带有 WEB API 的独立 Angular 模板，并将 WEB API 和 Angular 项目都发布到 IIS（Internet Information Service）。

这是一个系列文章，在我的上一篇文章中，我详细解释了 .NET 6.0 和独立 Angular 模板入门。在本文中，让我们看看将 .NET 6.0 独立模板项目和 WEB API 发布到 IIS 的步骤。

(WWW) -> 我们为什么需要 IIS，何时需要 IIS，以及它是什么

IIS 是什么：IIS 称为 Internet Information Service，它是一个在 WINDOWS 操作系统下运行的 Web 服务器，由 Microsoft 引入和创建。

为什么以及何时需要 IIS：开发任何 Web 应用程序的主要目的是将其存储在 Web 服务器中，并通过互联网从地球上的任何地方查看/访问。无论您是在家、办公室还是旅行，只要您可以访问互联网，您就可以从 Web 服务器查看和访问您开发的 Web 应用程序。

Microsoft 开发了 Internet Information Service，它在 Windows 操作系统中充当 WEB 服务器。

假设我们的办公室在同一个 LAN（局域网）中，并且我们在办公室服务器 PC 或本地计算机上的 IIS 中发布了 ASP.NET Core Angular 应用程序。那么，在我们的办公室局域网内，我们可以从任何计算机、笔记本电脑、平板电脑或手机（在同一个 WIFI 和同一个局域网中）查看 Web 应用程序。

上图显示我已将我的演示 .NET 6.0 WEB API 和 Angular 独立项目发布到 IIS。我的平板电脑、笔记本电脑和手机使用相同的 WIFI 连接，并使用 IIS PC 的 IP 地址，我们可以从手机、平板电脑和平板电脑中查看我们的网站。但在这里，我的网站只能在本地局域网内访问，如果我们要从任何地方访问我们的网站，即使在办公室外，我们也可以将全局 IP 配置到我们的 PC，然后我们就可以从任何地方查看我们的网站。

最好的方法是，我们需要一个我们称之为生产服务器的 WEB 服务器，我们可以将我们的网站发布到生产服务器并使服务器全局可访问。我们还可以将我们的网站发布到 Azure、AWS 等云服务器。

保护您的网站

如您所见，如果我们将网站发布到本地 IIS、生产 IIS Web 服务器或云服务器，任何人都可以从 LAN 或 WAN（广域网）互联网访问该网站。如果有人知道我们托管的 PC IP 地址、端口号或知道域名，那么我们需要保护我们的网站。

如果我们的网站包含不重要的数据，例如可以向所有人开放的信息，那么我们可以制作一个简单的网站并使其对所有人开放。如果我们要保护我们的数据，并且如果我们和只有特定用户想要查看特定页面和数据，那么对于该网站，我们将添加登录、身份验证（检查用户是否有效以登录）、授权（检查登录用户是否有权访问页面和数据）、会话等功能，以实现多个用户登录并跟踪和记录每个会话用户在我们网站上的活动。

我们可以考虑购物车网站，它们最初对所有用户开放，因为任何人都可以查看所有产品和详细信息。但如果他们想在线购物，那么他们需要登录并查看他们的购物清单并在购物网站上进行新的购物。在这里，我们通过身份验证和授权为用户提供登录，以确保只有登录用户才能查看他们的购物清单，并且会话为所有用户单独维护，以仅查看他们的购物产品列表详细信息。

Bootstrap 网站

希望大家对 Bootstrap 这个词都很熟悉，我们使用 Bootstrap 设计和开发我们的 Web 应用程序，它是一个响应式 CSS 框架，可以加快我们应用程序的开发速度，并且 Web 应用程序可以在任何分辨率下查看，因此我们可以在手机、平板电脑、笔记本电脑、任何计算机和 PDP 上查看我们的 Web 应用程序。我们的 ASP.NET Core 和 Angular 模板默认添加了 Bootstrap，我们可以使用它来设计我们的网站。我们之前的文章解释了 使用 Admin LTE 设计的 .NET 6.0 和 Angular，它也是使用 Bootstrap 设计的，因此我们的 Web 应用程序可以在手机、平板电脑、计算机和 PDP 上查看。

背景

安装 IIS

首先，检查您的计算机是否安装了 IIS。为此，请打开浏览器并输入 localhost。如果您看到这样的页面，则表示 IIS 已安装在您的本地计算机上。

如果未显示 localhost，则表示您需要检查并安装 IIS 到您的计算机。

点击 开始 > 输入 添加或删除程序 > 点击 程序和功能

点击 打开或关闭 Windows 功能。

选择 Internet Information Service 并点击 确定。

安装并打开 开始 > 输入 IIS > 打开 Internet Information Service。

现在我们准备好发布 .NET 6.0 和 Angular 应用程序了。

必备组件

注意：为了在 IIS 中托管 ASP.NET Core，我们必须安装 .NET Core Hosting Bundle。请在将 ASP.NET Core 应用程序托管到 IIS 之前安装它。

Using the Code

安装完上述所有先决条件后，点击桌面上的 开始 >> 程序 >> Visual Studio 2022 >> Visual Studio 2022，然后点击 新建 >> 项目。

搜索 Angular 并选择 独立 Typescript Angular 项目，然后点击 下一步。

输入您的项目名称并点击 下一步。

如果您想为项目使用 ASP.NET Core 和 WEB API，则必须选中 添加空白 ASP.NET Web API 集成，然后点击 创建 按钮。

添加 WEB API 项目

现在让我们为 Angular 独立解决方案创建一个新的 ASP.NET Core WEB API 项目。

右键单击您的 Angular 独立解决方案并添加 新项目 > 选择 ASP.NET Core Web API 并点击 下一步。

输入项目名称，确保项目在 Angular 独立解决方案下，然后点击 下一步。

我们可以看到这里选择的框架是 .NET 6.0，然后点击 创建按钮。

现在我们可以看到我们的 ASP.NET Core WEB API 项目已添加到 Angular 独立项目解决方案下。

禁用 WEB API 项目的启动浏览器

由于我们的 Angular 和 WEB API 项目解决方案都在同一个解决方案中，我们不需要为 Angular 和 WEB API 打开两个浏览器。我们的需求是 WEB API 需要在后台运行并执行 CRUD 操作和一些业务操作，所有数据显示和控件将由 Angular 项目中的 UI 部分完成。因此，现在我们禁用了 WEB API 项目的启动浏览器选项。

右键单击我们的 ASP.NET Core WEB API 项目并选择 属性 > 选择 调试 > 点击 打开调试启动配置文件 UI > 取消选中 启动浏览器。

选择启动项目

现在我们需要同时运行 Angular 和 ASP.NET Core WEB API 项目，同时还需要使启动项目在初始阶段启动。在这里，我们首先需要运行 WEB API 项目，然后是 Angular 项目。

右键单击 Angular 和 ASP.NET Core WEB API 解决方案 并选择 属性，我们可以看到默认情况下它被选为单个启动项目，在这里，我们可以看到我们的 Angular 独立项目已被选中。

为了同时运行我们的 Angular 和 ASP.NET Core 项目，我们需要选择 多个启动项目 并将每个项目的操作选择为 启动。请确保您的 ASP.NET Core WEB API 在 Angular 项目之上，因为如果我们要将 ASP.NET Core 结果绑定到 Angular 中，那么我们需要首先运行 WEB API 项目，然后是 Angular 项目。

打开 Program.cs 文件并更改并添加以下代码，以便在本地和 IIS 服务器上访问 WEB API。

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment() || app.Environment.IsProduction())
{ 
    app.UseSwagger();
    app.UseSwaggerUI();
}
app.UseCors();

将 WEB API 发布到 IIS

首先，让我们将 WEB API 发布到 IIS。为此，我们首先在 C 或 D 盘下创建一个 WWROOT 文件夹，然后在其中再创建一个名为 AngularHosting 的文件夹，在 AngularHosting 文件夹内，我们再创建 AngularAPI 和 AngularWeb 两个文件夹。

我们使用 AngularAPI 文件夹来构建和发布所有 WEB API 项目。在 AngularWeb 文件夹中，我们将部署 Angular 项目。

发布 Angular API 项目

右键单击我们的 API 项目，然后点击 发布 > 选择文件夹，然后点击 下一步。

点击 下一步，浏览 API 发布位置，然后点击 完成。

点击 下一步，浏览 API 发布位置，然后点击 完成。

我们可以看到我们已成功将 WEB API 发布到该文件夹。

现在我们可以打开 web.config 并添加以下代码以允许跨域访问我们的 WEB API，以便在我们的 Angular 应用程序中使用。

<httpProtocol>
    <customHeaders>
      <add name="Access-Control-Allow-Origin" value="*" />
      <add name="Access-Control-Allow-Headers" value="Content-Type" />
      <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
    </customHeaders>
</httpProtocol>

将 API 发布到 IIS

点击 开始 > 输入 IIS > 右键单击站点 > 点击 添加网站 > 浏览到 API 部署文件夹并输入您需要的端口号，然后点击 确定。

创建 新应用程序池 > 并将 .NET CLR 设置为 无托管代码。

选择已创建的网站 > 在右侧，点击基本设置 > 将应用程序池更改为您创建的。

浏览并测试

现在我们可以检查我们的 API 是否在 IIS 下运行，从右侧 > 点击 浏览，我们可以看到我们的 API 正在运行，要测试 swagger，输入 /swagger 并测试它。

我们也可以通过本地计算机的 IP 地址和端口号进行测试。

将 Angular App 发布到 IIS

创建 API 连接的 JSON 文件

首先让我们创建一个 JSON 文件，我们将用它来存储 IIS API 链接地址，并在我们的 Angular 项目中使用该 API 地址来绑定结果。

为此，我首先在 app 文件夹下创建一个 JSON 文件，并添加 API 站点的 IP 地址和端口号。

App.component

现在打开 app.component 文件，首先导入 cons.json 文件，然后声明变量为 conns 并分配 JSON 数据。在 http get 方法中，我们添加 API iis IP 和端口地址以获取和绑定数据。

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core'; 
import conString from './cons.json';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public forecasts?: WeatherForecast[];
  conns: any = conString; 

  constructor(http: HttpClient) {
    http.get<WeatherForecast[]>
    (this.conns.ConnString+'weatherforecast').subscribe(result => {
      this.forecasts = result;
    }, error => console.error(error));
  }
  title = ‘ShanuAngular’;
}

interface WeatherForecast {
  date: string;
  temperatureC: number;
  temperatureF: number;
  summary: string;
}

部署 Angular 项目

现在让我们部署 Angular 项目以发布到 IIS。打开命令提示符，进入项目文件夹，然后输入 > ng build，然后从命令提示符中按 Enter 键。

我们可以看到文件已部署，现在将文件复制到您想要用于 IIS 发布的目的文件夹。

按照我们用于发布 WEB API 的相同方法，现在，我们创建一个新网站并添加 Angular 项目的路径并进行测试。

关注点

希望本文能帮助您了解 ASP.NET Core 和 Angular 独立项目入门，并将 API 项目和 Angular 项目都发布到 IIS。

历史

  • 2022 年 7 月 15 日：初始版本
© . All rights reserved.