Reactjs 使用Google云平台部署React应用程序
我有一个基本的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
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,网站将得到更新
- 我可以在访问自定义域时看到更改
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域根本不想让我进入我的应用程序页面。你看过日志了吗?真奇怪,它怎么就停止工作了