Razzle реагирует, не загружая надлежащий пакет при развертывании - PullRequest
Новая
       83

Razzle реагирует, не загружая надлежащий пакет при развертывании

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

Я сгенерировал приложение Razzle React, используя yarn create-razzle-app my-app. Я развернул его в среде nodeJS Elastic Beanstalk после сборки.

После нажатия на ссылку эластичного бобового стебля я не вижу CSS, примененного к сайту. Кажется, что локальный запуск того же сервера работает нормально, поэтому мне интересно, нужно ли еще что-то сделать, чтобы настроить приложение Razzle для SSR на эластичном бобовом стебле?

При проверке bundle.[HASH].js и bundle.[HASH].css они оба выглядят следующим образом: 

<!doctype html>
    <html lang="">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charset="utf-8" />
        <title>Welcome to Razzle</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="/static/css/bundle.9638be3a.css">
        <script src="/static/js/bundle.f03ddc0c.js" defer></script>
    </head>
    <body>
        <div id="root"></div>
    </body>
</html>

Это, очевидно, вызывает ошибки, так как это недопустимый CSS или JS, как указано в выводе консоли bundle.f03ddc0c.js:1 Uncaught SyntaxError: Unexpected token '<'

index

<!doctype html>
    <html lang="">
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charset="utf-8" />
        <title>Welcome to Razzle</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="/static/css/bundle.9638be3a.css">
        <script src="/static/js/bundle.f03ddc0c.js" defer></script>
    </head>
    <body>
        <div id="root"><div class="Home"><div class="Home-header"><h2>Welcome to Razzle</h2></div></div></div>
    </body>
</html>

Переменные окружения при сборке и в конфигурации Elastic Beanstalk: 

NODE_ENV=production
PORT=8081

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 PORT=8081 node build/server.js"
  },
  "dependencies": {
    "express": "^4.17.1",
    "razzle": "^3.0.0",
    "react": "^16.11.0",
    "react-dom": "^16.11.0",
    "react-router-dom": "^5.1.2"
  }
}

.ebextensions/nodecommand.config

option_settings:
  aws:elasticbeanstalk:container:nodejs:
    NodeCommand: "npm run start:prod"

1 Ответ

1 голос
/ 31 октября 2019

У меня нет готового решения, которое бы работало на Elastic Beanstalk, но я публикую решение почти идентичной проблемы, с которой я столкнулся при развертывании в Google App Engine.

У меня былодобавить сценарий сборки при развертывании (что сделало мой процесс сборки ненужным). Ранее при развертывании производственной сборки я столкнулся с той же проблемой, когда css / js / images просто не загружались.

В package.json я добавил: 

...
"scripts": {
    "gcp-build": "razzle build",
    "start": "razzle start",
    "build": "razzle build",
    "test": "razzle test --env=jsdom",
    "start:prod": "NODE_ENV=production PORT=8081 node build/server.js"
  },
...

"gcp-build": "razzle build" создаст производственную сборку до запуска start в AppEngine. Таким образом, я смог получить приложение, как я ожидал, с активами. Вы можете попробовать, если есть способ автоматизировать сборку для вашей платформы. Я все еще исследую, как развернуть мою ручную сборку. Я подозреваю, что это как-то связано с номером порта (в моем случае). Установка PORT на ожидаемое значение не работает для меня.

Если это сработает, вы можете обойти то, что происходит под капотом, и найти, что вы исправили это.

ОБНОВЛЕННЫЙ ОТВЕТ :

Попробуйте это на server.js. В основном, укажите правильный путь. 

// for remote deployment set to build folder, otherwise use the public folder
const publicFolder = process.env.NODE_ENV==='production' ? path.join(__dirname, '../build/public') : 'public';

const server = express()                                              // prepare server
                .disable('x-powered-by')
                .use(express.static(publicFolder));

После этого пакет css / js прекрасно загружается.

...