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

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

0 голосов
/ 31 марта 2019

У меня есть два контейнера в моих 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 Ответ

0 голосов
/ 04 апреля 2019

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

Загрузить файл js в конфигурацию apollo nuxt.config.js

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

плагины / 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'
...