Laravelの基本はこちらから学べます

Laravel でスレッド掲示板を作成(中級)。1,2 章 Docker で環境構築




今回から、実務に沿った形でプロジェクトを完遂していきましょう!
Laravel 初心者だよ!という方は先に以下で簡単な掲示板を作成してみましょう!

今回のストーリーは完全オリジナルとなっており、登場する人物等は全て架空のものになっております。

1 章:仕様の確認

オンボーディング MTG

実務に入った、「あなた」。
初めての案件のオンボーディングミーティングが今始まろうとしていた。。。。
あなた

初めまして。私は「あなた」です。
今回はどうぞよろしくお願いいたします!

クライアント

はい。私は T と申します。宜しくお願いいたします!
では早速なんだけれども、今回は掲示板を作りたいなと思っているんだ。

あなた

「掲示板」ですか。
どのような機能を盛り込むご予定でしょうか?

クライアント

某チャンネルのように、スレッドをたててコミュニケーションを取れるようなものにしたいな。
あとは、コミュニケーションをとる際には、画像を投稿もできるようにしたいな。
あとは、、、新しいスレッドが立ち上がったら、私に通知して欲しいな。

あなた

なるほど。ありがとうございます!
通知方法ですが、ご希望はございますか?
メジャーどころですと、メール、SMS、Slack、LINE あたりですかね。

クライアント

その中なら、「Slack」がいいかな。社内の Slack があってそこに通知を流せば
みんなが見れるもんね。

あなた

承知いたしました!では、完成形をイメージできるようにモックを作成してまたお持ちいたしますね!

クライアント

宜しくお願いします!

モックアップの作成と、DB 設計

ヒアリングを終えた、「あなた」。
ヒアリング内容を元に、モックアップを作成するのであった。

※ モックアップ(モック)は、クライアントとの開発内容の認識齟齬がないように、提案時に持っていく「プロトタイプ」のこと。私は Figma を用いてプロトタイプを作成することが多い。

http://figma.com/

今回は Figma の解説については省略させていただきます。気になる方は、Figma にアクセスし実際に使ってみましょう。
今回は、私が作成した完成品をプロトタイプとして提案することにします。

完成形の確認

あなた

オンボーディング疲れた。。でも結構仕様の確認ができた気がする。
クライアントが欲しい機能はこれで全部かな。

油そば

クライアントさんが、不適切なスレッドなどを削除できるように、Admin 画面を作っておくのはどうだろうか。

あなた

なるほど!確かに。ありがとう!
よしできた!こんな機能があれば良いのではないだろうか!

DB 設計にトライ

では、上記を元に DB を設計していきましょう。
データベース設計における代表的な設計図である、ER 図を作成していきます。
作成するツールは draw.io です。

https://www.draw.io/

上記のサイトから簡単に ER 図を作成することができるのでアクセスしてみましょう。

「完成形」からどのような ER 図を作成できるか考え、実際に作成してみましょう。

私の答えは下記に添付いたします。

仕様の確認

モックを作り終えた「あなた」。クラアントにモックアップの確認と、仕様を詰める MTG を行うのであった。
あなた

お時間いただき、ありがとうございます!
今回はこちらのモックアップをお持ちしましたので、ご確認いただけますでしょうか?

クライアント

ありがとうございます!
おお!管理アカウントつきですか!とても良いですね!
こちらの仕様で作成お願いしてもよろしいでしょうか?

あなた

承知いたしました!
作成していきます!

2 章:環境構築

環境構築何でする?

クライアントとの MTG が終了し、大まかな仕様が決定。
開発を始めるべく、環境構築を始めるのであった。
あなた

では環境構築をしていこう。
MAMP で簡単に作成しようかな。

MAMP 覚えておりますでしょうか。
前回の掲示板を作ろうの記事では MAMP を用いて環境を構築しました。

M : Mac OS
A : Apache
M : MySQL
P : PHP

Laravel を用いてアプリを開発するために必要なものを一気にインストール。ワンクリックで、それらを立ち上げることができました。
非常に便利でしたね。

しかし、今回は Docker を用いて環境を構築していきましょう。

1. コード化されたファイルを共有することで、どこでも誰でも同じ環境が作れる
2. 作成した環境を配布しやすい。
3. スクラップ&ビルドが容易にできる。

例えば、開発環境(Windows上)では動いていたけどLinuxで動かなかった、といったケースも、開発工程からDockerを活用していくことで防ぎやすくなります。そして、開発工程の中で使っていた環境をそのまま本番環境に持っていくことも可能なため、環境差分が少なく、環境による問題を減らすことができます。

Docker入門(第一回)~Dockerとは何か、何が良いのか~
https://knowledge.sakura.ad.jp/13265/

Docker を用いることで、Aさんの PC では動いているのに、Bさんの PC では動かないぞ??
などといった問題を解決することができます。

Docker に関しては、Udemy や 書籍などでもまとめられることが多く。非常に学習コストがかかるものだと思います。ここでは、「学ぶ」よりも「使う」ことに重きをおき、「学ぶ」は Google Udemy 書籍等で進めていただければと思います。

参考までに私が学習したものを掲載します。

#マンガでわかるDocker ① 〜概念・基本コマンド編〜 【ダウンロード版】 #技術書典
https://booth.pm/ja/items/825879

油そば

漫画で書かれていて、分かりやすそうだな。

