Docker×Laravel8もくもく会のアプリ作成2(環境構築)

2023 9/14

2021年11月12日 2023年9月14日

もくもく会アプリ作成の環境構築をしていきます。

アプリの概要については、前回の記事をご参照ください。

これまでの記事

もくもく会アプリ概要

>>ココナラと似てるおすすめの副業サイトを確認する

あわせて読みたい

ココナラと似てるサイト比較11選！【2023年最新版】この記事ではココナラに似てる副業サイトを11こ紹介しています。今すぐスキルをお金にするなら、記事で気になったサービスに登録してみましょう。本記事のゴールココ…

>>リモートワークもあるおすすめの転職サイトを確認する

あわせて読みたい

転職におすすめなサイト11選【リモート・フリーランスも対象】転職におすすめなサイトが知りたいなぁ… 転職エージェントによって相性があります！この記事では、フリーランスの方でも利用できる転職におすすめなサイトを紹介しま…

休日で空いた時間の暇つぶしを探せるアプリを公開しています。

yoteipickerで休日の暇つぶしを探す

Contents

開発環境

mac intel(m1 Macはやり方違うっぽいです)
Dockerバージョン 20.10.7

構築する環境

Docker
PHP8
Mysql8.0
Laravel8
phpMyAdmin

対象のファイルを作成する

まずは、アプリ開発するファイルを作成していきます。
※私の場合は、デスクトップにprojectsというファイルを事前に作成しています。
なので、デスクトップにprojects作成してもいいし、しなくてもOKです。

PCから直接手動でファイル作成しても問題ありません。

~ % cd desktop

desktop % cd projects

アプリ開発するファイルを作成します。

projects % mkdir mokumoku-events
projects % cd mokumoku-events
mokumoku-events %

この状態になればOKです。

ここからはVSコードなどを開いて操作した方が早いので、VSコードを開いてください。

そして、まずは以下のように中身はからでいいいのでファイルを作成します。
※dockerファイルの中にmysql,nginx,phpがあり、dockerファイルと同じ階層にdocker-compose.ymlなどを配置

dockerファイルを開いた状態。Dockerfileと先頭は大文字のDにすること。

Dockerをインストールする

次に、Dockerの環境構築をするためにそもそもDockerをインストールしておきましょう。

Qiita

DockerをMacにインストールする（更新: 2019/7/13） – Qiita はじめに MacにDockerをインストールする方法についてまとめた記事です。ザクザク行けば10分程度でnginxの起動までいけると思います。この記事の目的はDockerに慣れること…

あわせて読みたい

404 Not Found – Qiita – Qiita

この辺りの記事が参考になると思います。

インストールができたら、dockerが使える状態か確認しましょう。

mokumoku-events % docker -v
Docker version 20.10.7

mokumoku-events % docker-compose -v
docker-compose version 1.29.2

となればOKです。

Dockerファイルに必要な情報を書き出す

空のファイルが用意できたら、実際に中身を書いていきます。

ただ説明が長くなるので、以下の記事を参考にdockerの構造を理解してください。

次に、こちらの記事を参考にDockerでLaravelの環境が使えるようにセットアップします。
※php,mysql,nginx,docker-compose.ymlはほぼこちらの内容です。私の環境では、phpmyadminが使えるようにdocker-compose.ymlにphpmyadminのコンテナを追加したぐらい。

あわせて読みたい

docker-compose.yml

version: '3.8'

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}

  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

# ----------------------------------
# phpMyAdminを動かすコンテナ
# ----------------------------------
  phpmyadmin:
    # Docker Hubからイメージをダウンロード
    image: phpmyadmin/phpmyadmin:5

    # コンテナの名前
    container_name: mokumoku-events_phpmyadmin

    # コンテナと他のサービスを繋げる
    links:
      - db

    # localhost:9000 で phpmyadmin の管理画面にアクセス。9000がすでに使われていたら、9001(localhost:9001で接続可)とか別の番号で対応すれば、OK
    ports:
      - 9000:80

    # セッション情報をボリュームに設定して永続化
    volumes:
      - ./docker/phpmyadmin/sessions:/sessions

mysql

FROM mysql:8.0

ENV TZ=UTC

COPY ./docker/mysql/my.cnf /etc/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]
default-character-set = utf8mb4

nginx

FROM nginx:1.18-alpine

ENV TZ=UTC

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

WORKDIR /var/www/html

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

php

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:12.14 /usr/local/bin /usr/local/bin
COPY --from=node:12.14 /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

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

phpmyadmin

空のままでOK。

.env

WEB_PORT=空いている番号
DB_PORT=空いている番号

DB_NAME=DBの名前
DB_USER=phpmyadminにログインする際のユーザー名
DB_PASSWORD=phpmyadminにログインする際のパスワード
DB_ROOT_PASSWORD=root

例：

WEB_PORT=1500
DB_PORT=2000

DB_NAME=mokumoku_events
DB_USER=mokumoku_user
DB_PASSWORD=mokumoku_pass
DB_ROOT_PASSWORD=root

phpmyadminを使って、データベースを操作していきますが、
DB_USER(ユーザー名)とDB_PASSWORD(パスワード)はphpmyadminでログインする際に必要です。

DB_NAMEは、DB名になります。

.gitignore

.env

srcの中は空のままでOK。(後でLaravelをインストールした際にsrcの中に自動で書き出される)

ビルドする

各ファイルに必要な記述ができたら、ビルドします。

mokumoku-events % docker compose build

