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

Question

虽然我的应用程序在本地运行良好，但将其部署到Azure Web App时遇到了困难。

该应用程序的结构如下：

• ./index.html
• ./app.js-主要的node.js代码，包括Express中间件
• ./*.js-支持myapp的node.js代码
• ./assets/angular-Angular.js v1.2.x
• ./assets/bootstrap
• ./资产/ 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之后，虽然加载了大多数asset /和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来确定我的快速api被调用但未返回
• 邮递员 （查看express.js请求的结果），允许我查看URI请求错误代码并确定端口可能是问题
• Azure的Kudu工具集 ，它允许访问应用程序日志文件，它帮助我确定是我的应用程序还是对工作应用程序的URI请求导致了问题