Zenn
🤘

Laravel8.xとVue.js3でToDoアプリを作成 1 ~環境構築~

2022/01/05に公開
Docker
Laravel
MySQL
PHP
nginx
tech

はじめに

Laravel8.xとVue.js3を使用してToDoアプリを作成します！！
自分で調べているとなかなかLaravel8.xとVue.js3での構築の仕方が見つからなかったため、記事にしました！！

今回は環境構築です！
Laravelの環境構築が今回のゴールとなります。
※構築についてはさくっと終わらせるため、説明は省いています。

構築

LaravelのView部分をVue.jsに置き換えて作成をしていきます。

フロントエンド

Vue.js3
TypeScript

バックエンド

PHP7.4.1
Laravel8.x

データベース

MYSQL8.0

インフラ

Docker
docker-compose
Nginx

環境構築

まずはLaravelとNginxとMYSQLの環境をDockerで構築していきたいと思います！

はじめに任意の場所にディレクトリを作成しましょう！

mkdir laravel-vue-todo

laravel-vue-todo内にdockerディレクトリ等を作成します。

cd laravel-vue-todo
mkdir docker
cd docker
mkdir mysql
mkdir nginx
mkdir php

ここまでで下記のようなディレクトリになったかと思います。

laravel-vue-todo
└ docker
  ├ mysql
  ├ nginx
  └ php

Docker設定-mysql-

mysql用の設定を書いていきたいと思います。
まずmysqlディレクトリ内にDockerfielとmy.cof`を作成します。

cd mysql
touch Dockerfile
touch my.cnf

Dockerfileに下記を書きます。

docker/mysql/Dockerfile
FROM mysql:8.0

COPY ./docker/mysql/my.cnf /etc/my.cnf

my.cnfを編集します。

docker/mysql/my.cnf
[mysqld]
user=mysql
character_set_server = utf8mb4
collation_server = utf8mb4_0900_ai_ci

# timezone
default-time-zone = SYSTEM
log_timestamps = SYSTEM

# Error Log
log-error = mysql-error.log

# Slow Query Log
slow_query_log = 1
slow_query_log_file = mysql-slow.log
long_query_time = 1.0
log_queries_not_using_indexes = 0

# General Log
general_log = 1
general_log_file = mysql-general.log

[mysql]
default-character-set = utf8mb4

[client]

Docker設定-nginx-

次にnginx用の設定を書いていきたいと思います。
まずnginxディレクトリ内にDockerfielとdefault.conf`を作成します。

cd nginx
touch Dockerfile
touch default.conf

Dockerfileに下記を書きます。

docker/nginx/Dockerfile
FROM nginx:1.18-alpine

ENV TZ Asia/Tokyo

# nginx config file
COPY ./docker/nginx/*.conf /etc/nginx/conf.d/

WORKDIR /var/www/html

default.confを書いていきます。

docker/nginx/default.conf
server {
    listen 80;
    
    root /var/www/html/public;

    access_log /var/log/nginx/access.log;
    error_log /var/log/nginx/error.log;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";

    index index.php index.html index.htm;

    charset utf-8;

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

    location = /favicon.ico { access_log off; log_not_found off; }
    location = /robots.txt  { access_log off; log_not_found off; }

    error_page 404 /index.php;

    location ~ \.php$ {
        fastcgi_pass app:9000;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        include fastcgi_params;
    }

    location ~ /\.(?!well-known).* {
        deny all;
    }
}

Docker設定-php-

次にphp用の設定を書いていきたいと思います。
まずphpディレクトリ内にDockerfielとphp.ini`を作成します。

cd php
touch Dockerfile
touch php.ini

Dockerfileに下記を書きます。

docker/php/Dockerfile
FROM php:7.4.1-fpm

# COPY php.ini
COPY ./docker/php/php.ini /usr/local/etc/php/php.ini

# Composer install
COPY --from=composer:2.0 /usr/bin/composer /usr/bin/composer

# install Node.js
COPY --from=node:lts /usr/local/bin /usr/local/bin
COPY --from=node:lts /usr/local/lib /usr/local/lib

RUN apt-get update && \
    apt-get -y install \
    git \
    zip \
    unzip \
    vim \
    && docker-php-ext-install pdo_mysql bcmath

WORKDIR /var/www/html

次にphp.iniを書きます。

[Date]
date.timezone = "Asia/Tokyo"
[mbstring]
mbstring.internal_encoding = "UTF-8"
mbstring.language = "Japanese"

docker-compose設定

ここまで来たらあと今作ったDockerfileを動かすdocker-compose.ymlファイルを作成して行きましょう。
laravel-vue-todoディレクトリ直下に作成します。

touch docker-compose.yml

作成できたら中身を編集します。

docker-compose.yml
version: '3.3'

volumes:
  mysql-volume:

services:
  app:
    build:
      context: .
      dockerfile: ./docker/php/Dockerfile
    volumes:
      - ./src/:/var/www/html
    environment:
      - DB_CONNECTION=mysql
      - DB_HOST=db
      - DB_PORT=3306
      - DB_DATABASE=${DB_NAME}
      - DB_USERNAME=${DB_USER}
      - DB_PASSWORD=${DB_PASSWORD}
      - "TZ=Asia/Tokyo"

  web:
    build:
      context: .
      dockerfile: ./docker/nginx/Dockerfile
    ports:
      - ${WEB_PORT}:80
    depends_on:
      - app
    volumes:
      - ./src/:/var/www/html

  db:
    build:
      context: .
      dockerfile: ./docker/mysql/Dockerfile
    ports:
      - ${DB_PORT}:3306
    environment:
      MYSQL_DATABASE: ${DB_NAME}
      MYSQL_USER: ${DB_USER}
      MYSQL_PASSWORD: ${DB_PASSWORD}
      MYSQL_ROOT_PASSWORD: ${DB_ROOT_PASSWORD}
      TZ: 'Asia/Tokyo'
    volumes:
      - mysql-volume:/var/lib/mysql

次にdocker-compose.yml内で使用している環境変数を定義します。
.envファイルを作成してから編集します。

touch .env
.env
WEB_PORT=80
DB_PORT=3306
DB_NAME=db_todo
DB_USER=root
DB_PASSWORD=root
DB_ROOT_PASSWORD=root

現在のディレクトリはこんな感じになってます。

laravel-vue-todo
├ docker
|  ├ mysql
|    ├ Dockerfile
|     └ my.cnf
|  ├ nginx
|     ├ Dockerfile
|     └ default.conf
|  └ php
|     ├ Dockerfile
|     └ php.ini
├ .env
└ docker-compose.yml

次にbuildをして立ち上げて見ましょう

docker-compose up --build -d

そうすると無事dockerが起動してsrcディレクトリが作成されると思います！

Laravel導入

あともう一息です！！
Laravelを導入していきましょう！

ターミナルに下記コマンドを入力して実行します！

docker-compose run app composer create-project --prefer-dist "laravel/laravel=8.*" .

しばらく待つとsrcディレクトリ内にたくさんファイルが作成されると思います！

一度立ち上げ直しましょう。

docker-compose restart

その後http://localhot:80にアクセスするとおそらく下記のエラー画面が表示されるかと思います！

このエラーは権限がないといわれているためコンテナに入ってコマンドを打てば直ります！

docker-compose exec app bash

chown www-data storage/ -R

念のためもう一度立ち上げ直してhttp://localhot:80にアクセスしてみましょう！

この画面が出れば環境構築成功です！！

次回

ここまでみていただきありがとうございました。
次回はVue.jsを導入していきたいと思います！！
https://zenn.dev/tasuya/articles/c559e49ed210c6

Discussion