エラーが起きた場合は、まずはタイプミス・ファイル名・ファイル作成箇所を疑ってみてください。

・ファイル名をDockerfileにすべきなのに、dockerfileになっている
・ファイルを作成する箇所が間違っている

私の場合は、
ERROR [internal] load build definition from Dockerfile
が起きたのですが、ファイル構造が間違っていたためでした。

×誤り：

mokumoku-events 
└─ docker
     ├─ php
     ├─ nginx
     └─ mysql
     └─ phpmyadmin
     └─ src
     └─ .env
     └─ .gitignore
     └─ docker-compose.yml

◎正しい:

mokumoku-events 
└─ docker
     ├─ php
     ├─ nginx
     └─ mysql
     └─ phpmyadmin
└─ src
└─ .env
└─ .gitignore
└─ docker-compose.yml

コンテナを起動する

ビルドに成功したら、コンテナを起動します。

mokumoku-events % docker compose up -d
 ⠿ Container mokumoku-events_phpmyadmin  Started                                                                                                                   3.8s
 ⠿ Container mokumoku-events_db_1        Started                                                                                                                   3.4s
 ⠿ Container mokumoku-events_app_1       Started                                                                                                                   3.2s
 ⠿ Container mokumoku-events_web_1       Started

こんな感じで起動できたら成功です。

docker Desktopのアプリでも確認してみましょう。

macであれば、command + スペースでspotlight検索ができるので、dockerと打てばdocker Desktopのアプリが立ち上がります。そこのContainers/Appsの項目です。

Laravelをインストール

Dockerのコンテナなどが起動できたので、Laravelをインストールしていきましょう。

// コンテナに入る
mokumoku-events % docker compose exec app bash

// composerがインストールされているか確認する。ないとLaravelをインストールできない。
/var/www/html# composer -V
Composer version 2.0.14 2021-05-21 17:03:37

// Laravel8をインストールする。6系などは、=6." .とバージョン指定する。
/var/www/html# composer create-project --prefer-dist "laravel/laravel=8.*" .

Application key set successfully.となれば成功。

// exitでコンテナから抜けられる
/var/www/html# exit
mokumoku-events %

8.*” .　”と.の間は半角スペースを空けてください。
8.*”_.

これでsrcの中に自動でLaravelがインストールされました。

動作確認

一通りのセットアップができたので、動作するか確認します。

※動作確認する前に、コンテナが起動しているか確認してください。StateがUpになっていればOKです。

mokumoku-events % docker-compose ps            
           Name                         Command               State                          Ports                       
-------------------------------------------------------------------------------------------------------------------------
mokumoku-events_app_1        docker-php-entrypoint php-fpm    Up                                               
mokumoku-events_db_1         docker-entrypoint.sh mysqld      Up      
mokumoku-events_phpmyadmin   /docker-entrypoint.sh apac ...   Up                    
mokumoku-events_web_1        /docker-entrypoint.sh ngin ...   Up

または、docker Desktopで確認できます。

この状態で、まずはweb画面の確認です。

.envでWEB_PORTで設定した番号です。例えば、WEB_PORT=90としていたら、localhost:90とURLに打ってみて、以下のLaravel初期画面が表示されるか確認してください。

次にphpmyadminに接続できるか確認しましょう。

docker-compose.ymlで、
ports:
　- 9000:80
と設定していたので、URLにlocalhost:9000と打ってみましょう。
すると、以下のようにphpmyadminに接続できるので、ユーザー名とパスワードを打ちましょう。
(ユーザー名:.envファイルのDB_USER
パスワード:.envファイルのDB_PASSWORD)

接続できればOKです。

これでLaravel画面とphpadmin接続の確認できました。

コンテナが起動している状態で、
web画面の表示は、localhost:90(.envのWEB_PORTで定義した番号)
phpmyadminには、localhost:9000で接続できる状況。

マイグレートできるか確認する

php artisan migrateで実際にマイグレートできるか確認します。

まずはappコンテナに入ります。

mokumoku-events % docker compose exec app bash

そしてmigrateを実行してみます。

/var/www/html# php artisan migrate
Migrating: 2014_10_12_000000_create_users_table
Migrated:  2014_10_12_000000_create_users_table (206.53ms)
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated:  2014_10_12_100000_create_password_resets_table (101.06ms)
Migrating: 2019_08_19_000000_create_failed_jobs_table
Migrated:  2019_08_19_000000_create_failed_jobs_table (91.65ms)
Migrating: 2019_12_14_000001_create_personal_access_tokens_table
Migrated:  2019_12_14_000001_create_personal_access_tokens_table (137.66ms)

このようにLaravelをインストールしたときにすでにデフォルトで存在しているマイグレーションファイルが実行されました。

また、本当に実行できているかmigrate:statusを使って確認します。

/var/www/html# php artisan migrate:status
+------+-------------------------------------------------------+-------+
| Ran? | Migration                                             | Batch |
+------+-------------------------------------------------------+-------+
| Yes  | 2014_10_12_000000_create_users_table                  | 1     |
| Yes  | 2014_10_12_100000_create_password_resets_table        | 1     |
| Yes  | 2019_08_19_000000_create_failed_jobs_table            | 1     |
| Yes  | 2019_12_14_000001_create_personal_access_tokens_table | 1     |
+------+-------------------------------------------------------+-------+

全てYesになっており、マイグレーションが実行できていることが確認できましたね。

ちょっと長くなりましたが、これでDockerとLaravel8の環境構築は終わりです。

次回は、テーブル設計や初期画面表示を解説します。

あわせて読みたい