Laravel+MUI+React+TypeScriptに入門する[2]
環境構築編
今回は環境構築をする。世の中にはCUI/CLIアレルギーの人もいるかもしれないが、環境構築とDBマイグレーションまではガンガンコマンドを使う。慈悲はない。
必要なアレコレのインストール
開発に必須
Docker
WSL2
導入方法は記事を参照してください。
NodeJS
Composer(PHPの依存関係マネージャー)
あると便利
VSCode(エディタ)
HeidiSQL(DBクライアントツール)
A5:SQL Mk-2(DBクライアントツール)
Stoplight Studio
GitHub Desktop(Gitクライアント)
個人的にStoplight Studioはバグが多いと思っているので、他におすすめのツールがあったら是非聞きたい。
LaravelSail + MySQL
手順はこの記事を参考に実施する。
LaravelSailを使用する。一言で言えば、簡単に開発環境を構築してくれるもの。
MySQLを使うが、原則DB非依存になるので、方法を調べれば他RDBMSでも大丈夫だろう。
- まずはGitHubで空のpublicリポジトリを作成し、GitHub Desktopでクローンする。
今回はこのリポジトリを作成した。
https://github.com/k-horiuchi/Kanta
今回のシステム名はKantaとする。Kantaとはタガログ語(フィリピンの公用語)で歌を意味する言葉である。人名っぽいな～。
-
Docker Desktopを起動する(バックグラウンドで起動すればOK)
-
wslを管理者で実行する。
-
wslでcdコマンドを使用し、クローンしたフォルダに入る。
-
下記のコマンドを実行する。
curl -s https://laravel.build/back | bash
※10~15分かかるので、その間に艦これ(2022)の3話を見た。
curl -s https://laravel.build/back | bash
back/vendor/bin/sail up
http://localhost:7700/ にアクセスすれば、meilisearchが開くはず。
うまくいかなった場合、ポート番号が被っているかもしれない。envファイルに下記を追記し、back/vendor/bin/sail up を再度実行すれば、問題は解消されるかもしれない。
APP_PORT=10080
FORWARD_DB_PORT=13306
FORWARD_REDIS_PORT=16379
React(TypeScript)とMUIを入れる
-
CMDでKantaフォルダに入る。
-
下記のコマンドを実行する。
npx create-react-app front --template typescript
npm i react-hook-form
npm i react-icons --save
npm i @mui/material @emotion/react @emotion/styled
cd front
npm start
これらのコマンドがうまくいかない場合は、node.jsをインストールしていないか、node.jsのパスが通っていないかも。
自動で http://localhost:3000 が起動すれば成功！
次回からの起動方法
PCをシャットダウンしたら、次回以降はどうやって起動すればいいのか忘れることがあるかもしれない。
- front
Kanta\frontをCMDで開いて、下記コマンドを実行すれば良い。
npm start
個人的にはKanta\frontの下に上記の内容でbatファイルを作成することをおすすめしたい。batをダブルクリックするだけで実行できる。
- back
wslでKanta\backにCDコマンドで入って、下記コマンドを実行する
vendor/bin/sail up
ただ、これが微妙に面倒なので、DockerDesktopを起動し、下記画像のStartボタンを押下しても良い。
URLにアクセスできれば成功！
(さて、ここで少し長めのお気持ち発言をする。初回の環境構築に必要なコマンド、2回目以降の実行に必要なコマンド、他の人がクローンした直後だけ必要なコマンドがそれぞれ違う場合、それらを区別して記事やリポジトリのReadMeで説明しないせいで誰かの心が折るかもしれない。また、リポジトリを載せないくせにソースコードのimport文やライブラリ一覧を記事内に明記しないことも同じくらい未来の誰かの心を折る可能性がある。ライブラリのバージョンや依存関係はいつも変わり続けていることを配慮できなければ、未来の誰かに迷惑をかける。それは未来の自分かもしれない。記事をメンテせずに完璧を目指すのは難しいが、破壊的な変更がよくある分野について書く時は上記を意識したい。少しの努力で自己満足の記事になることを回避できる。テスト仕様書や手順書を書く時は再現性、プログラムを書く時は冪等性を意識するのに、記事やReadMeを書く時にそれらを忘れてしまうことがあるのだ。ちなみにこれらはAndroid入門あるあるだと思っている)
これで環境構築は完了！
次回はドキュメントを作成する！
Discussion