Préparez un environnement de développement Nuxt (web) + Laravel (API) dans le même référentiel à l'aide de docker-compose

Aperçu

Je me sentais mal à l'aise avec le fonctionnement de Laravel's Blade et je voulais séparer le front, alors j'ai étudié et préparé l'environnement de développement. La raison d'utiliser le même référentiel est que lors du développement sur la face avant, j'ai pensé qu'il serait plus facile de vérifier l'API si elles étaient identiques. Je vais le laisser comme un article tout en enquêtant.

environnement

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

Image complète

Produit fini

https://github.com/nagi125/spa_dev_template

• Veuillez consulter README.md pour générer des projets Nuxt et Laravel.

Explication grossière

Un ensemble de projets Nuxt sera préparé dans le répertoire "web", et un ensemble de projets Laravel sera préparé dans le répertoire "api". Différents fichiers sont partagés entre le côté Nuxt et le côté Laravel en utilisant la fonction de volume de docker. Et du côté Nuxt, définissez la position par défaut sur "/ app", et du côté Laravel, définissez la position par défaut sur "/ app" et vous avez terminé.

À propos de chaque conteneur

Nginx

FROM nginx:1.19-alpine

ENV TZ Asia/Tokyo

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

Fichier de configuration Nginx

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

Puisqu'il s'agit d'un environnement de développement, certaines parties sont un peu brutes. Dans le cas de / api, le RP est configuré pour aller à Laravel et la valeur par défaut est pour aller à Nuxt.

• Strictement parlant, Fast CGI ne peut pas être appelé 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"]

Puisqu'il s'agit d'un groupe de fils plutôt que de npm, il a été ajusté pour utiliser du fil. Laissez la zone de travail comme "/ 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

Ce conteneur a également une zone de travail "/ 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 partage le conteneur Nuxt et Laravel "/ app" avec l'hôte "./web" et "./api". Si vous souhaitez ajouter une base de données, vous pouvez l'ajouter à docker-compose.

Commencez

Une fois que vous avez préparé ce qui précède, l'environnement de développement doit démarrer avec la commande suivante.

$ docker-compose build
$ docker-compise up

Création de projets Nuxt et Laravel

Nuxt Créez un projet Nuxt avec la commande suivante. La réponse à la question est omise ici. Veuillez le régler à votre convenance.

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

Démarrez le mode de développement avec la commande suivante.

$ docker-compose exec web yarn dev

Laravel Créez un projet Laravel avec la commande suivante. Veuillez choisir la version que vous aimez.

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

Achevée

Une fois que les projets Nuxt et Laravel ont été générés, ils peuvent être utilisés comme environnement de développement. Vous pouvez accéder au côté Nuxt avec "localhost" et au côté Laravel avec "localhost / api".

• N'oubliez pas de définir l'itinéraire côté Laravel.

Qu'en est-il des opérations de production?

Puisqu'il s'agit d'un Dockerfile pour le développement, si vous souhaitez utiliser ECS en production, veuillez préparer un Dockerfile pour la production dans chaque répertoire en tant que Dockerfile.dev.

finalement

Ce sera une note du contenu de l'enquête, mais j'espère que cela vous sera utile.