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

Question

Я не смог использовать стандартный голый скин 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>

Мой package.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 run start.

Сейчас я использую 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

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

Answer 1

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

Процесс развертывания будет состоять из создания файла Dockerfile, проверки того, что index.js вашего приложения razzle слушает порт 8080, создания образа докера, отправки образа в реестр контейнеров, создания 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 на ваш идентификатор проекта.
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}`);
  });

5. Вернитесь к razzle-k8s/web папку и создайте образ с помощью docker build docker build -t gcr.io/${PROJECT_ID}/razzle:v1 . (добавляется. в конце команды).
6. Отправьте образ в реестр контейнеров docker push gcr.io/${PROJECT_ID}/razzle:v1
7. Создайте папку развертывания в каталоге razzle-k8s mkdir deploy
8. Перейдите в папку развертывания cd deploy и создайте app.yaml со следующей конфигурацией.

runtime: custom
env: flex
service: razzle

9. Бегать gcloud app deploy --image-url gcr.io/${PROJECT_ID}/razzle:v1 для развертывания вашего приложения с настраиваемой средой выполнения и введите (Y) для ответа "Да", чтобы развернуть приложение с использованием вашего образа razzle.
10. Чтобы просмотреть ваше приложение, просто введите gcloud app browse -s razzleи перейдите по URL-адресу. Он должен иметь видhttps://razzle-dot-your-project-name.appspot.com.