프론트 docker와 APIdocker 간에 액세스하는 방법

예를 들어 nuxt와 RESTAPI를 사용하여 개발하고 싶다면 github의 리포지토리를 프론트와 API로 나눌 것입니다.

리포지토리

front-docker 리포지토리 (nuxt로 프론트 만 구현)

api-docker 저장소 (PHP 및 ruby와 같은 백엔드 측만 구현)

전제

api-docker가 localhost:10000/api 로 기동하고 있다고 해서 localhost:10000/api 를 두드리면 응답이 돌아오는 상태로 합니다.

api-docker 엔드포인트

BAD

이렇게하면 nuxt (front-docker)에서 api (api-docker)에 localhost:10000/api로 액세스 할 수 없습니다.

localhost:10000/api

※ nuxt가 docker가 아닌 경우는 이것으로 OK

GOOD

docker끼리의 액세스이므로 localhost 의 부분을 http://docker.for.mac.localhost 로 할 필요가 있습니다.

http://docker.for.mac.localhost/api

프록시 설정

다음으로 프록시 설정입니다. 위만이라면 CORS (Cross-Origin Resource Sharing)로 화를냅니다.

환경마다 API의 엔드포인트가 바뀌므로 cross-env로 env 파일을 준비해 둔다

$ yarn add cross-env

config/env.development.ts

module.exports = {
  API_HOST: 'http://docker.for.mac.localhost',
}

@nuxtjs/proxy 설치

$ yarn add @nuxtjs/proxy

nuxt.config.ts에 추가

nuxt.config.ts

const envSet = require(`./config/env.${environment}.ts`)
const API_HOST = envSet.API_HOST

const config: NuxtConfiguration = {
  ...省略

  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
  ],
  /*
   ** Axios module configuration
   ** See https://axios.nuxtjs.org/options
   */
  axios: {
    proxy: true
  },
  proxy: {
    '/api': {
      target: `${API_HOST}`,
      changeOrigin: true,
      pathRewrite: {
        '^/api/': '/api/'
      }
    }
  }

  ...省略
}