AWS Amplify 托管的 React App url 重定向很棘手

Question

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

我已经进行了大量研究，根据帖子：React-router urls don't work when refreshing or writing manually，我的问题似乎是由我的应用程序中使用的客户端路由以及当页面重新加载或刷新。原因是当页面第一次加载时，它还没有任何要渲染的东西，所以它向服务器发送了一个请求，在我的例子中，它没有发回响应。

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

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

Webpack：

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

Answer 1

尝试将to 键添加到CopyPlugin 配置对象，如下所示：

new CopyPlugin([
 { from: './public/_redirects' },
 { to: './public/ }
])