如何使用 JS 和 NodeJS 服务器为标准 html 页面正确配置 app.yaml？

Question

我正在 AppEngine 上设置一个简单的 Web 应用程序，但在配置 app.yaml 时遇到了一些问题。它包括一个 HTML 页面、一个 JS 脚本和一个 NodeJS 服务器。

我的项目结构：

\app.yaml
\package.json
\www
    \index.html
    \js
        \server.js
        \index.js

index.html:

<!DOCTYPE html>
<html>
<body>
    <div id="JShere" >Hello World !</div>
    <div id="ReqAnswer"></div>
</body>
<script src="js/index"></script>
</html>

index.js:

  document.getElementById('JShere').innerHTML = "JS is running";
  var xhr = new XMLHttpRequest();
  xhr.open('GET', "/srv", true);
  xhr.send();
  xhr.addEventListener("readystatechange", processRequest, false);

  function processRequest(e) {
    if (xhr.readyState == 4 && xhr.status == 200) {
        document.getElementById('ReqAnswer').innerHTML = xhr.responseText;
    }
}

node.js 服务器：

const express = require('express');
const app = express();

app.get('/srv', function (req, res) {
  res.send('Request anwser')
})

const PORT = process.env.PORT || 8080;
app.listen(PORT, () => {
  console.log(`Server listening on port ${PORT}...`);
});

package.json:

...
  "scripts": {
    "start": "node www/js/server.js",
    "test": "mocha --exit test/*.test.js"
  },
...

app.yaml:

runtime: nodejs10

handlers:

- url: /
  static_files: www/index.html
  upload: www/index.html

- url: /index
  static_files: www/index.html
  upload: www/index.html

- url: /page2
  static_files: www/page2.html
  upload: www/page2.html

- url: /www
  static_dir: www

当我在本地检查时，index.js 修改 index.html 正确，但是当我将其部署到 App Engine 时, index.js 被阻止（MIME 类型 (« text/html »)）。然后 index.html 上的 "fails to load the "。尽管如此，脚本仍然向服务器发起 GET 请求并收到 404 错误。是 App.yaml 问题还是其他问题？

Answer 1

仔细检查 GAE 日志条目以了解所请求的确切 URL（并被 404 拒绝）。这就是您的静态处理程序的 url 模式之一通常需要匹配的内容。如果发生匹配，则相应处理程序的 static_file/static_dir 和 upload 规范指定的文件（相对于应用程序的顶级目录 - app.yaml 文件所在的位置）应该发生。

让我们假设最初的请求是 /。这与您的第一个静态处理程序匹配，因此您的 www/index.html 将被提供。

但是 index.html 文件引用了里面的 js/index 脚本，所以另一个请求将跟随那个 URL。但是 URL 与您的处理程序的任何模式都不匹配，因此它会得到一个 404。您也没有任何文件名为 index.

假设在这种情况下您想要提供的实际上是 www/js/index.js 文件，您必须：

更正您的 index.html 文件中的文件名引用：

<script src="js/index.js"></script>
确保此引用与静态处理程序 url 模式相匹配。可能是这样的（对于每个以 .js 结尾的请求路径，将尝试提供与该路径匹配但相对于 www/js 目录的文件）：
```
- url: /(.*\.js)$
  static_files: www/js/
  upload: www/js/.*\.js$
```

或者，您可以使用可应用于多种类型文件的方案，而不是那些以 .js:

结尾的方案

在您的 index.html 文件中使用 www 前缀引用文件：

`<script src="www/js/index.js"></script>`

重新使用您的最后一个处理程序，但在其 url 中添加通配符以确保匹配 www 下的所有内容（因为 www/blah 将不匹配只是 www 模式）：
```
`- url: /www/*`
```

也可以在没有 .js 后缀的情况下引用脚本，但是您需要一个专门用于该文件的处理程序 - 要将其映射到实际文件名，您不能使用通配符。所以我不推荐这个，因为它很快就会变得非常复杂。

您必须类似地考虑您需要提供的所有其他静态元素。

如何使用 JS 和 NodeJS 服务器为标准 html 页面正确配置 app.yaml？

How to correctly configure app.yaml for a standard html page with JS and NodeJS server?

javascript

html

node.js

google-app-engine

app.yaml