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


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.


Complete image


Finished product

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


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.


FROM node:13.8-alpine

RUN apk update && \
    apk add git && \
    apk add --no-cache curl && \
    curl -o- -L | 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


CMD ["/bin/ash"]

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


FROM php:7.4-fpm-alpine

ENV TZ Asia/Tokyo

# 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 | php && \
    mv composer.phar /usr/local/bin/composer && \
    chmod +x /usr/local/bin/composer


This container also has a work area of "/ app".


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

    container_name: web
      context: ./docker/web
      dockerfile: Dockerfile
      PORT: '3000'
      HOST: ''
      - 3000
      - ./web:/app
    stdin_open: true
    tty: true
    restart: always
      - api

    container_name: api
      context: ./docker/api
      dockerfile: Dockerfile
      LANG: 'ja_JP.UTF-8'
      TZ: 'Asia/Tokyo'
      - ./api:/app
      - 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.


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.*"


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

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


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

Recommended Posts

Prepare Nuxt (web) + Laravel (API) development environment in the same repository using docker-compose
Use MailHog for checking emails in the development environment (using Docker)
Build a browser test environment using Capybara in the Docker development environment
Try using the Stream API in Java
Rails API server environment construction using docker-compose
[Note] Execute java program in the integrated development environment Eclipse-I tried using git
ChatWork4j for using the ChatWork API in Java
Streamlining Web system development using docker-compose and Git
Prepare the JVM language development environment with WSL
Allow development in Eclipse environment using iPLAss SDK
Try using the COTOHA API parsing in Java
Django development environment construction using Docker-compose (personal memorandum)
How to check the WEB application created in the PC development environment on your smartphone
Prepare the execution environment of Tomcat in IntelliJ Community
Build Docker + Laravel PHP + Vue.js development environment in 5 minutes
Make the strongest Laravel development environment (Docker) Japan time
Web application development environment construction in Java (for inexperienced people)
Setting the baseURL in the axios module of Docker environment Nuxt