Нужны советы: стратегии развертывания ReactJS и API Springboot

Question

Я просто хочу знать, как вы, ребята, делаете это.

Вот что я сделал:

• Я создал ReactJs и Springboot API по отдельности.

• В среде разработчиков я запускаю ReactJS с запуском npm, а Springboot просто запускает приложение.

• Доступ к реагированию с помощью: http://localhost:3000

• Доступ к API Springboot из реакции с: http://localhost:8080 с использованием axios

• Поскольку запрос от ReactionJs технически направлен на другой сервер (другой сервер и другой порт)): Я столкнулся с проблемой CORS: Политика CORS: На запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin».

• Поэтому я добавил @CrossOrigin (origins = "* ") на моем API.

• Все - радуги и бабочки.

А затем я развернул в среде prod:

• Сервер является Ubuntu.

• ReactJ, развернутые в NGINX

• SpringAPI загрузки Я только что сделал jar сервисом.

Первая проблема, с которой я столкнулся, - я забыл заменить запрос API React на фактический IP-адрес моего сервера (http://12.34.56.789:8080 вместо http://localhost:8080). Итак, я думаю, мой первый вопрос: как мне динамически настроить этот запрос API на реакцию, чтобы в среде dev он был: http://localhost:8080 и в prod env, setэто по ip-адресу.

Второй вопрос: вы обычно развертываете ReactJs и Springboot API, как это?Отдельно, и Springboot просто запускает свой собственный сервер приложений через jar.

В-третьих, что вы можете предложить, чтобы улучшить эту настройку?

Большое спасибо.

Answer 1

Вы можете использовать что-то вроде этого, чтобы справиться со сменой констант:

var API = {
    production: JSON.stringify('prod-url'),
    development: JSON.stringify('dev-url')
}

var environment = process.env.NODE_ENV === 'production' ? 'production' : 'development';

// webpack config
module.exports = {
    // define plugin can handle your constants
    plugins: [
        new webpack.DefinePlugin({
            'API_URL': API_URL[environment]
        })
    ],
    // ...
}

В вашем компоненте тогда

    axios(API_URL).then(()=>{

});