Prepare Nuxt (web) + Laravel (API) development environment in the same repository using docker-compose

Overview

I felt awkward about Laravel's Blade operation and wanted to separate the front, so I investigated and prepared the development environment. The reason for using the same repository is that when developing on the front side, I thought that it would be easier to verify the API if it was the same. I will leave it as an article in addition to the survey.

environment

• Host:Mac
• Docker
  • nginx:1.19-alpine
  • node:13.8-alpine
  • php:7.4-fpm-alpine

Complete image

Finished product

https://github.com/nagi125/spa_dev_template

• Please see README.md to generate Nuxt and Laravel projects.

Rough explanation

A set of Nuxt projects will be prepared in the directory "web", and a set of Laravel projects will be prepared in the directory "api". Various files are shared between Nuxt side and Laravel side using the volume function of docker. And on the Nuxt side, set the default position to "/ app", and on the Laravel side, set the default position to "/ app" and you're done.

About each container

Nginx

FROM nginx:1.19-alpine

ENV TZ Asia/Tokyo

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

Nginx conf file

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;
    }
}

Since it is a development environment, there are some parts that are made a little rough. In the case of / api, RP is set to go to Laravel and default to Nuxt.

• In the case of FastCGI, it may not be called RP in the strict sense.

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"]

Since it is a yarn group instead of npm, it is adjusted to use yarn. Leave the work area as "/ app".

Laravel

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

This container also has a work area of "/ 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 shares the Nuxt and Laravel container "/ app" with the host "./web" and "./api". If you want to add DB, you can add it to docker-compose.

Start-up

Once you have prepared the above, the development environment should start up with the following command.

$ docker-compose build
$ docker-compise up

Creating Nuxt and Laravel projects

Nuxt Create a Nuxt project with the following command. The answer to the question is omitted here. Please set it to your liking.

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

Start the development mode with the following command.

$ docker-compose exec web yarn dev

Laravel Create a Laravel project with the following command. Please choose the version you like.

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

Complete

Once the Nuxt and Laravel projects have been generated, they can be used as a development environment. You can access the Nuxt side with "localhost" and the Laravel side with "localhost / api".

• Don't forget to set the route on the Laravel side.

What about production operation?

Since it is a Dockerfile for development, if you want to use ECS in production, please prepare a Dockerfile for production in each directory as Dockerfile.dev.

Finally

It will be a memo of the survey contents, but I hope it will be useful for you.