プログラミング無料体験レッスン一覧【豪華特典付き】

【CakePHPチュートリアル1】PHP×CakePHPで簡単なSNSを作る:Dockerで開発環境を爆速構築する編

皆さんこんにちは現役エンジニアのタカです。

最近PHPのフレームワークというとLaravelが人気ですが、まだまだCakePHPのプロジェクトも多く動いています。

そして個人的にプログラミング学習初学者にはLaravelよりルールがガチガチなCakePHPの方がオススメだと感じています。

ということで当サイトでは『CakePHPを使ってシンプルなSNSを作る』事を目標にした連載形式のチュートリアルを作っていこうと思います。

今回はその第1回目です。

まずはDockerを使って開発環境を作りdocker-composeを使える様にする所からスタートしていきましょう。

この連載の目的

  • CakePHPを使ってシンプルなSNSを作る
  • SNS作りを通してCakePHP基本に対する理解を深める
  • CakePHPの学習がメインのためデプロイまではしない
  • 本連載ではバックエンド開発に重点を置く為フロントはbootstrapなどでお茶お濁す

※Macを使って開発します。

今回の記事の主旨

  1. Dockerを使ってローカル開発環境を作る
  2. CakePHPのWelcome画面を表示してDBの設定ができたらゴール

Dockerのインストール

まずはDockerのインストールです。

Dockerの公式ホームページからインストーラーをダウンロードしましょう。

ダウンロードが済んだらインストーラーを実行してインストーラーの指示に従ってインストールしましょう。

インストールが完了したら試しにターミナル(winならコマンドプロンプト)で下記のコマンドを叩いてみましょう。

$ docker ps
CONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                                        NAMES

同じ出力が得られればDockerのインストールは完了です。

Windows10 Homeを使っている方はうまくDockerが起動しない可能性があります。
その際はこちらのブログを確認してDockerの起動に挑戦してみてください

作業ディレクトリとDockerファイルを作ってCakePHPをインストールする

では今回はCakePHP-SNSというディレクトリを作ってその中で作業をすることにします。

初めに作業するディレクトリとDockerファイルを置くディレクトリを作成します。

今回はデータベースにMySQLを使うのでDockerファイルの置き場はDockerディレクトリの中にphpとmysqlというディレクトリを作ってそこに格納します。

$ mkdir -p CakePHP-SNS/Docker/{mysql,php}

ではまずPHP側のDockerファイルを作成しましょう。

今作ったphpディレクトリの中にDockerfileという名前のファイルを作成して下記のコードを記述します。

FROM php:7.2-apache

