javascript - 将应用程序部署到谷歌应用程序引擎并希望启动 api 和客户端

Question

按照本教程获取谷歌云平台上的api和客户端:

https://www.freecodecamp.org/news/create-a-react-frontend-a-node-express-backend-and-connect-them-together-c5798926047c/

我有一个根目录，里面有/api 和/client

/api package.json 有以下脚本

"scripts": {
    "start": "node ./bin/www"
},

/client package.json 有以下脚本

"scripts": {
    "client-install": "npm install --prefix client",
    "start": "node server.js",
    "server": "nodemon server.js",
    "client": "npm start --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\""
},

当我尝试部署时，它说:

Step #0: Application detection failed: Error: node.js checker: Neither "start" in the "scripts" section of "package.json" nor the "server.js" file were found. Finished Step #0

我在想它找不到脚本？ 的最佳方法是什么？同时启动我的api和客户端我什么时候部署？

Answer 1

我的假设是报告的问题是由于根目录中没有package.json的事实而产生的。文件。您可以尝试在根目录中添加一个来处理应用程序和客户端目录中的内容，但是...

...但是看了你使用的教程，我发现了一些我不喜欢的东西，所以你想给你一些建议。我最近开发了一个简单的工具来可视化有关意大利 covid-19 扩散的图表，它使用与您的应用程序相同的结构和不同的方法。主要区别在于我将它部署在 VPS 中，并使用外部工具在我的 package.json 中启动它。文件没有script命令在产品中启动它。它是这样的:

cd client && npm install && npm run build && cd .. && npm install && node server.js

你可以看看github repos获得想法，但我将解释主要区别。

服务器的东西(带有 package.json )在根目录中(这可以解决你的问题)

根据其他答案，您需要在您的快速应用程序中添加两行以将构建的客户端作为静态文件提供服务:

我建议使用 proxy功能而不是 cors包裹。

在您的 express 应用程序中:

// At the begenning, with other middlewares
app.use(express.static(path.join(__dirname, "client", "build")));
// As last, to substitute any 404 with your client home page
app.get("*", (req, res) => res.sendFile(path.join(__dirname, "client", "build", "index.html")));

我不知道你要处理哪种数据，但 CORS 是一种你永远不应该禁用的保护(通过 cors 包)，至少在可能的情况下是这样。不仅如此，一旦您能够解决报告的问题，恐怕您使用的教程中的以下部分将无法正常工作，因为它会尝试从您的应用程序用户的 localhost:9000 获取 API。 .

callAPI() {
    fetch("http://localhost:9000/testAPI")
        .then(res => res.text())
        .then(res => this.setState({ apiResponse: res }));
}

要启用 CORS 并解决从本地主机获取问题，您应该使用 proxy特征。在您的客户package.json文件只需添加:

"proxy": "http://localhost:9000/",

这使您的 webpack 开发服务器代理它无法处理的调用到您的开发服务器，而不是将您的客户端获取功能更改为:

callAPI() {
    fetch("/testAPI")
        .then(res => res.text())
        .then(res => this.setState({ apiResponse: res }));
}

它会自动在 dev 和 prod 环境中工作，并让您启用反向 CORS。

希望这可以帮助。