Как разместить приложение Reaction-JS с Хапи?

Question

Я сделал приложение Reaction-JS с React-маршрутизатором. Я настроил свое веб-приложение с этими конечными точками:

/home
/user/:id

Все работает отлично, пока я не попытаюсь разместить его на ec2 экземпляре с помощью Hapi.

Сначала я нашел этот учебник, https://medium.com/@tribou/serving-react-and-flux-with-hapi-and-webpack-213afacf94ea но, похоже, он просто генерирует статические html-страницы для каждого запроса и весь компонент состояния потеряны.

Затем я нашел этот, https://medium.com/@notrab/using-create-react-app-with-hapi-js-8f4ef3dcd311, он упаковывает все в build / только с одним файлом ввода, index.html. Тогда мне нужно вручную перенаправить /user/:id в build/index.html?

Answer 1

Для начала вам нужен инертный плагин, зарегистрируйтесь в вашем приложении.

Это мой код контроллера для / конечной точки:

exports.dashboard = {
    auth: false,
    description: 'main request handler',
    handler: async (request, h) => {
        return h.file('/PATH_TO_MY_BUILD_FOLDER/index.html', {confine: false});
    }
};

Только это, он разрывает index.html с моего диска.

Вам нужно обрабатывать / static / css / и /static/js/ folder, потому что index.html содержит ссылки на эти папки, я обработал с помощью nginx, вы можете использовать инертный плагин, конечно, но nginx, если вы спросите меня, вот конфигурация nginx файл для этого

server {
    listen 80;    
    server_name domain.com;
    root   /home/ubuntu/myapp/build;

  # handle static files in build folder
  location ~ ^/static/(.*)$ {
      alias /home/ubuntu/myapp/build/static/$1;
  }

  location / {        
        proxy_set_header Host $http_host;
        proxy_set_header X-Forwarded-For $remote_addr;
        proxy_pass http://localhost:3000;
        proxy_pass_header Server;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Scheme $scheme;
        proxy_connect_timeout 600;
        proxy_read_timeout 600;
        proxy_redirect off;
  }
}

Это все.

Поместите этот / handler в конец конфигурации вашего маршрута, обработайте маршрут /user/:id задолго до основного / маршрута.

Опять же, вот конфиг маршрута для вас:

server.route([
    {
        method: 'GET',
        path: '/user/:id',
        options: Controller.userDetail
    },
    {
        method: 'POST',
        path: '/user',
        options: Controller.createUser
    },        
    {
        method: 'GET',
        path: '/',
        config: Controller.dashboard
    },
    {
        method: 'GET',
        path: '/{param*}',
        config: Controller.dashboard
    },
]);