docker-compose를 사용하여 동일한 리포지토리에서 Nuxt (web) + Laravel (API) 개발 환경을 준비하십시오.

개요

라라벨의 블레이드 운용에 어색함을 느끼고 프런트를 분리하고 싶어졌기 때문에 조사해 개발 환경을 준비했다.
같은 리포지토리로 한 이유는 프런트측의 개발을 하고 있을 때에 같은 쪽이 API의 검증을 하기 쉽다고 생각했기 때문입니다.
조사 다음에 기사로 남겨둔다.

환경

Host:Mac

Docker

nginx:1.19-alpine

node:13.8-alpine

php:7.4-fpm-alpine

완성 이미지

완제품

htps : // 기주 b. 코 m / 나기 125 / s 파_ v_ mp
※ Nuxt와 Laravel의 프로젝트는 README.md를 보고 생성해 주십시오.

자꾸 설명

"web"이라는 디렉토리에 Nuxt의 프로젝트 세트가, "api"라는 디렉토리에 Laravel의 프로젝트 세트가 준비됩니다.
docker의 volume 기능을 이용해 Nuxt측과 Laravel측에서, 각종 파일을 공유하고 있습니다.
그리고 Nuxt측은 디폴트 위치를 「/app」에, Laravel측도 디폴트 위치를 「/app」로 해 두면 완성입니다.

각 컨테이너에 대해

Nginx

FROM nginx:1.19-alpine

ENV TZ Asia/Tokyo

COPY conf/default.conf /etc/nginx/conf.d/default.conf

Nginx conf 파일

server {
    server_name         localhost;

    proxy_set_header    Host                 $host;
    proxy_set_header    X-Real-IP            $remote_addr;
    proxy_set_header    X-Forwarded-Host     $host;
    proxy_set_header    X-Forwarded-Server   $host;
    proxy_set_header    X-Forwarded-For      $proxy_add_x_forwarded_for;

    location / {
        proxy_pass    http://web:3000;
    }

    location /api {
        try_files $uri $uri/ /index.php$is_args$args;
    }

    location ~ \.php$ {
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass   api:9000;
        fastcgi_index  index.php;

        include        fastcgi_params;
        fastcgi_param  SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param  PATH_INFO $fastcgi_path_info;
    }
}

개발 환경이므로 약간 잡담하게 만드는 부분은 있습니다.
/api의 경우는 Laravel을 보러 가고, 디폴트는 Nuxt를 보러 가도록(듯이) RP 설정되어 있습니다.
※FastCGI의 경우는 엄밀하게는 RP라고 말하지 않을지도 모릅니다만・・・.

Nuxt.js

FROM node:13.8-alpine

RUN apk update && \
    apk add git && \
    apk add --no-cache curl && \
    curl -o- -L https://yarnpkg.com/install.sh | sh && \
    yarn add @vue/cli @vue/cli-service-global nuxt create-nuxt-app

ENV TZ Asia/Tokyo
ENV PATH $HOME/.yarn/bin:$HOME/.config/yarn/global/node_modules/.bin:$PATH

WORKDIR /app

CMD ["/bin/ash"]

npm이 아니라 yarn파이므로 yarn을 이용하도록 조정하고 있습니다.
작업 영역을 "/app"로 둡니다.

라라벨

FROM php:7.4-fpm-alpine

ENV TZ Asia/Tokyo
ENV COMPOSER_ALLOW_SUPERUSER 1

# install Lib
RUN apk update && \
    apk add --no-cache --virtual .php-builds oniguruma-dev git zip unzip

# add php-ext-module
RUN docker-php-ext-install mbstring && \
    docker-php-ext-enable mbstring

# install Composer
RUN curl -sS https://getcomposer.org/installer | php && \
    mv composer.phar /usr/local/bin/composer && \
    chmod +x /usr/local/bin/composer

WORKDIR /app

이 컨테이너도 작업 영역을 "/app"로 둡니다.

docker-compose

version: '3'
services:
  nginx:
    container_name: nginx
    build:
      context: ./docker/nginx
      dockerfile: Dockerfile
    ports:
      - 80:80
    tty: true
    restart: always
    depends_on:
      - web

  web:
    container_name: web
    build:
      context: ./docker/web
      dockerfile: Dockerfile
    environment:
      PORT: '3000'
      HOST: '0.0.0.0'
    expose:
      - 3000
    volumes:
      - ./web:/app
    stdin_open: true
    tty: true
    restart: always
    depends_on:
      - api

  api:
    container_name: api
    build:
      context: ./docker/api
      dockerfile: Dockerfile
    environment:
      LANG: 'ja_JP.UTF-8'
      TZ: 'Asia/Tokyo'
    volumes:
      - ./api:/app
    expose:
      - 9000
    tty: true
    restart: always

docker-compose는 Nuxt와 Laravel 컨테이너의 "/app"을 호스트의 "./web"과 "./api"와 공유합니다.
DB를 추가하고 싶다면 docker-compose에 작성해야합니다.

시작

위까지 준비가 되면 아래의 커맨드로 개발 환경이 일어날 것입니다.

$ docker-compose build
$ docker-compise up

Nuxt와 Laravel 프로젝트 만들기

Nuxt

아래 명령으로 Nuxt 프로젝트를 만듭니다.
질문에 대한 대답은 여기에서 생략합니다.
원하는 설정으로 설정하십시오.

$ docker-compose exec web yarn create nuxt-app ./

아래 명령으로 개발 모드를 시작합니다.

$ docker-compose exec web yarn dev

라라벨

아래 명령으로 Laravel 프로젝트를 만듭니다.
버전은 좋아하는 물건으로하십시오.

$ docker-compose exec api composer create-project --prefer-dist laravel/laravel ./ "6.*"

완성

Nuxt와 Laravel 프로젝트 생성이 완료되면 개발 환경으로 사용할 수 있게 됩니다.
Nuxt측에는 「localhost」로, Laravel측에는 「localhost/api」로 액세스 할 수 있습니다.
※Laravel측의 route 설정을 잊지 않고.

프로덕션 운용은?

개발용의 Dockerfile이므로 프로덕션에서 ECS라든지를 이용하는 경우는 이쪽은 Dockerfile.dev로서 프로덕션용의 Dockerfile을 각 디렉토리에 준비해 주세요.

마지막으로

조사 내용의 메모가 됩니다만, 뭔가의 도움이 되면 다행입니다.