소개

Docker 환경을 사용하여 Laravel(API 서버), Nuxt.js(프런트) 환경을 구축했습니다.
그 때 コンテナ名関連のエラー 가 2개 정도 나왔으므로 그 점에 대해 기재합니다.

이 기사에서 다루지 않는 것

Docker 환경을 구축하는 방법

Laravel을 API 서버로 사용하는 방법

Nuxt.js에서 API를 요청하는 방법

개요

Laravel을 API 서버로, Nuxt.js를 전면으로 사용

axios를 사용하여 Laravel에 API 요청

DB 연결 문제

Laravel에서 DB에 액세스하면 다음 오류가 발생했습니다.



조사한 바 Docker의 경우, .env 의 변경이 필요하게 되는 것으로 수정.

(변경 전)

.env

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=

(변경 후)

.env

DB_CONNECTION=mysql
DB_HOST=db #ここをデータベースのコンテナ名にする
DB_PORT=3306
DB_DATABASE=laravel
DB_USERNAME=root
DB_PASSWORD=

안전하게 json을 얻을 수 있음을 확인할 수있었습니다!

CORS 문제

Nuxt.js에서는 axios를 사용하여 Laravel에 json을 가져갑니다.


프록시 관련으로 에러가 나왔으므로 대응합니다.

프록시 설정

모듈을 추가합니다.

$ yarn add @nuxtjs/proxy

nuxt 측에서는 /api 로 Laravel에 액세스합니다.
web 가 컨테이너명, 80 가 컨테이너의 포트가 됩니다. (여기를 처음 localhost:8000으로 하고 있었으므로 조금 넘어졌습니다)

nuxt.config.js

  modules: [
    "@nuxtjs/axios",
    "@nuxtjs/proxy" //追加
  ],
  axios: {
    proxy: true //追加
  },
  proxy: {
    "/api": "http://web:80" //追加
  },

안전하게 데이터를 얻을 수있었습니다!

결론

Laravel을 API 서버로서 Docker 환경에서 개발할 때 등은 상기 이외에도 필요한 부분이 나올까 생각합니다만, 그 주변은 검색하면 비교적 빨리 나오므로 거기에 별로 실려 있지 않은 것 에 관해서 이번 기재했습니다.