Question

我用react-router创建了一个react-js应用程序。我已经使用这些端点设置了我的网络应用程序：

/home
/user/:id

在我尝试使用Hapi在ec2实例上托管它之前，一切正常。

首先我找到了这个教程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

首先，您需要inert插件，注册您的应用程序。

这是/ endpoint的控制器代码：

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 /文件夹，因为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;
  }
}

这就是全部。

将 / 处理程序置于路径配置的末尾，在主 / 路由之前很久处理 / 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
    },
]);

如何与Hapi主持react-js应用程序？

1 个答案: