I am trying to deploy my react express app on google app engine. Everything works fine on localhost but when I deploy I get a 404 error:
I assume this could be something wrong with my handlers but i'm not to sure, help would be much appreciated.
Cannot GET /
Failed to load resource: the server responded with a status of 404 () This is what the console log says:
httpRequest: {
latency: "0.006s"
referer: "-"
remoteIp: "2001:8000:11d3:ed00:4854:5aba:9f93:dd47"
requestMethod: "GET"
requestUrl: "/"
responseSize: "139"
status: 404
userAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.157 Safari/537.36"
}
insertId: "ezhqr2g2ohjlxu"
jsonPayload: {
appLatencySeconds: "0.004"
httpRequest: {
protocol: "HTTP/1.1"
}
latencySeconds: "0.006"
trace: "dd9ffc275b4f1457905cf864bf17539c"
}
labels: {
appengine.googleapis.com/instance_name: "aef-web--form-20190524t155912-31cn"
appengine.googleapis.com/trace_id: "dd9ffc275b4f1457905cf864bf17539c"
compute.googleapis.com/resource_id: "1391234725058328108"
compute.googleapis.com/resource_name: "a68af8bf7290"
compute.googleapis.com/zone: "australia-southeast1-b"
}
logName: "confidential"
receiveTimestamp: "2019-05-26T22:36:57.374278865Z"
resource: {
labels: {
module_id: "web-form"
project_id: "confidential"
version_id: "20190524t155912"
}
type: "gae_app"
}
timestamp: "2019-05-26T22:36:54.837Z"
trace: "confidential"
}
and here is my yaml file:
service: web-form
runtime: nodejs
env: flex
automatic_scaling:
min_num_instances: 1
max_num_instances: 1
env_variables:
PROJECT_ID: 'project'
handlers:
- url: /*
secure: always
redirect_http_response_code: 301
script: auto
resources:
cpu: 1
memory_gb: 1.7
disk_size_gb: 10
volumes:
- name: ramdisk1
volume_type: tmpfs
size_gb: 1
App.js
import React, { Component } from "react";
import PageOne from "./components/PageOne";
import PageTwo from "./components/PageTwo";
import PageThree from "./components/PageThree";
import PageFour from "./components/PageFour";
import PageFive from "./components/PageFive";
import PageSix from "./components/PageSix";
import { Button } from "semantic-ui-react";
import "semantic-ui-css/semantic.min.css";
import axios from "axios";
class App extends Component {
constructor(props) {
super(props);
this.state = {
generalDetails: "Text",
fName: "Text",
mName: "Text",
// LName: "Text",
gender: "Text",
};
this.onContentChange = this.onContentChange.bind(this);
this.onSubmitForm = this.onSubmitForm.bind(this);
}
render() {
return (
<div className="App">
<PageOne handleChange={this.onContentChange} />
<PageTwo handleChange={this.onContentChange} />
<PageThree handleChange={this.onContentChange} />
<PageFour handleChange={this.onContentChange} />
<PageFive handleChange={this.onContentChange} />
<PageSix handleChange={this.onContentChange} />
<Button onClick={this.onSubmitForm}
style={{
marginLeft: 700,
}}
>Submit Form</Button>
<br />
<br />
</div>
);
}
onSubmitForm = e => {
e.preventDefault();
var data = {
generalDetails: this.state.generalDetails,
fName: this.state.fName,
mName: this.state.mName,
lName: this.state.lName,
email: this.state.email,
};
axios
.post("http://localhost:3000/home", data)
.then(result => {
console.log(result)
})
.catch(() => {
console.log("Something went wrong. Please try again later");
});
};
//end
onContentChange(fieldname, data) {
console.log("On Content Change", data);
this.setState({
[fieldname]: data
});
}
}
export default App;
server.js
const nodemailer = require('nodemailer')
const path = require('path')
const express = require('express')
const app = express()
const http = require('http')
const server = http.createServer(app)
const port = 8080
const cors = require('cors')
app.use(cors())
const bodyParser = require('body-parser')
app.use(bodyParser.json())
const mailgunTransport = require('nodemailer-mailgun-transport')
// to support JSON-encoded bodies
app.use(
bodyParser.urlencoded({
// to support URL-encoded bodies
extended: true
})
)
app.get('/', (req, res) => {
console.log(
'Hello from .get /home',
req.body.generalDetails,
req.body.firstName,
req.body.mName
)
})
app.post('/', function (req, res) {
const mailgun = require("mailgun-js");
const DOMAIN = 'sandbox89eb814ff83548cebd77c0c7d263172e.mailgun.org';
const mg = mailgun({apiKey: 'b81454a616bb9ab79e36ebd10984f1a3-115fe3a6-26eae655'
, domain: 'sandbox89eb814ff83548cebd77c0c7d263172e.mailgun.org' });
const message = {
from: 'Tom <thomas.hunt@careertrackers.org.au>',
to: 'thomas.hunt@careertrackers.org.au',
subject: 'Registration form details',
html:
'<h1 style="color:red">Please find new Program orientation registrations details below</h1>' +
'<p><strong>General Details</strong></p>' +
'<b> General Details: </b> ' + '' + req.body.generalDetails +
'<br> <b>First Name: </b> ' + '' + req.body.fName +
'<br> <b>Middle Name: </b> ' + '' + req.body.mName +
'<br> <b>Last Name: </b> ' + '' + req.body.lName +
};
mg.messages().send(message, function (error, body) {
console.log(body);
});
let data = [
{
// page one data
generalDetails: req.body.generalDetails,
fName: req.body.fName,
mName: req.body.mName,
lName: req.body.lName,
email: req.body.email,
}
]
res.json(data)
})
app.listen(port, () => `Server running on port ${port}`)
Package.json Reactexpress:
{
"name": "reactexpress",
"version": "1.0.0",
"description": "Starter kit for creating React and Express apps",
"main": "index.js",
"scripts": {
"client-install": "cd client && npm install",
"start": "node server.js",
"server": "nodemon server.js",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\""
},
"author": "Brad Traversy",
"license": "MIT",
"devDependencies": {
"nodemon": "^1.14.6"
},
"dependencies": {
"body-parser": "^1.19.0",
"concurrently": "^3.5.1",
"cors": "^2.8.5",
"express": "^4.16.2",
"mailgun-js": "^0.22.0",
"nodemailer": "^6.1.1",
"nodemailer-mailgun-transport": "^1.4.0",
"semantic-ui-css": "^2.4.1",
"semantic-ui-react": "^0.87.1"
}
}
package.json client:
{
"name": "client",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-scripts": "1.0.17"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"proxy": "http://localhost:3000"
}
来源：https://stackoverflow.com/questions/56319471/deploying-react-express-app-on-google-app-engine-endpoints-giving-error-message