Google App Engine - приложение Razzle с изоморфной реакцией - обслуживает проблемы без клиентских пакетов или ресурсов - PullRequest
Новая
       90

Google App Engine - приложение Razzle с изоморфной реакцией - обслуживает проблемы без клиентских пакетов или ресурсов

0 голосов
/ 30 октября 2019

Мне не удалось взять стандартную открытую оболочку razzle-app (https://github.com/jaredpalmer/razzle)) и заставить ее работать, когда я разверну ее на Google App Engine. Если у кого-то есть опыт развертывания приложений изоморфного реагирования в GAE,тогда любые входные данные были бы хорошими.

После развертывания он передает html из server.js (он служит только html-текстом для маршрута, но ничего больше - ни приложения, ни каких-либо ресурсов на странице). В качестве подтверждения концепции я возвращал разный html-контент для разных маршрутов, и он, по-видимому, работает, поскольку html-текстовое содержимое и теги заголовков были разными. Однако на сайте нет статических ресурсов (нет изображений, css или js).

Вывод процесса сборки: 

razzle build

Creating an optimized production build...
Compiling client...
Compiled client successfully.
Compiling server...
Compiled server successfully.
Compiled successfully.

File sizes after gzip:

  48.22 KB  build/static/js/bundle.c798792d.js
  333 B     build/static/css/bundle.659481d8.css

каталог сборки содержит: 

> build
      > public 
            > static
                   > css
                   > js
                   > media
            > favicon and robots
     > static
            > media (same one as public/staic)
     > assets.json
     > server.js

Обратите внимание, что build/static/js не существует. Он находится внутри build/public/static/jsЭто странно? При доступе к сайту (только HTML-текст с сервера) я проверил голову, если пакет клиента был отправлен или нет. Это происходит из неправильного расположения. 

<script src="http://localhost:8081/static/js/bundle.js" defer="" crossorigin=""></script>

Мой пакет. JSON выглядитнапример: 

{
  "name": "my-razzle-app",
  "version": "0.1.0",
  "license": "MIT",
  "scripts": {
    "start": "razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production node build/server.js"
  },
  "dependencies": {standard
    "express": "^4.17.1",
    "razzle": "^3.0.0",
    "react": "^16.11.0",
    "react-dom": "^16.11.0",
    "react-router-dom": "^5.1.2"
  }
}

Обратите внимание, что GAE запускает запуск npm.

В настоящее время я использую flex, стандарт никогда не работал для меня вообще. app.yaml выглядит так: 

env: flex
runtime: nodejs
service: web

Локально работает: 

razzle start

 WAIT  Compiling...


✔ Client
  Compiled successfully in 2.14s

✔ Server
  Compiled successfully in 153.86ms

ℹ ｢wds｣: Project is running at http://localhost:3001/
ℹ ｢wds｣: webpack output is served from undefined
ℹ ｢wds｣: Content not from webpack is served from /home/anz/Cogi/timecloud-client/my-app
ℹ ｢wds｣: 404s will fallback to /index.html
✅  Server-side HMR Enabled!
? started

Я могу получить к нему доступ с локального: 3000, а не локального: 3001.

1 Ответ

0 голосов
/ 01 ноября 2019

Используйте пользовательскую среду выполнения для развертывания приложения Razzle в гибкой среде App Engine. Они являются ключом к проблеме развертываний в App Engine с приложениями razzle, поскольку тот факт, что значение переменной process.env.PORT build-time по умолчанию установлено на 3000, и для использования App Engine необходимо настроить приложение так, чтобы оно прослушивало порт 8080. как указано в документации .

Процесс развертывания будет состоять из создания Dockerfile, обеспечивающего прослушивание index.js вашего приложения razzle для порта 8080 и создание образа dockerотправка образа в реестр контейнеров, создание app.yaml для пользовательской среды выполнения и, наконец, развертывание приложения в App Engine.

Предполагается, что ваш проект Google Cloud Platform готов к развертыванию Для простоты приложения в App Engine вы можете использовать этот существующий Dockerfile для развертывания простого приложения razzle, выполнив следующие действия:

  1. В консоли Google Cloud Platform откройтеCloud Shell, установите конфигурацию вашего проекта с помощью gcloud config set project YOUR-PROJECT-NAME и запустите export PROJECT_ID=YOUR-PROJECT-NAMEчтобы установить переменную среды PROJECT_ID в ID вашего проекта.
  2. git clone https://github.com/Sach97/razzle-k8s.git
  3. cd razzle-k8s/web/src
  4. Измените файл index.js, чтобы сервер слушалпорт 8080. Измените эту часть кода const port = process.env.PORT || 3000; на const port = 8080 или просто жестко кодируйте значение 8080: 
export default express()
  .use((req, res) => app.handle(req, res))
  .listen(8080, function(err) {
    if (err) {
      console.error(err);
      return;
    }
    console.log(`> Started on port ${port}`);
  });
Вернитесь в папку razzle-k8s/web и создайте образ с помощью Docker build docker build -t gcr.io/${PROJECT_ID}/razzle:v1 . (в конце команды указана.). Переместите изображение в реестр контейнеров docker push gcr.io/${PROJECT_ID}/razzle:v1 Создайте папку развертывания в каталоге razzle-k8s mkdir deploy Перейдите в папку развертывания cd deploy и создайте файл app.yaml со следующей конфигурацией. 
runtime: custom
env: flex
service: razzle
Запустите gcloud app deploy --image-url gcr.io/${PROJECT_ID}/razzle:v1, чтобы развернуть приложение с пользовательской средой выполнения, и введите (Y), чтобы развернуть приложение с помощью образа razzle. Чтобы просмотреть приложение, просто введите gcloud app browse -s razzle и перейдите кURL. Он должен иметь форму https://razzle-dot-your-project-name.appspot.com.
...