Question

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

申请结构如下：

./的index.html
./ app.js - 主node.js代码，包括Express中间件
./*。js - 支持myapp的node.js代码
./ assets / angular - Angular.js v1.2.x
./资产/自举
./资产/ CSS
./资产/ 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文件（在浏览器调试窗口中查看），但我得到了一个＆＃34;无法加载资源：服务器响应状态500（内部服务器错误）＆＃34;在/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被调用但未被返回
Postman（查看express.js请求的结果），允许我查看URI请求错误代码并确定端口可能是个问题
Azure's Kudu toolset，它允许访问应用程序日志文件，它帮助我确定是应用程序还是对工作应用程序的URI请求导致问题

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

1 个答案: