React + Express в Azure: неверный заголовок узла

Question

Ошибка

При развертывании в Azure Web Apps с поддержкой нескольких контейнеров я получаю сообщение «Недопустимый заголовок узла» от https://mysite.azurewebsites.com

Локальная установка

Это нормально работает.

У меня есть два контейнера Docker: client приложение React и server приложение Express, в котором размещен мой API.Я использую прокси для размещения своего API на server.

В client package.json я определил:

"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

При развертывании в 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, связывающем интерфейсto:

ports:
 - 3000:80

• Несколько других комбинаций портов, но не повезло.

Кроме того, я думаю, что это как-то связано с proxy в client в package.jsonна основе этого репо

Любая помощь будет принята с благодарностью!

Обновление

Это настройка прокси.

Это несколько решает это.Удалив "proxy": "http://localhost:3001", я могу загрузить сайт, но предложенный ответ в проблеме не работает для меня.то есть я сейчас не могу получить доступ к своему API.

Answer 1

Итак, мне пришлось покинуть контейнеры и обслуживать приложение React в более типичной архитектуре MERN с сервером Express, на котором размещено приложение React из папки статической сборки.Я настроил некоторые маршруты с PassportJS для обработки моей аутентификации.

Не мое предпочтительное решение, я бы предпочел использовать контейнеры, но это работает.Надеюсь, что это указывает кому-то там в правильном направлении!

Answer 2

Никогда ранее не использовал azure, и я также не использую прокси-сервер (из-за его случайных проблем с подключением ), но если ваше приложение в основном работает express, вы можете использовать CORS .(Для справки: ваш сервер экспресс более распространен на 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, где я определяю промежуточное программное обеспечение Express:

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/ - , нажмите здесь , чтобы увидеть, как я его реализую для своеговеб-сайт), а env portal должен соответствовать имени хоста http://example.com.Эта настройка является гибкой и необходимой при работе в нескольких средах.

Или, если вы используете create-react-app, просто извлеките ваше приложение и внедрите прокси в производственной конфигурации webpack.

Или перенесите приложениена мой шаблон полного стека , который реализует cors пример выше.