ENV APACHE_DOCUMENT_ROOT /var/www/html/app/webroot
RUN sed -ri -e 's!/var/www/html!${APACHE_DOCUMENT_ROOT}!g' /etc/apache2/sites-available/*.conf \
&& sed -ri -e 's!/var/www/!${APACHE_DOCUMENT_ROOT}!g' /etc/apache2/apache2.conf /etc/apache2/conf-available/*.conf \
&& a2enmod rewrite

RUN apt-get update && apt-get install -y \
    libicu-dev \
    zip \
    unzip \
&& docker-php-ext-install -j$(nproc) intl \
&& docker-php-ext-install -j$(nproc) pdo_mysql

RUN ln -sf /usr/share/zoneinfo/Asia/Tokyo /etc/localtime

COPY . /var/www/html

ENV COMPOSER_ALLOW_SUPERUSER 1
COPY --from=composer:1.7 /usr/bin/composer /usr/bin/composer

RUN cd ./app && \
    composer install --no-dev -o

何をやっているか物凄くざっくりと上から説明すると一番上からPHPの公式イメージをインストールしてApacheのwebrootを変更。
LinuxパッケージやPHP拡張モジュールをインストール、Linuxのタイムゾーンをの本時間に変えてホスト側のファイル群をゲスト側にもコピーしてコンポーザーのバイナリファイルをインストールしたりしています。

これでPHPのイメージを使ってコンテナを作れる様になりましたが、このチュートリアルではDBのコンテナも同時に操作できる様にdocker-composeを使える様にしたいので、この時点でいったんdocker-compose.ymlファイル作ってPHPのコンテナを起動できる様にします。

CakePHP-SNSディレクトリの直下にdocker-compose.ymlを作成します。

version: '3'
services:
  web:
    container_name: cake-sns-web
    build:
      context: .
      dockerfile: ./Docker/php/Dockerfile
    volumes:
      - .:/var/www/html:cached
    environment:
      - APP_DEFAULT_LOCALE=ja_JP
      - APP_DEFAULT_TIMEZONE=Asia/Tokyo
    ports:
      - "8000:80"

 

これでdocker-composeコマンドが使える様になりました。

試しにコマンドで叩いてみましょう。

CakePHP-SNSの直下に移動して下記コマンドを叩きます。

$ docker-compose up -d

Creating cake-sns-web ... doneと表示されれば成功です。

エラーが出た場合8000番ポートが使われているなどの可能性が高いのでエラーコードで検索するとか『OS名 + 使用されているポート』などと検索すると解決方法がわかるかもしれません。

因みにMacであればターミナルに下記コマンドを打ち込んで実行されている処理が出力されていれば8000番のポートが使われているということになるので処理を停止するかdocker-compose.ymrの11行目を変更することで解決が可能です。

$ sudo lsof -i:8000

さて、問題なくDockerが起動したらコンテナの中に入りCakePHPをインストールしてしまいましょう。

$ docker exec -it cake-sns-web bash
$ composer create-project --prefer-dist --no-interaction cakephp/app:3.6.* ./app

2つ目のコマンドは場合によっては2〜3分ほど時間がかかるかと思います。

エラーもなく問題なく処理が終わったら下記からCakePHPのウェルカムページにアクセスしてみましょう。

http://localhost:8000/

この画面が表示されればCakePHPが問題なくインストール完了です。

しかし、画面の下のDatabaseの欄にCakePHPがデータベースに接続できていないというアナウンスが出ているのでDBのコンテナを作る必要がありますが、その前にあと2つやることがあります。

1つ目は先ほどcreate-projectというコマンドを叩きましたが、これをするとcomposer installも実行されるのですが、プロジェクトメンバーがこのコードを共有しただけだとcomposer installがされていない状態になっているのでDockerfile内でcomposer installを実行する様にしてあげます。

/php/Dockerfileファイルの最後の行に下記コードを追加して保存します。

RUN cd ./app && \
    composer install --no-dev -o

次はdocker-composeを使ってコンテナを起動した時にもcomposer installする様に設定します。

また?と思うかもしれませんが、ポスト側のディレクトリをコンテナ側にマウントしている関係でホスト側でもcomposer installをしてあげないといけません。

まずdocker-compose.ymlへ下記10行目の文章を追加します。

version: '3'
services:
  web:
    container_name: cake-sns-web
    build:
      context: .
      dockerfile: ./Docker/php/Dockerfile
    volumes:
      - .:/var/www/html:cached
    environment:
      - APP_DEFAULT_LOCALE=ja_JP
      - APP_DEFAULT_TIMEZONE=Asia/Tokyo
    command: bash -c "sh docker-init-setup.sh && apache2-foreground"   ←これ
    ports:
      - "8000:80"

 

これはdocker-composeでコンテナを起動したときにdocker-init-setup.shというシェルスクリプトを実行してapache2-foregroundを実行してくれという様なことが書いてあります。

なのでdocker-init-setup.shというファイルを作ってあげましょう。

docker-compose.ymlと同じ階層にdocker-init-setup.shを作り下記を記載して保存します。

cd /var/www/html/app
composer install --no-interaction

 

これであとは今まで作ったコンテナとapp/vendor/の中身も削除して起動するか試してみます。

$ docker-compose down --rmi all
$ rm -rf ./app/vendor/*
$docker-compose up -d

おそらく再度http://localhost:8000/にアクセスしようとするとwelcome画面がうまく表示されないのではないかと思います。

実は今裏側でcomposer installが実行されているので数分間待ってみてください。

気になる方は下記コマンドで今裏側で何が動いているのかみてみましょう。

$ docker-compose logs -f

現在進行形でターミナルにログが吐き出されていればインストール中なのでそれが終わるまで数分待ってみてください。

最後に2つ目のCakePHPのデータベースに関する設定です。

Dockerを使うので環境変数でDBの接続情報を設定できる様にします。

/CakePHP-SNS/app/confi/app.phpファイルの251行目、258~260行目を下記の記述の6行目、13~15行目の物に変更します。(246行目から260行目まで全てコピペで貼り付けてしまっても大丈夫です。

    'Datasources' => [
        'default' => [
            'className' => 'Cake\Database\Connection',
            'driver' => 'Cake\Database\Driver\Mysql',
            'persistent' => false,
            'host' => env('DATABASE_HOST', 'my_app'),
            /*
             * CakePHP will use the default DB port based on the driver selected
             * MySQL on MAMP uses port 8889, MAMP users will want to uncomment
             * the following line and set the port accordingly
             */
            //'port' => 'non_standard_port_number',
            'username' => env('DATABASE_USER', 'my_app'),
            'password' => env('DATABASE_PASS', 'my_app'),
            'database' => env('DATABASE_NAME', 'my_app'),