個人的におすすめの勉強法としては

  1. 使ってみる
  2. 深ぼってみる

なので、実際に使って環境を構築してみましょう。

Docker のインストール

まずは Docker をインストールしましょう。

Docker
https://www.docker.com/

まずは、アクセス、「Get Started」をクリックしましょう。

「Dowonload for Mac」をクリックし、ダウンロードをします。

ダウンロードが終了したら、アプリケーション(鯨のマーク)をクリック、起動します。

Mac のナビゲーションに「鯨のマーク」が表示されれば起動完了です!

右端に鯨

Laradock を使ってみる

それでは Docker を使っていきましょう。

油そば

とは言っても、何から始めればいいかわからないな。
MAMP はダウンロードして起動してボタンを押すだけだったが。

ここで便利なのが Laradock です。
Laradock の web サイトを確認してみましょう。

https://laradock.io/

Laradock is a full PHP development environment for Docker.

It supports a variety of common services, all pre-configured to provide a ready PHP development environment.

Use Docker First – Learn About It Later!

https://laradock.io/

開発者によると、Laradock は Docker に詳しくなくても、Laravel の環境を構築できるようにしているそうです。

Use Docker First – Learn About It Later!

まず、使って!その後に学びましょう。
ということで、実際に使ってみましょう。

公式ドキュメントにそって開発環境を構築していきましょう。
https://laradock.io/getting-started/

your-project $ git clone https://github.com/Laradock/laradock.git

your-project $ cd laradock

laradock $ cp env-example .env

Vscode で Laradock のコードを開いてみましょう。
.env 内で以下のコードを修正します。

.env

### MYSQL #################################################

MYSQL_VERSION=5.7
MYSQL_DATABASE=2ch // DB の名前を 2ch にしています。
MYSQL_USER=default // default という user を MySQL に作ります。
MYSQL_PASSWORD=root // パスワードは root にしています(覚えやすいので)。
MYSQL_PORT=3306
MYSQL_ROOT_PASSWORD=root
MYSQL_ENTRYPOINT_INITDB=./mysql/docker-entrypoint-initdb.d

デフォルト設定の latest ですと最新版がインストールされます。
8.0 以上がインストールされますが、認証プラグインが変更となっておりこのまま進めるとエラーに出くわしてしまいます。
よって未然に回避するために、5.7 をインストールするように設定を変更しました。

また次に公式ドキュメント にあるようにもう一箇所変更していきます。

APP_CODE_PATH_HOST=../ 修正前
APP_CODE_PATH_HOST=../2ch/ 修正後
// 今回は2chという名前で Laravel プロジェクトをインストールするため上記のように指定。

では実際に Laradock のコンテナを立ち上げましょう。

laradock $ docker-compose up -d nginx mysql

それではコンテナが立ち上がったかどうかを確認してみましょう。

laradock $ docker-compose ps
// 以下表示内容
           Name                          Command              State                     Ports                  
---------------------------------------------------------------------------------------------------------------
laradock_docker-in-docker_1   dockerd-entrypoint.sh           Up      2375/tcp, 2376/tcp                       
laradock_mysql_1              docker-entrypoint.sh mysqld     Up      0.0.0.0:3306->3306/tcp, 33060/tcp        
laradock_nginx_1              /bin/bash /opt/startup.sh       Up      0.0.0.0:443->443/tcp, 0.0.0.0:80->80/tcp,
                                                                      0.0.0.0:81->81/tcp                       
laradock_php-fpm_1            docker-php-entrypoint php-fpm   Up      9000/tcp, 0.0.0.0:9003->9003/tcp         
laradock_workspace_1          /sbin/my_init                   Up      0.0.0.0:2222->22/tcp,                    
                                                                      0.0.0.0:3000->3000/tcp,                  
                                                                      0.0.0.0:3001->3001/tcp,                  
                                                                      0.0.0.0:4200->4200/tcp,                  
                                                                      0.0.0.0:8001->8000/tcp,                  
                                                                      0.0.0.0:8080->8080/tcp                             
                                                                      0.0.0.0:4200->4200/tcp,                  
                                                                      0.0.0.0:8001->8000/tcp,                  
                                                                      0.0.0.0:8080->8080/tcp       

上記のように STATUS が UP になっていれば成功です。

油そば

MySQL と NGINX しか立ち上げる時に指定していないが、「php-fpm」「workspace」も立ち上がってるけど….どうして?

Laradock 内の docker-compose.yml には depends_on (依存関係)が設定されています。
NGINX を立ち上げる前には、「php-fpm を立ち上げてね」。「php-fpm を立ち上げてね」と記載があるため、自動的に立ち上がりました。

Laravel のインストール

laradock % docker-compose exec --user=laradock workspace bash

/var/www# composer create-project --prefer-dist laravel/laravel 2ch "6.*"
// Laravel 6 をインストールします。
// インストールが終了したらコンテナから出ましょう。
/var/www# exit

laradock % cd ..
your-project % ls 
2ch           laradock

ここまでで、Laravel のインストールが完了し、your-project ディレクトリ内に 2ch が作成されました。

では http://localhost/ にアクセスしてみましょう。

油そば

これで環境構築ができたね。
では、どんどん開発していこう!

もしこの記事をいいねと思ったたり、ご参考になりましたら下記ボタンからサポートしていただけますと、とても励みになります!




コメントを残す

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