自分自身の備忘録のつもりで、Laravelを用いた基本的な制作の流れをまとめていきます。
誰かの参考になれば幸いです。また、理解が不十分なところも多々あるかと思います。
ミスなどありましたらぜひ教えてください。使用機材はmacです。
今回はtwitterのようなコメント・画像の投稿、編集を行うプロダクトを作る感じで説明をしていきます。
今回は「project」・「database」の作成からデータベースを扱うための「phpmyadmin」の導入までを行います。
Step.1 Projectを作成する。
まずはprojectを作ります。今回は開発環境として「Dockerのsail」というものを使用しています。「Docker」の説明は省かせていただきますので、環境に関しては各自でお願いします。(後日そちらの記事も書きます)また、最新のLaravelでは、対応phpはバージョン9ですが、デプロイ先のサーバーがphp8にしか対応していないため、バージョンを落として作成しています。(2023.6月現在)
projectを作成するには、ターミナルを開き
curl -s "https://laravel.build/Laravelproject?php=80" | bash
と入力します。Laravelproject
とは今回作成するprojectの名前ですので、この部分は適宜変更しましょう。すると、何やらゴニョゴニョと動き出します。しばらく時間がかりますが最後にパスワードを求められて、プロジェクトが作成されます。
ちなみにこれでローカルストレージ内にLaravelproject
というフォルダが作成されており、中を覗くと様々なフォルダ・ファイルが入っています。全く触らないものも多いので、最初は気にしなくてOKです。
また、この段階でgithubにリポジトリを作成し、このフォルダと紐づけておくとよいでしょう。
Step.2 Projectを起動する。
(Dockerを使用している場合は起動しておきます。)
作成したフォルダへ移動します。
cd Laravelproject
Dockerのsailを使用して起動。最後に「-d」を付けておくと、バックグラウンドでデータベースも起動してくれて便利です。
./vendor/bin/sail up -d
※Dockerを使用していない方は
php artisan serve --port=8080
で起動できると思います。
私のmacの場合、なぜか必ずport競合を起こし起動できないので、その場合の対処も書いておきます。
①sudo lsof -i :3306 ※3306は競合しているポート番号
->PID番号を調べる
②sudo kill (PID番号)
これで、Webページはすでに作成されています。ブラウザで「localhost」へアクセスすると
という画面が出てくるはずです。右下にLaravelとphpのバージョンが表示されているので、ここも確認しておきましょう。
Step.3 phpmyadminの導入
phpmyadminを使用するための準備をしていきます。一旦Dockerのcontainerを止めましょう。
./vender/bin/sail down
間違っても
./vendor/bin/sail stop
と打ってはいけません‼️containerごと消去してしまいます。
※Dockerを使用していない方は「cnrl+c」で止まります。
「visual studio code」などのコードエディター上でprocjectを開き、その中にあるdocker-compose.yml
に下記コードを追記します。
phpmyadmin:
image: phpmyadmin/phpmyadmin
links:
- mysql:mysql
ports:
- 8080:80
environment:
MYSQL_USERNAME: "${DB_USERNAME}"
MYSQL_ROOT_PASSWORD: "${DB_PASSWORD}"
PMA_HOST: mysql
networks:
- sail
追記場所はselenium の下
※重要 seleniumと同じ階層に保存する。
再び起動し
./vendor/bin/sail up -d
ブラウザで「localhost:8080」へアクセスすると、phpmyadminが使用可能になっています。
project名と同じデータベースが作成されているのが分かると思います。
phpmyadminのログインは、設定していなければ下記の通りとなる
ユーザー名: sail パスワード: password
これらの情報は、.env
というファイル内に記載してある。
今後
・Webページlocalhost
・データベース(phpmyadmin)localhost:8080
の2つのページを参照しながら作成を進めていきます。
これで作成の準備が整いました。
次の記事