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

Question

I'm setting up a simple web app on AppEngine and have some trouble with configuring the app.yaml.我正在 AppEngine 上设置一个简单的网络应用程序，但在配置 app.yaml 时遇到了一些问题。 It includes a HTML page, a JS script and a NodeJS server.它包括一个 HTML 页面、一个 JS 脚本和一个 NodeJS 服务器。

My project structure:我的项目结构：

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

index.html:索引.html：

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

index.js:索引.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 server: 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:包.json：

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

app.yaml:应用程序.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

When I check locally, index.js modify index.html correctly but when I deploy it to App Engine, index.js is blocked (MIME type (« text/html »)).当我在本地检查时， index.js 会正确修改index.html ，但是当我将其部署到 App Engine 时， index.js被阻止（MIME 类型（« text/html »））。 it then "fails to load the " on the index.html .然后它“无法加载” index.html 。 Although, the script still launch the GET request to the server and get a 404 error.尽管如此，脚本仍然向服务器发起 GET 请求并得到 404 错误。 Is it an App.yaml problem or something else is wrong?是 App.yaml 问题还是其他问题？

Answer 1

Check closely the GAE log entries for the exact URL being requested (and rejected with 404).仔细检查 GAE 日志条目以获取所请求的确切 URL（并被 404 拒绝）。 That's what would normally need to be matched by one of your static handlers' url pattern.这通常需要与您的静态处理程序之一的url模式匹配。 If a match occurs then the file specified by the respective handler's static_file / static_dir and upload specs (which are relative to your app's top dir - where the app.yaml file exists) should happen.如果发生匹配，则由相应处理程序的static_file / static_dir和upload规范（相对于您的应用程序的顶级目录 - app.yaml 文件所在的位置）指定的文件应该发生。

Let's assume the initial request is for / .让我们假设初始请求是针对/ 。 That's matched by your 1st static handler, so your www/index.html will be served.这与您的第一个静态处理程序匹配，因此您的www/index.html将被提供。

But the index.html file references the js/index script inside, so another request will follow with that URL.但是index.html文件引用了里面的js/index脚本，因此另一个请求将跟随该 URL。 But that URL doesn't match any of your handlers' pattern, so it'll get a 404. You also don't have any file named just index .但是该 URL 与您的任何处理程序模式都不匹配，因此它会得到 404。您也没有任何名为index文件。

Assuming what you'd like to serve in this case is actually the www/js/index.js file you'd have to:假设在这种情况下您想要提供的实际上是www/js/index.js文件，您必须：

correct the filename reference in your index.html file:更正index.html文件中的文件名引用：
<script src="js/index.js"></script>
make sure this reference is matched by a static handler url pattern.确保此引用与静态处理程序url模式匹配。 Something like this maybe (which for every request path ending with .js will attempt to serve a file matching that path but relative to the www/js directory):可能是这样的（对于每个以.js结尾的请求路径，它将尝试提供与该路径匹配但相对于www/js目录的文件）：
```
 - url: /(.*\\.js)$ static_files: www/js/\\1 upload: www/js/.*\\.js$
```

Alternatively you could use a scheme that can be applied to multiple type of files, not that those ending in .js :或者，您可以使用一种可以应用于多种类型文件的方案，而不是那些以.js结尾的文件：

reference the file using the www prefix in your index.html file:在index.html文件中使用www前缀引用该文件：
```
 `<script src="www/js/index.js"></script>`
```
re-use your last handler, but adding a wildcard to its url to ensure matches for everything under www (as www/blah won't match the just www pattern):重新使用您的最后一个处理程序，但在其url添加一个通配符以确保与www下的所有内容匹配（因为www/blah不会匹配刚刚的www模式）：
```
 `- url: /www/*`
```

It's also possible to reference the script without the .js suffix, but then you'd need a handler specifically for that file - to map it to the actual filename, you can't use wildcards.也可以在没有.js后缀的情况下引用脚本，但是您需要一个专门用于该文件的处理程序 - 将其映射到实际文件名，您不能使用通配符。 So I wouldn't recommend this as it can get pretty complex very quickly.所以我不推荐这样做，因为它很快就会变得非常复杂。

You'd have to similarly consider all the other static elements you need to serve.您必须类似地考虑您需要提供的所有其他静态元素。

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

问题描述

1 个解决方案

解决方案1
2 已采纳 2019-08-30 14:12:51

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

问题描述

1 个解决方案

解决方案1 2 已采纳 2019-08-30 14:12:51

解决方案1
2 已采纳 2019-08-30 14:12:51