Node.js 在Google应用程序引擎上部署React express应用程序：404错误

我正在尝试将我的React express应用程序部署到Google clouds应用程序引擎，当前收到404状态错误：

加载资源失败：服务器响应状态为404（）

以及无法在页面上获取/的

在我的本地主机上，一切都运行得非常好。当我将其部署到谷歌云时，我遇到了这个错误

我的谷歌控制台日志还显示：Hello from.get/home未定义

所以

这是我的yaml文件：

service: web-form
runtime: nodejs
env: flex

automatic_scaling:
   min_num_instances: 1
   max_num_instances: 1

env_variables:
  PROJECT_ID: 'staging'


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,
    };


    axios
  .post("http://localhost:5000/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;

import React，{Component}来自“React”；
从“/components/PageOne”导入PageOne；
从“/components/PageTwo”导入第二页；
从“/components/PageThree”导入第三页；
从“/components/PageFour”导入第四页；
从“/components/PageFive”导入第五页；
从“/components/PageSix”导入PageSix；
从“语义ui反应”导入{Button}；
导入“语义ui css/semantic.min.css”；
从“axios”导入axios；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
一般细节：“文本”，
fName：“文本”，
mName：“文本”，
//名称：“文本”，
性别：“文本”，
};
this.onContentChange=this.onContentChange.bind（this）；
this.onSubmitForm=this.onSubmitForm.bind（this）；
}
render（）{
返回(
提交表格




);
}
onSubmitForm=e=>{
e、 预防默认值（）；
风险值数据={
generalDetails:this.state.generalDetails，
fName:this.state.fName，
mName:this.state.mName，
lName:this.state.lName，
};
axios
.post（“http://localhost:5000/home“，数据）
。然后（结果=>{
console.log（结果）
})
.catch（（）=>{
log（“出现问题，请稍后再试”）；
});
};
//结束
onContentChange（字段名、数据）{
console.log（“内容更改”，数据）；
这是我的国家({
[字段名]：数据
});
}
}
导出默认应用程序；

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('/home', (req, res) => {
  console.log(
    'Hello from .get /home',
    req.body.generalDetails,
    req.body.firstName,
    req.body.mName
  )
})

app.post('/home', function (req, res) {
  const mailgun = require("mailgun-js");



  const DOMAIN = 'domain';
  const mg = mailgun({apiKey: 'mg'
, domain: 'domaing' });
  const message = {
    from: 'Tom <email>',
    to: 'email',
    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,
    }
  ]

  res.json(data)
})

app.listen(port, () => `Server running on port ${port}`)

const nodemailer=require（'nodemailer'））
const path=require（'路径'）
const express=require（'express'）
const app=express（）
const http=require（'http'）
const server=http.createServer（应用程序）
常数端口=8080
const cors=require（'cors'）
app.use（cors（））
const bodyParser=require（'body-parser'）
app.use（bodyParser.json（））
const mailgunTransport=require（'nodemailer-mailgunTransport'）
//支持JSON编码的实体
应用程序使用(
bodyParser.urlencoded({
//支持URL编码的实体
扩展：正确
})
)
app.get（'/home'，（请求，res）=>{
console.log(
“你好，从。get/home”，
要求正文一般细节，
req.body.firstName，
req.body.mName
)
})
应用程序post（'/home'，功能（请求、回复）{
const mailgun=require（“mailgun js”）；
常量域='域'；
const mg=mailgun（{apiKey:'mg'
，域：'域'}）；
常量消息={
来自：“汤姆”，
致：“电子邮件”，
主题：'登记表详情'，
html:
'请在下面查找新课程定向注册的详细信息'+
“一般详细信息”+
'一般详细信息：'+''+req.body.generalDetails+
“
名字：”+“”+req.body.fName+
“
中间名：”+“”+req.body.mName+
“
姓氏：”+“”+req.body.lName
};
mg.messages（）.send（消息，函数（错误，正文）{
控制台日志（主体）；
});
让数据=[
{
//第一页数据
generalDetails:req.body.generalDetails，
fName:req.body.fName，
mName:req.body.mName，
lName:req.body.lName，
}
]
res.json（数据）
})
app.listen（端口，（）=>`在端口${port}`上运行的服务器）

为您的项目创建一个版本npm run build，然后像这样创建app.yaml文件

env: standard    
runtime: nodejs10    
service: default    
handlers:
  - url: /static
    static_dir: build/static

  - url: /assets
    static_dir: build/assets

  - url: /(.*\.(json|ico|js))$
    static_files: build/\1
    upload: build/.*\.(json|ico|js)$

  - url: .*
    static_files: build/index.html
    upload: build/index.html

您可以根据构建文件夹结构修改app.yaml文件并继续