Reactjs 使用Google云平台部署React应用程序

Reactjs 使用Google云平台部署React应用程序,reactjs,git,deployment,google-cloud-platform,create-react-app,Reactjs,Git,Deployment,Google Cloud Platform,Create React App,我有一个基本的React应用程序,它是使用以下命令生成的:create React app 我的源代码托管在GitHub上 我希望使用谷歌云平台来托管我的React应用程序 (我还有一个自定义域) 每次对master分支进行推送/合并/代码更改时,我都希望GCP上的托管应用程序从master更新我的网站内容 以前,我没有按照谷歌提供的说明建立一个持续的集成过程来更新和部署我的应用程序 我使用Google Cloud Build GitHub应用程序试图更新和构建我的应用程序,但没有成功 我的cl

我有一个基本的React应用程序,它是使用以下命令生成的:
create React app

我的源代码托管在GitHub上

我希望使用谷歌云平台来托管我的React应用程序

(我还有一个自定义域)

每次对
master
分支进行推送/合并/代码更改时,我都希望GCP上的托管应用程序从
master
更新我的网站内容

以前,我没有按照谷歌提供的说明建立一个持续的集成过程来更新和部署我的应用程序

我使用Google Cloud Build GitHub应用程序试图更新和构建我的应用程序,但没有成功

我的
cloudbuild.yaml
文件包括:

steps:
  - name: 'gcr.io/cloud-builders/npm'
    args: ['install']
  - name: 'gcr.io/cloud-builders/npm'
    args: ['build']
我还用一个可用的
appspot.com
URL(使用GCP网站上的内置控制台克隆并部署了应用程序)设置了一个bucket,该bucket映射到我的自定义域

我尝试更新这个部署的版本失败了

在尝试实现我想要的工作流程的挫折中,我切换到Netlify,它允许我实现我想要的,并从GCP中删除了我的项目

我现在正尝试从头开始另一个项目(在GCP上),需要一些帮助以确保我正确设置了这个新项目,如果您愿意,请提供一个分步指导。在应用程序的生产级部署方面,我是一个完全的新手,只在我自己的机器上练习和开发了“开发”级应用程序,我还没有找到任何其他地方可以帮助我实现我想做的事情

我正在尝试实现的工作流程如下:

  • 我在主分支上更改代码
  • 更改被推送到GitHub/主分支
  • 更改将从GitHub拉入GCP,网站将得到更新
  • 我可以在访问自定义域时看到更改
我怎样才能正确地做到这一点?或者GCP不是解决这一问题的理想方案?

找到了你要找的东西

这将使你每次提交时,谷歌应用引擎都会自动重新部署

编辑

server.js

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'build')));

app.get('/', function(req, res) {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(8080);
package.json
中,向其添加
“build:gcp”:“react scripts build&&node server.js”

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.5.0",
    "react-dom": "^16.5.0",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.3.1",
    "react-scripts": "1.1.5",
    "redux": "^4.0.0",
    "redux-thunk": "^2.3.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "build:gcp": "react-scripts build && node server.js"
  },
  "devDependencies": {
    "enzyme": "^3.6.0",
    "enzyme-adapter-react-16": "^1.5.0"
  }
}

现在,当您部署应用程序时,运行
npm run build:gcp
命令,您将确定您的应用程序正在生产模式下运行。

在部署之前,如何确保React应用程序“构建”(缩小为生产文件)?为了实现这一目标,我需要做什么这就是我想说的。我已经看到了这个链接,我只是缺少了中间的一点,而不是运行
npm start
,运行
npm run build
,让服务器文件为build文件夹中的文件提供服务。我发布了一个你可以使用的
server.js
示例。从最初的问题开始,这已经是一个完整的工作周了,我一直在做其他事情,所以我几乎忘了我是如何达到上次的阶段的。为了让其他人想办法做到这一点,你介意为拥有自定义域的人准备一份关于首先要做什么的分步指南吗?也许我误解了google cloud网站上的说明,但即使使用命令行
gcloud deploy
(如上面的评论链接所示)部署我的应用程序,我的存储桶仍然是空的。这是正确的吗?我想我可能在部署后做了一些不正确的事情,因为我的appspot域根本不想让我进入我的应用程序页面。你看过日志了吗?真奇怪,它怎么就停止工作了