使用 Visual Studio Code 将简单的 Angular 8 应用程序部署到 Azure

Question

我已经学习了几个在线教程，但都没有成功。我正在尝试将 Angular 8.3 Web 应用程序部署到 Azure。我尝试创建一个 Windows 和 Linux 的 Web 应用程序，但总是给我标准的 hostingstart.html 页面或发生内部服务器错误的消息。我尝试手动上传 dist 文件以及在 Visual Studio Code 中使用 Azure App Service 扩展。

与当前的 Visual Studio Code 和 Azure 设置相比，所有教程似乎都已过时。是否有人可以指导我完成让我的 Angular 应用程序在 Azure 上运行的步骤？我也有一个 .NET Core api 来配合它，但可以稍后解决。

老实说，我不知道正确的步骤是什么，或者我的应用程序是否存在关于节点版本或类似内容的问题。我的应用程序在本地 IIS 服务器上运行良好，包括 IIS 的 URL 重写模块和正确设置的 web.config 文件。

谢谢！ 杰里米

Answer 1

不知何故，这个问题与我的 web.config 文件有关。

这是我的非工作 web.config 文件中的内容：

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <defaultDocument enabled="true">
      <files>
        <add value="index.html" />
      </files>
    </defaultDocument>
    <rewrite>
      <rules>
        <rule name="Angular Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/di/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

这是更改后的 web.config 文件（我在故障排除期间删除了默认文档部分，然后得到了以下内容，其中添加了 system.web 部分。不确定是哪个实际修复了它。

<?xml version="1.0" encoding="utf-8"?>
<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="Angular Routes" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
          </conditions>
          <action type="Rewrite" url="/di/" />
        </rule>
      </rules>
    </rewrite>
    <httpErrors errorMode="Detailed" />
  </system.webServer>
  <system.web>
    <customErrors mode="Off" />
    <compilation debug="true" />
  </system.web>
</configuration>

Answer 2

有一个 Azure App Service management extension 用于 Visual Studio Code，通过它您将能够部署和扩展 Web。

有一个关于如何deploy .net core web with visual studio code的教程。除了这种方式，你可以在 Azure 应用服务资源管理器中选择部署到 Web 应用。

或者，打开命令面板 (F1)，键入 deploy to web app，然后选择 Azure 应用服务：部署到 Web 应用命令。然后为应用选择您当前的文件夹并按照提示进行操作。

Answer 3

如果您想直接从 Visual Studio 部署，请按照以下步骤操作

第 1 步： 运行 ng build --prod（这将在您的应用程序中创建一个 dist 文件夹）

第2步：打开visual studio并选择open >> website，然后在dist文件夹中选择你的项目路径并打开

第 3 步：右键单击您的项目并选择发布 Web 应用程序，然后选择您发布的配置文件设置并部署它

如果您想使用带有 CI/CD 管道的 Azure DevOps 进行部署，请遵循 tutorial