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

我很幸运地学习了几本在线教程。我正在尝试将Angular 8.3 web应用程序部署到Azure。我尝试创建一个web应用程序，包括Windows和Linux，但总是显示标准hostingstart.html页面或内部服务器错误消息。我尝试手动上传dist文件，并在VisualStudio代码中使用Azure应用程序服务扩展

从当前的VisualStudio代码和Azure设置来看，所有教程似乎都过时了。有没有人可以带我通过这些步骤让我的Angular应用程序在Azure上运行？我还附带了一个.NET核心api，但这可以在以后解决

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

谢谢大家!！

---

Jeremy

如果您直接希望从Visual Studio部署，请执行以下步骤

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

第2步：打开visual studio并选择“打开>>网站”，然后选择dist文件夹中的项目路径并打开

步骤3：右键单击项目并选择发布Web App，然后选择发布的配置文件设置并部署它

如果您想使用Azure DevOps和CI/CD管道进行部署，请遵循以下步骤，Visual Studio代码中有一个可供选择的选项，使用此选项您将能够部署和扩展web

有一个关于如何使用的教程。除此之外，您可以在Azure应用程序服务浏览器中选择部署到web应用程序

---

或者，打开命令调色板F1，键入deploy to web app，然后选择Azure应用程序服务：deploy to web app命令。然后选择应用程序的当前文件夹并按照提示操作。

不知何故，该问题与我的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>

---

谢谢你的回复。我没有看到任何打开的>>网站选项。我使用的是Visual Studio代码，而不是普通的Visual Studio，即2017年、2019年。我不需要任何关于CI/CD的额外说明。我只是想将我的Angular应用程序部署到Azure web应用程序，并展示它的工作原理。