React + Express в Azure: недопустимый заголовок узла
Ошибка
При развертывании в веб-приложениях Azure с поддержкой нескольких контейнеров я получаю сообщение «Недействительный заголовок хоста» от https://mysite.azurewebsites.com
Локальная установка
Это работает нормально.
У меня есть два контейнера Docker: client приложение React и server приложение Express, в котором размещен мой API. Я использую прокси для размещения своего API на server.
В пакете package.json client я определил:
"proxy": "http://localhost:3001"
Я использую следующий файл docker compose для локальной сборки.
version: '2.1'
services:
server:
build: ./server
expose:
- ${APP_SERVER_PORT}
environment:
API_HOST: ${API_HOST}
APP_SERVER_PORT: ${APP_SERVER_PORT}
ports:
- ${APP_SERVER_PORT}:${APP_SERVER_PORT}
volumes:
- ./server/src:/app/project-server/src
command: npm start
client:
build: ./client
environment:
- REACT_APP_PORT=${REACT_APP_PORT}
expose:
- ${REACT_APP_PORT}
ports:
- ${REACT_APP_PORT}:${REACT_APP_PORT}
volumes:
- ./client/src:/app/project-client/src
- ./client/public:/app/project-client/public
links:
- server
command: npm start
Все работает нормально.
На лазурном
При развертывании в Azure у меня есть следующее. Образы client и server хранятся в Реестре контейнеров Azure. Кажется, они отлично загружаются из журналов.
В моей службе приложений> Параметры контейнера я загружаю изображения из реестра контейнеров Azure (ACR) и использую следующий файл конфигурации (Docker compose).
version: '2.1'
services:
client:
image: <clientimage>.azurecr.io/clientimage:v1
build: ./client
expose:
- 3000
ports:
- 3000:3000
command: npm start
server:
image: <serverimage>.azurecr.io/<serverimage>:v1
build: ./server
expose:
- 3001
ports:
- 3001:3001
command: npm start
Я также определил в настройках приложения:
WEBSITES_PORT должен быть 3000.
Это приводит к ошибке на моем сайте «Недействительный заголовок хоста»
Вещи, которые я пробовал
• Обслуживание приложения из папки static в server. Это работает в том смысле, что обслуживает приложение, но портит мою аутентификацию. Мне нужно иметь возможность обслуживать статическую часть из client App.js и разговаривать с моим Express API для вызовов базы данных и аутентификации.
• В моем файле docker-compose привязка интерфейса к:
ports:
- 3000:80
• Несколько других комбинаций портов, но безуспешно.
Кроме того, я думаю, что это как-то связано с proxy в пакете client package.json на основе это репо
Любая помощь будет принята с благодарностью!
Обновлять
Это настройка прокси.
Этот несколько решает. Удалив "proxy": "http://localhost:3001", я могу загрузить веб-сайт, но предлагаемый ответ в проблеме мне не подходит. т.е. теперь я не могу получить доступ к своему API.
Ответы 2
Никогда раньше не использовал azure, и я также не использую прокси (из-за его проблемы со случайным подключением), но если ваше приложение в основном работает с express, вы можете использовать корс. (Кстати, экспресс-сервер чаще запускается на 5000, чем на 3001.)
Сначала я настроил папку env / config.js и файл следующим образом:
module.exports = {
development: {
database: 'mongodb://localhost/boilerplate-dev-db',
port: 5000,
portal: 'http://localhost:3000',
},
production: {
database: 'mongodb://localhost/boilerplate-prod-db',
port: 5000,
portal: 'http://example.com',
},
staging: {
database: 'mongodb://localhost/boilerplate-staging-db',
port: 5000,
portal: 'http://localhost:3000',
}
};
Затем, в зависимости от среды, я могу реализовать cors, где я определяю промежуточное ПО для экспресс-обработки:
const cors = require('cors');
const config = require('./path/to/env/config.js');
const env = process.env.NODE_ENV;
app.use(
cors({
credentials: true,
origin: config[env].portal,
}),
);
Обратите внимание, что портал и запросы AJAX ДОЛЖНЫ иметь совпадающие имена хостов. Например, если мое приложение размещено на http://example.com, мои запросы внешнего интерфейса API должны делать запросы к http://example.com/api/ (не http://localhost:3000/api/ - кликните сюда, чтобы увидеть, как я реализую его для своего веб-сайта), а окружение portal должно соответствовать имени хоста http://example.com. . Эта настройка является гибкой и необходимой при работе в нескольких средах.
Или, если вы используете create-react-app, просто извлеките свое приложение и внедрите доверенное лицо в производственную конфигурацию webpack.
Или перенесите свое приложение на мой шаблон полного стека, который реализует приведенный выше пример cors.
Возможно это другое решение: stackoverflow.com/questions/43619644/…
Итак, мне пришлось отказаться от контейнеров и обслуживать приложение React в более типичной архитектуре MERN с сервером Express, на котором размещено приложение React из папки статической сборки. Я настроил несколько маршрутов с помощью PassportJS для обработки моей аутентификации.
Это не мое предпочтительное решение, я бы предпочел использовать контейнеры, но это работает. Надеюсь, это укажет кому-то правильное направление!
Спасибо за ваш ответ! Я все еще изучаю варианты здесь, поэтому я опубликую, когда у меня будет рабочее решение.