🔰

LaravelでTodoリストを実装してみよう！～環境構築編～

2024/04/19に公開

Laravel

初心者

初心者向け

tech

はじめに

Todoリストアプリ作るにあたってLaravelSail利用して開発環境を構築していきます。

Lravel Sailとは

LaravelプロジェクトのDocker開発環境を構築するためのインターフェースです。

Dockerのインストール

こちらの日本語ドキュメントに記載されているので手順に従ってインストールしてください。

インストールしたらDockerを起動しておいてください。

VS Codeをインストール

開発環境を導入していない方は開発環境を入れておきましょう。
私は、Visual Studio Codeを入れました。

※Windowsの方はWSL2を入れる必要があります。

VS Codeのインストール方法は以下のブログ記事を参考にしてみてください。

Windownsの方

Macの方

LinuxOSの方

https://it-dxblog.com/ubuntu22-vscode/

プロジェクト作成

Dockerの準備ができたらいよいよLaravelプロジェクトを作成していきます。

プロジェクトを配置したいディレクトリまで移動して、以下のコマンドを実行してください。

curl -s https://laravel.build/todolist-example | bash

コマンドを実行すると様々なファイルがダウンロードされてインストール作業が行われます。

最後にログインパスワードを聞かれるので、お使いのPCのログインパスワードを入れてください。

成功した旨のメッセージが表示されたら作成完了です！

Sailの基本操作

今回のWebアプリ開発でよく使ったコマンドをまとめておきます。

Sailの実行

開発環境(Dockerコンテナ)を立ち上げるには以下のコマンドを実行します。

./vendor/bin/sail up -d

正常に起動すると、以下のようなメッセージが返ってきます。

[+] Running 6/0
 ✔ Container laravel-sail-example-mailpit-1       Running              0.0s 
 ✔ Container laravel-sail-example-mysql-1         Running              0.0s 
 ✔ Container laravel-sail-example-meilisearch-1   Running              0.0s 
 ✔ Container laravel-sail-example-selenium-1      Running              0.0s 
 ✔ Container laravel-sail-example-redis-1         Running              0.0s 
 ✔ Container laravel-sail-example-laravel.test-1  Running              0.0s

特に設定をいじってない場合、ブラウザなどでlocalhostにアクセスすると何かしらのページが出力されると思います。

しかし、Laravel11の場合？もしくは現バージョンのLaravel Sailの場合？は、以下の画像のようなエラーメッセージが表示されるかもしれません。

エラーメッセージは以下の通り、「laravel.sessionsっていうテーブルかビューがないよ」って言われます。

SQLSTATE[42S02]: Base table or view not found: 1146 Table 'laravel.sessions' doesn't exist

このようなメッセージが出た場合、コマンドラインで以下のコマンドを実行しましょう。

./vendor/bin/sail artisan migrate

このコマンドは、設定に従ってデーターベースのテーブルを生成してくれるものです。

コマンドの実行完了後に再度localhostにアクセスして、以下のような画面が出ていれば成功です。

毎回./vendor/bin/sailと打ち込むのは面倒くさい人は、.bashrcや.zshrcに常態化するための設定を書き込みます。

~/.bashrc or ~/.zshrc

alias sail='sh $([ -f sail ] && echo sail || echo vendor/bin/sail)'

書き込んだら以下のコマンドを実行して設定を適用します。
(VS CodeでWSLを接続している場合VS Codeを再起動する必要があった気がします。)

source .bashrc

これによって、次からは、sail ○○でコマンドを実行することができます。

Sailの停止

起動したコンテナを停止したいときは以下のコマンドを実行します。

sail down

正常に起動すると以下のようなメッセージが返ってきます。

[+] Running 7/7
 ✔ Container laravel-sail-example-laravel.test-1  Removed              1.2s 
 ✔ Container laravel-sail-example-mailpit-1       Removed              0.7s 
 ✔ Container laravel-sail-example-mysql-1         Removed              2.3s 
 ✔ Container laravel-sail-example-redis-1         Removed              1.1s 
 ✔ Container laravel-sail-example-selenium-1      Removed              4.2s 
 ✔ Container laravel-sail-example-meilisearch-1   Removed              0.9s 
 ✔ Network laravel-sail-example_sail              Removed              0.3s

コンテナの状態を確認

コンテナを起動してたか忘れたり、コンテナの稼働状態を確認したいときは、以下のコマンドを実行します。

sail ps

実行するとこんな感じでコンテナのステータスが返ってきます。

NAME                              IMAGE                         COMMAND                  SERVICE        CREATED       STATUS                 PORTS
todolist-example-laravel.test-1   sail-8.3/app                  "start-container"        laravel.test   3 hours ago   Up 3 hours             0.0.0.0:80->80/tcp, 0.0.0.0:5173->5173/tcp, 8000/tcp
todolist-example-mailpit-1        axllent/mailpit:latest        "/mailpit"               mailpit        3 hours ago   Up 3 hours (healthy)   0.0.0.0:1025->1025/tcp, 0.0.0.0:8025->8025/tcp, 1110/tcp
todolist-example-meilisearch-1    getmeili/meilisearch:latest   "tini -- /bin/sh -c …"   meilisearch    3 hours ago   Up 3 hours (healthy)   0.0.0.0:7700->7700/tcp
todolist-example-mysql-1          mysql/mysql-server:8.0        "/entrypoint.sh mysq…"   mysql          3 hours ago   Up 3 hours (healthy)   0.0.0.0:3306->3306/tcp, 33060-33061/tcp
todolist-example-redis-1          redis:alpine                  "docker-entrypoint.s…"   redis          3 hours ago   Up 3 hours (healthy)   0.0.0.0:6379->6379/tcp
todolist-example-selenium-1       selenium/standalone-chrome    "/opt/bin/entry_poin…"   selenium       3 hours ago   Up 3 hours             4444/tcp, 5900/tcp

開発していると、何らかの理由で特定のコンテナが停止していたり、正常な状態でない場合があります。
返ってきたステータスのSTATUS欄を見て、healthy以外の状態が

mysqlの起動

sail mysql

実行すると以下のようなメッセージが返されmysqlに接続できます。

Reading table information for completion of table and column names
You can turn off this feature to get a quicker startup with -A

Welcome to the MySQL monitor.  Commands end with ; or \g.
Your MySQL connection id is 38
Server version: 8.0.32 MySQL Community Server - GPL

Copyright (c) 2000, 2023, Oracle and/or its affiliates.

Oracle is a registered trademark of Oracle Corporation and/or its
affiliates. Other names may be trademarks of their respective
owners.

Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.

mysql>

artisanコマンドの実行

Lravelで開発するときは基本的にartisanコマンドを使っていろいろなファイルを生成していくことになります。
例えば、コントローラーを作成する際には以下のようなコマンドを実行します。

sail artisan make:controller SampleController

次回以降のTODOアプリ実装の解説でよく登場するコマンドになるので、頭の端に入れておいてください。

おわりに

なるべく、前提知識なしに理解できるように書いたつもりなのですが、内容に抜け漏れあるかもしれません。

ここがわからなかった！やこういう解説もほしい！などあればコメントやTwitterのリプなどで教えてください！m(__)m
https://twitter.com/kenberu_dev

次回は、実際のコーディング部分書いていこうと思います！