为什么当我点击它的根 URL 时，我的 NodeJS 应用程序会返回一个静态 Javascript 文件

Question

我使用 VS Code 中的应用服务扩展在 Azure 应用服务上安装了我的 React 应用。 IT说已经安装成功。我遇到了一些问题，不得不在 web.config 中设置 index.js 的默认文档，以避免 NodeJs 和 App Services 出现众所周知的问题。但是，当我点击我的应用程序的主 url 时，我得到了返回给我的 index.js 一个静态文件。它不会像我期望的那样执行文件并呈现我的应用程序。我已经通过 Kudu 的调试控制台进行了检查，并且安装了 Node 和 npm。事实上，它们的正确版本。我已经为这个问题坐了整整 2 天，无法让应用程序运行。

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import { mainReducer } from './main/reducer';
import * as AuthService from '../src/authentication/authentication-service';

let store = createStore(mainReducer, {});

AuthService.init();

require('dotenv').config();

AuthService.runAuth(() => {
  const Bootstrap = () => (
    <Provider store={store}>
      <App />
    </Provider>
  );

  ReactDOM.render(<Bootstrap />, document.getElementById('root'));
  serviceWorker.register();
});

我的 web.config 文件如下所示：

<?xml version="1.0" encoding="utf-8"?>
<!--
     This configuration file is required if iisnode is used to run node processes behind
     IIS or IIS Express.  For more information, visit:
     https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config
-->

<configuration>
  <system.webServer>
    <!-- Visit http://blogs.msdn.com/b/windowsazure/archive/2013/11/14/introduction-to-websockets-on-windows-azure-web-sites.aspx for more information on WebSocket support -->
    <webSocket enabled="false" />
    <handlers>
      <!-- Indicates that the index.js file is a node.js site to be handled by the iisnode module -->
      <add name="iisnode" path="index.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="^index.js\/debug[\/]?" />
        </rule>

        <!-- First we consider whether the incoming URL matches a physical file in the /public folder -->
        <rule name="StaticContent">
          <action type="Rewrite" url="public{REQUEST_URI}"/>
        </rule>

        <!-- All other URLs are mapped to the node.js site entry point -->
        <rule name="DynamicContent">
          <conditions>
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="True"/>
          </conditions>
          <action type="Rewrite" url="index.js"/>
        </rule>
      </rules>
    </rewrite>

    <!-- 'bin' directory has no special meaning in node.js and apps can be placed in it -->
    <security>
      <requestFiltering>
        <hiddenSegments>
          <remove segment="bin"/>
        </hiddenSegments>
      </requestFiltering>
    </security>

    <!-- Make sure error responses are left untouched -->
    <httpErrors existingResponse="PassThrough" />

    <!--
      You can control how Node is hosted within IIS using the following options:
        * watchedFiles: semi-colon separated list of files that will be watched for changes to restart the server
        * node_env: will be propagated to node as NODE_ENV environment variable
        * debuggingEnabled - controls whether the built-in debugger is enabled
      See https://github.com/tjanczuk/iisnode/blob/master/src/samples/configuration/web.config for a full list of options
    -->
    <iisnode watchedFiles="web.config;*.js" debuggingEnabled="true"/>
  </system.webServer>
</configuration>

Answer 1

您应该将您的应用配置为发送 index.html 而不是 index.js

检查 1

您是否部署了正确的build 文件夹？ （从未使用过 Azure 应用服务，但据我了解，它应该是捆绑版本）

Answer 2

您的默认文档应该是包含您的 react 应用程序的 HTML 文件，而不是 js 文件。