Google App Engine is not loading API (after first open) - express

Question

I have developed a react application using next.js.
Now I want to deploy it to Google Cloud App Engine.
The application does include the react frontend and a mock-API (including mock.db) in order to store data temporararily while in development.
The issue is the following:
The first instance I opened did work correctly. As soon as I opened it in another browser only the react app was served but the API was not there (resulting in the React app only showing frames of controls and no data). The API server is accessible through localhost:3033
The same persits for my colleage who tried to open it, only seeing whiteness.
I have not configured anything extra on Google Cloud App Engine, just vanilla basically.
Does this have something todo with App Engine spinning up extra instances ? I cant figure out what could cause this issue.
package.json
"prestart:api": "node createMockDb.js",
"start:api": "node apiServer.js",
"dev": "node server.js",
"build": "next build",
"start": "cross-env NODE_ENV=production node server.js & node createMockDB.js & node apiServer.js"
server.js
const express = require("express");
const next = require("next");
const port = parseInt(process.env.PORT, 10) || 8080;
const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
const handle = app.getRequestHandler();
app.prepare().then(() => {
const server = express();
server.get("/products/overview", (req, res) => {
return app.render(req, res, "/products/overview", req.query);
});
server.get("/products/roadmap", (req, res) => {
return app.render(req, res, "/products/roadmap", req.query);
});
server.get("/strategy/goals", (req, res) => {
return app.render(req, res, "/strategy/goals", req.query);
});
server.get("/strategy/metrics", (req, res) => {
return app.render(req, res, "/strategy/metrics", req.query);
});
/* server.get("/posts/:id", (req, res) => {
return app.render(req, res, "/posts", { id: req.params.id });
}); */
server.all("*", (req, res) => {
return handle(req, res);
});
server.listen(port, err => {
if (err) throw err;
console.log(`> Ready on http://localhost:${port}`);
});
});
apiServer.js
/* eslint-disable func-names */
/* eslint-disable no-console */
const jsonServer = require("json-server");
const server = jsonServer.create();
const path = require("path");
const router = jsonServer.router(path.join(__dirname, "server/db.json"));
const middlewares = jsonServer.defaults({
static: "node_modules/json-server/dist"
});
server.use(middlewares);
server.use(jsonServer.bodyParser);
server.use(function(req, res, next) {
setTimeout(next, 0);
});
function createSlug(value) {
return value
.replace(/[^a-z0-9_]+/gi, "-")
.replace(/^-|-$/g, "")
.toLowerCase();
}
function validateProduct(product) {
if (!product.title) return "Title is required.";
if (!product.tagline) return "Tagline is required.";
if (!product.description) return "Description is required.";
return "";
}
server.use((req, res, next) => {
if (req.method === "POST") {
req.body.createdAt = Date.now();
}
next();
});
server.post("/products/", function(req, res, next) {
const error = validateProduct(req.body);
if (error) {
res.status(400).send(error);
} else {
req.body.slug = createSlug(req.body.title);
next();
}
});
server.use(router);
const port = 3033;
server.listen(port, () => {
console.log(`JSON Server is running on port ${port}`);
});

Answer 1

You appear to be attempting to start multiple web servers from your npm start command in a single app engine instance:
"start": "cross-env NODE_ENV=production node server.js & node createMockDB.js & node apiServer.js"
I've never seen this before and I doubt very much GAE can deal with it. GAE expects a single node application serving requests on port process.env.PORT.
If you want multiple different servers running within the same GAE project, you should probably deploy them as independently as different services. Each of them should have an app.yaml that specifies a unique service name, and you'll deploy them each independently. The documentation here is fairly comprehensive.