Блог

Главная - Вопросы по программированию - Как связать приложение Nuxt с сервером API в docker-compose

Как связать приложение Nuxt с сервером API в docker-compose

#javascript #docker #vue.js #docker-compose #nuxt.js

#javascript #docker #vue.js #docker-compose #nuxt.js

Вопрос:

У меня есть два контейнера в моем docker-compose.yml : frontend и server . Интерфейс взаимодействует с API сервера через Apollo и использует process.env.VUE_APP_GRAPHQL_HTTP для получения конечной точки http.

В docker-compose.yml у меня есть:

 environment:
      HOST: 0.0.0.0
      VUE_APP_GRAPHQL_HTTP: 'http://server:4000/graphql'
      VUE_APP_GRAPHQL_WS: 'ws://server:4000/graphql'

Который отлично работает для рендеринга на стороне сервера с помощью NuxtJS. На стороне клиента, хотя я получаю сообщение об ошибке:

 OPTIONS http://server:4000/graphql net::ERR_NAME_NOT_RESOLVED

Если я установлю VUE_APP_GRAPHQL_HTTP: 'http://localhost:4000/graphql' в docker-compose.yml , это будет работать на стороне клиента, но не при рендеринге на стороне сервера. Тогда я получаю ECONNREFUSED ошибку.

Итак, вопрос в следующем: как я могу разрешить путь к моему API на стороне сервера и клиента с помощью NuxtJS?

Мой полный docker-compose.yml 

 version: "3.7"
services:
  frontend:
    container_name: frontend
    image: node
    restart: unless-stopped
    command: npm run docker
    volumes:
      - ./frontend:/usr/src/app
      - ~/.ssh:/root/.ssh:ro
    working_dir: /usr/src/app
    ports:
      - "3000:3000"
    environment:
      HOST: 0.0.0.0
      VUE_APP_GRAPHQL_HTTP: 'http://server:4000/graphql'
      VUE_APP_GRAPHQL_WS: 'ws://server:4000/graphql'
    depends_on:
      - server
    networks:
      - app

  server:
    container_name: server
    image: node
    restart: unless-stopped
    command: npm run docker
    volumes:
      - ./server:/usr/src/app
      - ~/.ssh:/root/.ssh:ro
    working_dir: /usr/src/app
    ports:
      - "4000:4000"
    depends_on:
      - database
    environment:
      PORT: 4000
      DATABASE_URL: mongodb://database:27017
    networks:
      - app

  database:
    container_name: database
    image: mongo
    volumes:
      - ./data:/data/db
    ports:
      - "27017:27017"
    networks:
      - app

networks:
  app:

Комментарии:

1. Вам не нужно объявлять HOST: 0.0.0.0 в вашем файле compose. Можете ли вы вставить свой файл compose? В противном случае проблему сложно отладить. Также избегайте использования «localhost» при работе с контейнерами. В большинстве случаев это приводит к проблемам.

2. Я добавил свой полный файл docker-compose. Я подумал, что мне нужен хост 0.0.0.0, чтобы использовать nuxt с docker.

3. Не могли бы вы, пожалуйста, сделать одну вещь: добавьте в свой / etc / hosts строку, подобную этой: «сервер 127.0.0.1» и повторите попытку. Если вы используете Windows, расположение файла hosts отличается

4. Тогда мои запросы не работают на стороне клиента и сервера: D также без записи host я вообще не могу получить доступ к приложению nuxt.

Ответ №1:

Возможно, не лучший способ, но я решил это с помощью специальных правил для сервера и интерфейса.

Загрузите js-файл в apollo config nuxt.config.js 

     clientConfigs: {
      default: '~/plugins/apollo.js',
    },

plugins/apollo.js:

 export default function(context) {
  let httpEndpoint = process.env.APOLLO_SERVER_HTTP || 'http://localhost:4000/graphql';
  let wsEndpoint = process.env.APOLLO_SERVER_WS || 'ws://localhost:4000/graphql';

  if (process.client) {
    httpEndpoint = process.env.APOLLO_CLIENT_HTTP || 'http://localhost:4000/graphql';
    wsEndpoint = process.env.APOLLO_CLIENT_WS || 'ws://localhost:4000/graphql';
  }

  return {
    httpEndpoint,
    httpLinkOptions: {
      credentials: 'same-origin',
    },
    wsEndpoint,
  };
}

передача переменных через docker-compose:

     environment:
      HOST: 0.0.0.0
      APOLLO_SERVER_HTTP: 'http://server:4000/graphql'
      APOLLO_CLIENT_HTTP: 'http://localhost:4000/graphql'
      APOLLO_SERVER_WS: 'ws://server:4000/graphql'
      APOLLO_CLIENT_WS: 'ws://localhost:4000/graphql'

Ответ №2:

хм, жаль, что лучшего ответа на этот вопрос пока не было. Вы определенно могли бы обойти это при тестировании, как предложено, создав запись в /etc / hosts для службы api, названной в docker, но это было бы не совсем идеально для ci / cd 🙁