如何为 MEAN 应用程序的 Azure 部署定义 web.config 文件？

Question

虽然我的应用在本地运行良好，但我很难将其部署到 Azure Web 应用。

应用程序的结构如下：

• ./index.html
• ./app.js - 主 node.js 代码，包括 Express 中间件
• ./*.js - 支持myapp的node.js代码
• ./assets/angular - Angular.js v1.2.x
• ./assets/bootstrap
• ./assets/css
• ./assets/img
• ./views - 应用程序的视图
• state.js 路由到 /myapp/*（例如，/myapp/home、/myapp/login）。
• 所有 Express API 调用均针对 /api/*（例如 /api/version）

在拼凑其他来源的花絮之后，我对 web.config 的最佳猜测如下：

<handlers>
  <!-- Indicates that the app.js file is a node.js site to be handled by the iisnode module -->
  <add name="iisnode" path="app.js" verb="*" modules="iisnode"/>
</handlers>
<rewrite>
  <rules>
    <!-- Do not interfere with requests for node-inspector debugging -->
    <rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
      <match url="^app.js\/debug[\/]?" />
    </rule>

    <rule name="Static files" stopProcessing="true">
      <match url=".*" />
      <conditions logicalGrouping="MatchAll">
        <!-- Core application files -->
        <add input="{REQUEST_URI}" pattern="assets/" ignoreCase="true" />
        <add input="{REQUEST_URI}" pattern="views/" ignoreCase="true" />
      </conditions>
      <action type="Rewrite" url="{REQUEST_URI}" />
    </rule>

    <rule name="Express.js API">
      <match url="api/*" />
      <action type="Rewrite" url="app.js"/>
    </rule>

    <rule name="Angular">
      <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="index.html" />
    </rule>        
  </rules>
</rewrite>

不幸的是，在发布到 Azure 后，虽然加载了大部分 assets/ 和 index.html 文件（在浏览器调试窗口中查看），但我收到“加载资源失败：服务器响应状态为 500 (内部服务器错误）”在 /assets/angular/app.js 上。

什么可能导致此问题？此外，是否有在 Azure 上部署 MEAN 应用程序的标准？这种类型的 MEAN 应用是否有标准的 web.config？

Answer 1

在 Azure 中支持 MEAN 应用程序的诀窍归结为以下几点：

• 将 express.js 中间件请求重写为 server.js
• 将 angular.js URI 请求重写为 index.html
• 按原样/直接将所有静态文件请求（例如，Angular 资产、CSS、图像等）重写为请求的 URI
• 重要的是，Azure 可以通过定义的端口正确处理您的请求，在 process.env.PORT 中打开 express.js 服务器

在 server.js 中：

    // Within server.js - make sure we're listening on the proper port
    server.listen(process.env.PORT, function () {
        logger.info('Web server listening on port ' + process.env.PORT)
    });

然后对于 web.config：

<handlers>
   <!-- Indicates that the app.js file is a node.js site to be handled by the iisnode module -->
   <add name="iisnode" path="server.js" verb="*" modules="iisnode"/>
</handlers>

<rewrite>
  <rules>

  <!-- Do not interfere with requests for node-inspector debugging -->
  <rule name="NodeInspector" patternSyntax="ECMAScript" stopProcessing="true">
    <match url="^server.js\/debug[\/]?" />
  </rule>

  <!-- For static files, redirect to the URI -->
  <rule name="Static files" stopProcessing="true">
    <match url=".*" />
    <conditions logicalGrouping="MatchAll">
      <!-- Any directory/file in the assets/ or views/ directory -->
      <add input="{REQUEST_URI}" pattern="assets\/" ignoreCase="true" />
      <add input="{REQUEST_URI}" pattern="views\/" ignoreCase="true" />
    </conditions>
    <action type="Rewrite" url="{REQUEST_URI}"/>
  </rule>

  <!-- For Express.js middleware API, if using api/ prefix, then use server.js -->
  <rule name="Express.js URIs">
    <match url="api/*" />
    <action type="Rewrite" url="server.js" />
  </rule>

  <!-- For Angular.js URIs, rewrite to the index.html file -->
  <rule name="Angular">
    <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="index.html" />
  </rule>  

</rules>
</rewrite>

对于遇到类似问题的任何人，我可以推荐一下：

• 您的浏览器的开发人员工具 - 例如，Chrome - 我能够在我的 Angular 应用程序中使用 console.log 来确定我的 express api 被调用但没有返回
• Postman（查看 express.js 请求的结果），允许我查看 URI 请求错误代码并确定端口可能存在问题
• Azure's Kudu toolset，它允许访问应用程序日志文件，它帮助我确定是我的应用程序还是对工作应用程序的 URI 请求导致了问题