Laravel+VueでTodoListアプリを作る -MySQL連携(2)

前回の記事:

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

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

Dockerを使用して、apiとfrontendを分けて作成します。

今回はmysqlを使用して、データベースを連携します。

1. .envファイル作成

todo/
├── todo-api/       （Laravel API）
├── todo-app/      （Vue.js SPA）
└── .env　　　　　　（データベース接続情報）

## MYSQL
MYSQL_ROOT_PASSWORD=8409
MYSQL_DATABASE=todo_db
MYSQL_USER=todo_user
MYSQL_PASSWORD=8409

プロジェクトディレクトリに.envファイルを作成します。

.ignoreにも.envを追加します。

2. 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
    environment:
      DB_HOST: todo-mysql
      DB_DATABASE: ${MYSQL_DATABASE}
      DB_USERNAME: ${MYSQL_USER}
      DB_PASSWORD: ${MYSQL_PASSWORD}
    depends_on:
      - todo-mysql
    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/default.conf:/etc/nginx/conf.d/default.conf
    depends_on:
      - todo-api
    networks:
      - app-network

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

  todo-mysql:
    image: mysql:8.0
    container_name: todo-mysql
    restart: always
    env_file:
      - .env  # ⬅️ .env から環境変数を読み込む
    ports:
      - "3306:3306"
    volumes:
      - mysql_data:/var/lib/mysql
    networks:
      - app-network

networks:
  app-network:
    driver: bridge

volumes:
  mysql_data:

docker-compose.ymlにDBコンテナを追加します。

3. データベース作成

3.1. コンテナ起動

docker-compose up -d

3.2. テーブル作成

docker exec -it todo-mysql bash
mysql -u root -p 

パスワードは.envファイルで設定したものを使用します。

USE todo_db;

CREATE TABLE tasks (
    id INT(11) AUTO_INCREMENT PRIMARY KEY,
    user_id INT(11) NOT NULL,
    task VARCHAR(255) NOT NULL,
    content TEXT,
    deadline DATETIME,
    category VARCHAR(50),
    flag TINYINT(1) DEFAULT 0,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

4. API設定

4.1. todo-api/.env修正

DB_CONNECTION=mysql
DB_HOST=todo-mysql
DB_PORT=3306
DB_DATABASE=${MYSQL_DATABASE}
DB_USERNAME=${MYSQL_USER}
DB_PASSWORD=${MYSQL_PASSWORD}

todo/.envのMYSQL_DATABASE, MYSQL_USER, MYSQL_PASSWORDを使用します。

4.2. todo-api/config/database.php修正

'mysql' => [
            'driver' => 'mysql',
            'url' => env('DATABASE_URL'),
            'host' => env('DB_HOST'),
            'port' => env('DB_PORT'),
            'database' => env('DB_DATABASE'),
            'username' => env('DB_USERNAME'),
            'password' => env('DB_PASSWORD'),
            'unix_socket' => env('DB_SOCKET'),
            'charset' => 'utf8mb4',
            'collation' => 'utf8mb4_unicode_ci',
            'prefix' => '',
            'prefix_indexes' => true,
            'strict' => true,
            'engine' => null,
            'options' => extension_loaded('pdo_mysql') ? array_filter([
                PDO::MYSQL_ATTR_SSL_CA => env('MYSQL_ATTR_SSL_CA'),
            ]) : [],
        ],

mysqlの内容を修正します。

4.3. マイグレーション

php artisan migrate