在Google App Engine上部署React Express App:404错误

问题描述

我正尝试将我的React Express应用程序部署到Google Clouds App Engine，并且目前出现404状态错误:

I'm trying to deploy my React express app to Google clouds app engine and I am currently getting a 404 status error:

无法加载资源:服务器的状态为404()

Failed to load resource: the server responded with a status of 404 ()

以及页面上的Cannot GET/.

along with a Cannot GET / on the page.

在我的本地主机上一切正常，只是当我将其部署到Google Cloud时，我会收到此错误.

Everything works perfectly fine on my local host it is just when I deploy it to google cloud I get this error.

我的Google控制台日志还说:.get/home的Hello您好undefined undefined undefined

My google console log also says: Hello from .get /home undefined undefined undefined

所以

这是我的yaml文件:

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: '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;

Server.js

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}`)

推荐答案

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

Take a build for your project npm run build, then create your app.yaml file like this

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 文件并继续

you can modify your app.yaml file based on your build folder structure and proceed

这篇关于在Google App Engine上部署React Express App:404错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！