如何為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請求導致了問題