AWS Переадресация URL-адресов размещенного приложения React App в Amplify - сложная задача - PullRequest
Новая
       122

AWS Переадресация URL-адресов размещенного приложения React App в Amplify - сложная задача

0 голосов
/ 09 июля 2020

моя главная проблема в названии. Предыстория: я создал веб-приложение React, размещенное на AWS Amplify, и сервер Node / Express, размещенный на AWS EC2, с nginx, работающим как обратный прокси. Кроме того, я использовал Webpack и React-Router (возможно, важно). Мой интерфейс обрабатывает всю маршрутизацию и просмотры, мой сервер не отправляет ничего для рендеринга во внешний интерфейс, только данные. Когда мое приложение работает на localhost и Netlify, проблем нет.

Я провел массу исследований и, согласно сообщению: URL-адреса React-router не работают при обновлении или записи вручную , похоже, что моя проблема вызвана маршрутизацией на стороне клиента, используемой в моем приложении, и тем фактом, что это происходит при перезагрузке или обновлении страницы. Причина в том, что когда страница загружается в первый раз, ей еще нечего отрисовывать, поэтому она отправляет запрос на сервер, который в моем случае не отправляет ответ обратно.

Я прочитал это наличие универсального файла, который всегда будет направлять пакет на страницу индекса в файле dist, а также наличие страницы index. html, отправленной из серверной части, может работать. Я пробовал использовать комплексный маршрут. В приведенных ниже блоках кода показано, что у меня есть страница _redirects, которая включается в папку dist (по крайней мере, когда я сам запускаю npm run build), но это не оказывает никакого эффекта.

РЕДАКТИРОВАТЬ Потребовалось много тестов, но мне удалось все исправить, поигравшись в консоли AWS и применив перенаправления / перезапись оттуда, а не из веб-пакета. Я наигрался, пробуя обходные решения, а не go прямо к источнику, то есть AWS. Еще одна проблема, которая добавляла мне замешательства, заключалась в том, что реакция do c и других людей упоминала о выполнении запросов к серверу, часто ссылаясь на внутренний сервер, из-за чего я забыл, что AWS ampify также действует как сервер

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

1 Ответ

0 голосов
/ 10 июля 2020

Попробуйте добавить ключ to к объекту конфигурации CopyPlugin следующим образом: 

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