Использование облачной платформы Google для развертывания приложений React - PullRequest
Новая
       35

Использование облачной платформы Google для развертывания приложений React

0 голосов
/ 16 октября 2018

У меня есть базовое приложение React, созданное с использованием: create-react-app.

Мой исходный код размещен на GitHub.

Я хочу использовать облачную платформу Google для размещения своего приложения React.

(у меня также есть собственный домен).

Каждый раз, когда происходит смена / слияние / изменение кодасделано в ветке master, я хотел, чтобы размещенное приложение на GCP обновляло содержимое моего сайта с master.

Ранее мне не удавалось следовать инструкциям Google по настройке процесса непрерывной интеграции для обновления и развертывания моего приложения.

Я использовал приложение Google Cloud Build GitHub, чтобы обновить и собрать мое приложение, но безуспешно.

Мой cloudbuild.yaml файл, состоящий из: 

steps:
  - name: 'gcr.io/cloud-builders/npm'
    args: ['install']
  - name: 'gcr.io/cloud-builders/npm'
    args: ['build']

У меня также было настроено ведро с рабочим URL-адресом appspot.com (после клонирования и развертывания приложения с использованием встроенной консоли навеб-сайт GCP), который был сопоставлен с моим пользовательским доменом.

Мои попытки обновить эту развернутую версию потерпели неудачу.

В отчаянии от попыток достичь желаемого рабочего процесса я переключился на Netlify, который позволил мне достичь того, чего хотел, и удалил свой проект изGCP.

Сейчас я пытаюсь запустить другой проект с нуля (на GCP), и мне потребовалась некоторая помощь, чтобы убедиться, что я правильно настроил этот новый проект, пошаговое руководство, если выбудут.Я абсолютный новичок, когда дело доходит до развертывания приложений на производственном уровне, я только практиковался и разрабатывал приложения уровня 'dev' на своей собственной машине, и я не нашел нигде другого, который бы помог мне достичь того, что я хотел бы сделать.

Рабочий процесс, который я пытаюсь выполнить, выглядит следующим образом:

  • Я делаю изменения в своем коде в главной ветви
  • Изменения передаются в GitHub / theглавная ветка
  • Изменения извлекаются из GitHub в GCP, а веб-сайт обновляется
  • Я вижу изменения, когда посещаю свой пользовательский домен

Как мне добитьсяэто правильно?Или GCP не идеальное решение для этого?

1 Ответ

0 голосов
/ 16 октября 2018

https://cloud.google.com/source-repositories/docs/quickstart-triggering-builds-with-source-repositories

Найдено то, что вы ищете!

Это будет сделано так, что каждый раз, когда вы делаете коммит, Google App Engine автоматически перераспределяется.

Редактировать

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, и вы точно будете знать, что ваше приложение работает в производственном режиме.

...