これでdocker-compose.ymlファイルに書く環境変数でCakePHPがどのデータベースを参照するのか設定できる様になったのでdocker-compose.ymlファイルを編集します。

docker-compose.ymlの12行目にある- APP_DEFAULT_TIMEZONE=Asia/Tokyoの下に下記の記述を追加しましょう。

      - DATABASE_HOST=cake-sns-db
      - DATABASE_USER=root
      - DATABASE_PASS=password
      - DATABASE_NAME=sns_app

これで環境変数の設定も完了です。

DockerでMySQLのデータベースを構築する

では次にデータベースのコンテナを作るためにMySQLのDockerfileを作ります。

作ってあったmysqlディレクトリに下記が記述されたDockerfileを作ります。

FROM mysql:5.7

ADD ./Docker/mysql/conf.d/my.cnf /etc/mysql/conf.d/my.cnf

内容としてはmysql5.7 の公式イメージを落としてANDの部分でホスト側のmy.cnfをコンテナ側に配置できる様にしています。

my.cnfで文字コードの設定をしてあげないと日本語を使えないのでホスト側で作った文字コードをutfmb4にするためのmy.cnfをコンテナ側にも作られる様にしいます。

ということでmy.confファイルを作ります。

$ mkdir Docker/mysql/conf.d

そして今作ったconf.dにmy.cnfというファイルを作り以下のコードを書いて保存します。

[mysqld]
character-set-server=utf8mb4

[mysql]
default-character-set=utf8mb4

[client]
default-character-set=utf8mb4

docker-compose.ymlにもdbのコンテナに関する記述をしていきます。

前回書いた- "8000:80"の下、20行目に下記の記述を追加してください。

※インデントが1つ入っています。

  db:
    container_name: cake-sns-db
    build:
      context: .
      dockerfile: ./Docker/mysql/Dockerfile
    volumes:
      - ./Docker/mysql/sqls:/docker-entrypoint-initdb.d
      - ./Docker/mysql/data:/var/lib/mysql
    environment:
      - MYSQL_ROOT_PASSWORD=password
    ports:
      - "13306:3306"

これでDBのコンテナを作成できるはずです。

下記コマンドを叩いてみましょう。

$ docker-compose up -d db

コンテナが起動したら成功です!

しかし、現状だとコンテナが起動しただけでMySQLのデータベースなどが作成されていません。

今回はひとまずテーブル等は作らずに初期データとしてデータベスの作成だけしてしまいましょう。

Docker/mysql/sqlsinitialize.sqlというファイルを作成してデータベースのクリエイト文を書きます。

CREATE DATABASE sns_app;

次にコンテナを止めて不要なデータを削除しもう一度コンテナを作ります。

$ docker-compose down
$ rm -rf Docker/mysql/data/*
$ docker-compose up -d

問題なく起動したらもう一度http://localhost:8000/へアクセスしてみましょう。

おそらく下記画像の様にDatabeseの項目に接続ができたことが記載されていると思います。

さて、これで開発環境が整いました。

まとめ

ということで今回はこれにて終了です。

開発環境が整ったのであとは作るアプリケーションを決めて処理を書いていけば何かしらのアプリケーションが作れる様になります。

次回はこの記事の続きとして作成するアプリケーションの設計についてです。

このチュートリアルではPHPとCakePHPを使って簡単なSNSを作る事が目的なので作成するアプリケーションは簡易的なSNSですが、次回はSNSを作るためにどの様な設計を行う必要があるのかレクチャーしていきます。


「無料体験レッスン」は豪華な特典の宝庫

スクール博士
ラボくん、無料体験レッスンは豪華な特典の宝庫なんじゃよ。知っておったかの?

ラボくん
そうなの!?無料体験なんて完全にノーマークだったよ…!

スクール博士
何?!それは確実に損じゃぞ!フローチャートを覗いてみなさい!

\全受講してフローチャート作成/



プログラミングスクールは「体験談」を読んで決めるべし

ラボくん
博士〜!どのスクールにすればいいのか全然わかんないよ…

スクール博士
ラボくん、スクール受講経験者の体験談は読んだかの?

ラボくん
よ、読んでない….(怒らないで…博士…)

スクール博士
なにィ〜!読みなされ!明確に決まらない時にはリアルな声をヒントにするのじゃ!

\経験者9名の意見を徹底的に考慮!/


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です