来自节点模块导入的意外令牌错误

Question

我有一个使用 WebSocket 库 (ws) 的节点应用程序，并且我能够在本地计算机上运行此应用程序。

但是，当我将其发布到 Azure 应用服务时，我收到相同代码的以下错误。

我已经检查过两者都运行相同版本的节点 12.13.0，我已经完成 npm install 并且包看起来是相同的（无论如何发布时它们也包含在内）。下面的错误实际上是在抱怨来自ws 模块的文件。

触发此错误的代码行是：var WebSocket = require('ws');

Wed Dec 04 2019 13:03:04 GMT+0000 (Coordinated Universal Time): Application has thrown an uncaught exception and is terminated:
SyntaxError: Unexpected token {
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:373:25)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (D:\home\site\wwwroot\node_modules\ws\index.js:3:19)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)
Application has thrown an uncaught exception and is terminated:
SyntaxError: Unexpected token {
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:373:25)
    at Object.Module._extensions..js (module.js:416:10)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (D:\home\site\wwwroot\node_modules\ws\index.js:3:19)
    at Module._compile (module.js:409:26)
    at Object.Module._extensions..js (module.js:416:10)

Answer 1

作为参考，我尝试让 GitHub repo websockets/ws 的示例 examples/server-stats/ 在本地和 Azure 应用服务上运行。

首先，我把它所有的源码下载到我的本地机器上，在我的本地目录下运行npm install和npm install ws，我的本地文件结构如下图。

图1.我的样本server-stats的本地文件结构。

其次，我尝试使用命令node index.js 直接运行它并遇到问题Error: Cannot find module '../..'，然后我将文件index.js 更改为如下代码。

const WebSocket = require('ws'); // The original content is `require('../..')`

然后，我运行node index.js 并打开浏览器查看结果，它工作正常。

图 2.server-stats 在本地运行良好

据我所知，Azure App Service 要求节点应用程序从代码process.env.PORT 绑定端口值并以web.config 文件启动，所以我更改了index.js 文件，并创建了一个web.config 文件内容来自 Kudu wiki 页面Using a custom web.config for Node apps 并使用index.js 而不是server.js，代码如下。

• index.js

  const port =  8080;
  
  server.listen(port, function() {
    console.log('Listening on http://localhost:'+port);
  });
  

• 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 server.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"/>-->
    </system.webServer>
  </configuration>
  

然后，我将所有文件和目录上传到我的 Azure WebApp，如下图所示，在其 Kudu 控制台中查看。

图 3. 通过 Kudu 控制台在 Azure WebApp 上的示例文件结构

在我为Application settings 添加一个新的重新编码WEBSITE_NODE_DEFAULT_VERSION 和12.13.0 之后，

图4.通过WEBSITE_NODE_DEFAULT_VERSION在Application settings中设置节点运行时版本

我在浏览器中打开它，它确实有效。

图 5. 对于默认设置的 websocket 功能，它不起作用

上面的结果有两个问题。

1. 对于使用 websocket 的 webapp，需要在 General settings 中启用 Web sockets 功能。

   图 6. 在General settings 中启用Web sockets 功能

2. 默认情况下，Azure 启用 SSL 进行 HTTP 访问，因此public/index.html 文件中的 websocket url 需要使用 wss 而不是 ws。

   图 7. 在 public/index.html 中使用 wss 而不是 ws 以在 Azure 应用服务上启用 SSL。

最后，它可以在 Azure 应用服务上运行。