Laravel+VueでTodoListアプリを作る (1)

LaravelとVueを使ってTodoListアプリを作ります。

todo/
├── todo-api/       （Laravel API）
└── todo-app/      （Vue.js SPA）

Dockerを使用して、FrontendとBackendを分けて作成します。

1. バックエンドの作成

1.1. Laravelプロジェクトの作成

composer create-project --prefer-dist laravel/laravel todo-api "^8.0"

1.2. GraphQLのインストール

composer require rebing/graphql-laravel

config/app.php

'providers' => [
    // ...
    Rebing\GraphQL\GraphQLServiceProvider::class,
],

サービスプロバイダーを追加します。

1.3. テストAPI作成

<?php

namespace App\GraphQL\Queries;

use Rebing\GraphQL\Support\Query;
use GraphQL\Type\Definition\Type;
use Rebing\GraphQL\Support\Facades\GraphQL;

class ExampleQuery extends Query
{
    protected $attributes = [
        'name' => 'example'
    ];

    public function type(): Type
    {
        return Type::string();
    }

    public function resolve($root, $args)
    {
        return "Hello, GraphQL!";
    }
}

todo/todo-api/app/GraphQL/Queries/ExampleQuery.phpを作成します。

1.4. API用Dockerfile作成

# PHP-FPM イメージ使用
FROM php:8.1-fpm

# 必須パッケージのインストール
RUN apt-get update && apt-get install -y \
    libpng-dev \
    libjpeg-dev \
    libfreetype6-dev \
    zip \
    git \
    && docker-php-ext-configure gd --with-freetype --with-jpeg \
    && docker-php-ext-install gd pdo pdo_mysql

# Composer インストール
COPY --from=composer:latest /usr/bin/composer /usr/bin/composer

# 作業ディレクトリの設定
WORKDIR /var/www

# すべてのファイルをコピー
COPY todo-api/ ./

# 依存関係のインストール
RUN composer install --no-dev --optimize-autoloader

# PHP-FPM ポート公開
EXPOSE 9000

# PHP-FPM 実行
CMD ["php-fpm"]

todo/todo-api/Dockerfileを作成します。

1.5. Nginx用Dockerfile作成

# Nginx イメージ使用
FROM nginx:latest

# 作業ディレクトリの設定
WORKDIR /var/www

# アプリケーションファイルをコンテナにコピー
# 現在のDockerfileがあるパスにあるpublicディレクトリのファイルをコピー
COPY ./../todo-api/public /var/www/html

# nginx 設定ファイルをコンテナにコピー
COPY nginx/default.conf /etc/nginx/conf.d/default.conf

# ポート80を公開
EXPOSE 80

# Nginx サーバー 起動
CMD ["nginx", "-g", "daemon off;"]

todo/todo-api-nginx/Dockerfileを作成します。

server {
    listen 80;
    server_name localhost;

    root /var/www/public; 
    index index.php index.html index.htm;

    location / {
        autoindex on;  
        try_files $uri $uri/ /index.php?$query_string;
    }

    # PHP 처리 설정
    location ~ \.php$ {
        fastcgi_pass todo-api:9000;  # PHP-FPM コンテナと接続
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }

    # 오류 페이지 설정
    error_page 404 /404.html;
    location = /404.html {
        root /usr/share/nginx/html;
    }
}

todo/nginx/default.confを作成します。

1.6. docker-compose.yml作成

version: '3.8'

services:
  todo-api:
    build:
      context: .
      dockerfile: todo-api/Dockerfile
    container_name: todo-api
    ports:
      - "9000:9000"  # PHP-FPM
    volumes:
      - ./todo-api:/var/www
    networks:
      - app-network

  todo-api-nginx:
    build:
      context: .
      dockerfile: todo-api-nginx/Dockerfile
    container_name: todo-api-nginx
    ports:
      - "80:80"  # Nginx 外部ポート
    volumes:
      - ./todo-api:/var/www/html  # Nginxが/var/www/htmlにpublicフォルダを見つけるように設定
      - ./nginx/default.conf:/etc/nginx/conf.d/default.conf
    depends_on:
      - todo-api
    networks:
      - app-network

networks:
  app-network:
    driver: bridge

todo/docker-compose.ymlを作成します。

全体的なディレクトリ構造は以下の通りです。

.
├── docker-compose.yml
├── nginx
│   └── default.conf
├── todo-api
│   ├── app
│   │   └── GraphQL
│   │       └── Queries
│   │           └── ExampleQuery.php
│   ├── Dockerfile
│   └── .env
└── todo-api-nginx
    └── Dockerfile

2. フロントエンドの作成

2.1. Vue.jsプロジェクトの作成

mkdir todo-frontend
cd todo-frontend
npm init -y

Frontendディレクトリを作成します。

npx create-react-app .
npm install -g @vue/cli
vue create .

2.2. Dockerfile作成

# Node イメージ使用
FROM node:16-alpine as build-stage
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build

# Nginxを使用してデプロイ
FROM nginx:alpine
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

todo-front/Dockerfileを作成します。

2.3. docker-compose.ymlにfrontEndサービスを追加

 todo-front:
    build:
      context: ./todo-front
    ports:
      - "8080:80"
    volumes:
      - ./todo-front:/app
    restart: always

todo/docker-compose.ymlにfrontEndサービスを追加します。

2.4. フロントエンドのビルド

docker-compose build
docker-compose up

3. 接続テスト

localhost:80 に接続したら　Laravelのページ,

localhost:8080 に接続したら　Vue.jsのページが表示されることを確認します。