1

我的主要问题在标题中。背景：我构建了一个 React Web 应用程序，托管在 AWS Amplify 上，以及一个 Node/Express 服务器，托管在 AWS EC2 上，nginx 作为反向代理运行。此外，我使用了 Webpack 和 React-Router（可能很重要）。我的前端处理所有路由和视图，我的后端不发送任何东西来渲染到前端，只有数据。当我的应用在 localhost 和 Netlify 上运行时，没有问题。

我做了大量的研究，根据帖子：React-router urls don't work when refresh or writing manual，看来我的问题是由我的应用程序中使用的客户端路由和事实引起的当页面重新加载或刷新时。原因是当页面第一次加载时，它还没有任何要渲染的东西，所以它向服务器发送了一个请求，在我的例子中，它不会发回响应。

我读到有一个包罗万象的文件，它总是将捆绑包指向 dist 文件中的索引页面，并且还有一个从后端发送的 index.html 页面，可以工作。我尝试过使用包罗万象的路线。在下面的代码块中显示，我有一个 _redirects 页面，它确实包含在 dist 文件夹中（至少当我自己运行 npm run build 时），但它没有效果。

编辑 它进行了大量测试，但我设法通过在 AWS 控制台中玩耍并从那里而不是从 webpack 应用重定向/重写来解决所有问题。我自己尝试了迂回的解决方案，而不是直接去寻找源头，那就是 AWS。另一个让我感到困惑的问题是 react doc 和其他人提到向服务器发出请求，通常引用后端服务器，这让我忘记了 AWS amplify 也充当服务器

网页包：

module.exports = {
    entry: './src/index.tsx',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        publicPath: '/'
    },
    resolve: {
        extensions: ['.js', '.jsx', '.ts', '.tsx']
    },
    module: {
        rules: [
            { test: /\.(js|jsx|ts|tsx)$/, use: 'babel-loader' },
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            { test: /\.(woff(2)?|ttf|png|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                use: [{ loader: 'file-loader' }]
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'public/index.html'
        }),
        new CopyPlugin([
            { from: 'public/_redirects' }
        ])
    ],
    mode: process.env_NODE_ENV === 'production' ? 'production' : 'development',
    devServer: { historyApiFallback: true }
};

重定向文件：

/*    /index.html   200
4

1 回答 1

0

尝试像这样向配置对象添加一个to键：CopyPlugin

new CopyPlugin([
 { from: './public/_redirects' },
 { to: './public/ }
])
于 2020-07-10T02:16:18.620 回答