Bereiten Sie mit Docker-Compose eine Nuxt (Web) + Laravel (API) -Entwicklungsumgebung im selben Repository vor

Überblick

Ich fühlte mich über den Betrieb von Laravels Klinge unbehaglich und wollte die Front trennen, also untersuchte und bereitete ich die Entwicklungsumgebung vor. Der Grund für die Verwendung des gleichen Repositorys ist, dass ich bei der Entwicklung auf der Vorderseite dachte, dass es einfacher wäre, die API zu überprüfen, wenn sie identisch wären. Ich werde es während der Untersuchung als Artikel belassen.

Umgebung

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

Vollständiges Bild

Fertiges Produkt

https://github.com/nagi125/spa_dev_template

• Informationen zum Generieren von Nuxt- und Laravel-Projekten finden Sie unter README.md.

Grobe Erklärung

Eine Reihe von Nuxt-Projekten wird im Verzeichnis "web" vorbereitet, und eine Reihe von Laravel-Projekten wird im Verzeichnis "api" vorbereitet. Mithilfe der Volume-Funktion von Docker werden verschiedene Dateien zwischen der Nuxt-Seite und der Laravel-Seite gemeinsam genutzt. Setzen Sie auf der Nuxt-Seite die Standardposition auf "/ app" und auf der Laravel-Seite auf "/ app", und Sie sind fertig.

Über jeden Container

Nginx

FROM nginx:1.19-alpine

ENV TZ Asia/Tokyo

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

Nginx conf Datei

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

Da es sich um eine Entwicklungsumgebung handelt, gibt es einige Teile, die etwas rau sind. Im Fall von / api ist das RP auf Laravel und standardmäßig auf Nuxt eingestellt.

• Im Fall von Fast CGI kann es nicht im engeren Sinne als RP bezeichnet werden.

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

Da es sich eher um eine Garngruppe als um npm handelt, wurde die Verwendung von Garn angepasst. Verlassen Sie den Arbeitsbereich als "/ 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

Dieser Container hat auch einen Arbeitsbereich von "/ 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 teilt den Nuxt- und Laravel-Container "/ app" mit dem Host "./web" und "./api". Wenn Sie eine Datenbank hinzufügen möchten, können Sie sie zu Docker-Compose hinzufügen.

Anlaufen

Nachdem Sie die oben genannten Schritte vorbereitet haben, sollte die Entwicklungsumgebung mit dem folgenden Befehl gestartet werden.

$ docker-compose build
$ docker-compise up

Erstellen von Nuxt- und Laravel-Projekten

Nuxt Erstellen Sie ein Nuxt-Projekt mit dem folgenden Befehl. Die Antwort auf die Frage wird hier weggelassen. Bitte stellen Sie es nach Ihren Wünschen ein.

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

Starten Sie den Entwicklungsmodus mit dem folgenden Befehl.

$ docker-compose exec web yarn dev

Laravel Erstellen Sie ein Laravel-Projekt mit dem folgenden Befehl. Bitte wählen Sie die Version, die Sie mögen.

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

Komplett

Sobald die Nuxt- und Laravel-Projekte erstellt wurden, können sie als Entwicklungsumgebung verwendet werden. Sie können mit "localhost" auf die Nuxt-Seite und mit "localhost / api" auf die Laravel-Seite zugreifen.

• Vergessen Sie nicht, die Route auf der Laravel-Seite festzulegen.

Was ist mit dem Produktionsbetrieb?

Da es sich um ein Dockerfile für die Entwicklung handelt, bereiten Sie Dockerfile für die Produktion in jedem Verzeichnis als Dockerfile.dev vor, wenn Sie ECS in der Produktion verwenden möchten.

Schließlich

Es wird ein Memo der Umfrageinhalte sein, aber ich hoffe, es wird für Sie nützlich sein.