PHPフレームワークのLarabelの開発環境をDockerというコンテナ型の仮想環境を用いて構築していきます。
Dockerは一つのマシン上で複数のアプリケーション環境を構築できるメリットがあり、さらにその環境を他社に渡すこともできます。
組織単位で開発するときはとても便利です。
今回はDockerを用いて下記の流れでLarabelの開発環境を構築していきます。
- WSL2をインストール
- Docker Desktopをインストール
- VSCodeをインストール
- Gitのインストール
- Larabelプロジェクト作成
Laravel sailというコマンドで、Dockerですぐに開発環境が構築できます。
ではここから必要なソフトウェアのインストールに入ります。
WSL2をインストールする
WSL2とはWindows上でLinuxを動作させるためのものです。
WSL1が古いバージョンになるので、必ずWSL2の方を使用しましょう。
WSL2インストール手順
まずはWindowsボタンを押下して「PowerShell」と入力します。
そして「管理者として実行」を押下。

wsl --install

下記のようになったら、一度PCの再起動を行います。

再起動すると、自動でUbuntuのダウンロード&インストールが開始されます。
Ubuntuを起動します。

起動後にユーザの設定とパスワードの設定を行います。
設定が完了したら、再びPowerShellを管理者で起動して下記コマンドを入力します。
wsl -l -v

上記のように表記されたら問題なくインストールされています。
Docker Desktopをインストールする
WSL2のインストールを完了したら、次はDockerのインストールになります。
実際にコンテナ型の仮想環境をインストールして構築していきます。
Dockerのインストール手順
まずは下記サイトからダウンロードします。


exeファイルをダウンロードしたら起動してインストールします。
下記、両方にチェックを入れて「OK」ボタンを押下します。

「Close and restart」ボタンを押下すると自動で再起動されます。

再起動後、下記画面が表示されたら「Accept」を押下します。

アカウント作成はスキップします。
「Skip」ボタンを押下しましょう。

こちらはアンケートになるので、「Skip」ボタンを押下で構いません。

以下のように表示されればOKです。

念のためPowerShellでも確認しておきましょう。
下記コマンドをPowerShellで実行してください。
docker ps

VSCodeをインストールする
続いてVSCodeをインストールします。
開発はこのVSCodeで行っていきます。
VSCodeインストール手順
下記サイトからダウンロードします。


exeを起動し、使用許諾には「同意する」を選択してインストールを行います。
以下のように、「PATHへの追加」は必ずチェックするようにしましょう。

画面の指示に従ってインストールを進めます。
「完了」を押下してインストールを完了させましょう。

必要な拡張機能をインストール
以下の画面から拡張機能をダウンロードしていきます。

私が必要だと思う拡張機能は下記です。
- WSL
- Japanese Language Pack for Visual Studio Code
- GitLens
- PHP Intelephense
- Laravel Extension Pack
- PHP Debug
- Prettier
- Docker
Gitをインストールする
Gitとはバージョン管理をするためのツールになります。
開発を行っていく上で必須となります。
開発する人数が増えれば増えるほど、Gitの有用性を理解できるでしょう。
下記からダウンロードします。

exeファイルを起動します。
「Next」を押下します。

任意のインストール先を指定して「Next」を押下します。

「Next」を押下します。

「Next」を押下します。

「Use Visual Studio Code as Git’s default editor」を選択して「Next」を押下します。

リポジトリの名前を自分で指定したいので「Override the default branch name for new repositories」を選択します。

「Next」を押下します。

「Next」を押下します。

「Use the OpenSSL library」を選択して「Next」を押下します。

「Next」を押下します。

「Next」を押下します。

「Next」を押下します。

「Next」を押下します。

「Install」を押下します。

以下の画面が表示されればインストール完了です。

次にGitのアカウントを登録します。
アカウントを持っていない方は下記から作成しましょう。

GitBashを起動してメールアドレスとユーザ名を登録します。
- git config –global user.name “ユーザ名”
- git config –global user.email “メールアドレス”
続いてSSHキーの作成を行います。
GitBashで下記コマンドを実行します。
ssh-keygen
Enterキーで進めていって、作成できます。
Larabelプロジェクト作成
実際にLarabelプロジェクトの作成を行っていきます。
まずは「Windows」ボタン+「X」で下記を表示して、「Windowsターミナル(管理者)」を押下します。

「↓」からUbuntuを選択。

下記コマンドで任意のフォルダを作成。
mkdir フォルダ名
下記コマンドで作成したフォルダに移動
cd フォルダ名
下記コマンドでプロジェクトを作成します。
curl -s https://laravel.build/任意のプロジェクト名 | bash
Ubuntuのパスワードを問われるので入力します。
下記コマンドで、Larabel Sailを起動します。
cd 作成したプロジェクト名
./vendor/bin/sail up
もう一度新たにターミナルでUbuntuを開き、プロジェクトフォルダのへ移動して下記コマンドを実行します。
./vendor/bin/sail artisan migrate
下記URLにアクセスしてみましょう。
あるいは以下です。
http://localhost:ポート番号
「service “laravel.test” is not running」というエラーが出る場合。
原因はすでに80のポートが使用されていることにあります。
80番ポートを空けてるようにしましょう。
「netstat -ano | find “80”」で稼働しているサービスを検索。
「taskkill /f /pid プロセスID」を指定して削除。
「./vendor/bin/sail up -d –build」で再構築するとエラーの詳細が分かります。
そもそもプロセスを削除できない場合は「code .」コマンドでVSCodeを開き、.envファイルに下記を追加します。
APP_PORT=任意のポート番号
※ちなみにDBのポート指定は下記です。
FORWARD_DB_PORT=ポート番号
下記のようにLarabelがブラウザで確認できればOKです。

VSCodeで開く
次にVSCodeでLarabelを起動していきます。
開発はVSCodeで行うのでこちらが主流になるでっしょう。
アプリケーションフォルダで「code .」コマンドを実行してVSCodeを開きます。
code .
VSCodeを開いたら、次にVSCode内のターミナルを開きます。
表示タブ→ターミナル

画面下部にターミナルが開きます。
ターミナルにて「↓」から「bash」または「Ubuntu」を選択します。

ここからVSCodeでSailコマンドが実行できるようにして、さらにLarabelの起動までを行っていきます。
まずは下記コマンドを実行します。
vi ~/.bashrc
コードが表示されたら「i」を押して編集モードに入ります。そして、.bashrcファイルの最後の行に下記を追記します。
alias sail='[ -f sail ] && bash sail || bash vendor/bin/sail'
「Esc」キーで編集モードを終了して、「:wq」で保存して終了します。
下記コマンドでLarabelが表示できるか確認してください。
sail up
終了する場合は下記コマンドを実行します。
sail down
DBを使用可能にする
「docker-compose.yml」ファイルの「services:」タグの中に下記を追記します。
phpmyadmin:
image: phpmyadmin/phpmyadmin
links:
- 'mariadb:mariadb'
ports:
- '8080:80'
environment:
PMA_USER: '${DB_USERNAME}'
PMA_PASSWORD: '${DB_PASSWORD}'
PMA_HOST: mariadb
networks:
- sail
まずはSailを起動します。
sail up
PHPMyAdimnにログインできればOKです。
MariaDBに変更
ここからはエックスサーバーでデプロイする人向けになります。
エックスサーバーではMarariaDBを使用しているため、デフォルトのMySQLから変更をする必要があります。
VSCodeのターミナルで操作をしていきます。
Sailが立ち上がっていない場合は下記で立ち上げましょう。
sail up -d
新規プロジェクトに追加する場合
新規でプロジェクトを作成する場合、下記のコマンドでMarariaDBに対応できます。
curl -s "https://laravel.build/test-app?with=mariadb" | bash
既存プロジェクトに追加する場合
下記コマンドをVSCodeのターミナルで実行。
sail php artisan sail:install
下記のように表示されるので、「スペースキー」を押下してmysqlの選択を解除して、「↓キー」でmarariadbに移動して「スペースキー」で選択して「Enterキー」を押下します。

「Sail scaffolding installed successfully」のメッセージが出れば成功です。
次に.envファイルで「DB_HOST=mariadb」に変更します。
DB_HOST=mariadb
docker-compose.ymlファイルのmariadbのポート番号を上記ののDB_PORTで指定した番号に変更。
mariadb:
image: 'mariadb:11'
ports:
- '${FORWARD_DB_PORT:-任意のポート番号に変更}:3306'
docker-compose.ymlファイルのphpmyadminの中の「links」と「PMA_HOST」をmariadbに変更。
下記コマンドを実行してmariadbにsessionテーブルを作成。
$ sail artisan migrate
sailを再起動します。
(「sail down」で停止)
エラーが出る場合はDockerを一度再起動します。
PHPMyAdimnでMariaDBが指定されていることを確認してください。
Git管理を行う
先ほど作成したLarabelプロジェクトをGit管理する手順を紹介します。
まだGitHubのアカウントをお持ちでない方は下記から登録をしてください。
(無料で登録できます。)

アカウントの作成が完了しましたら、VSCodeの方からGitHubへ連携を行います。
「Publish to GitHub」を押下してください。

ダイアログが表示されたら「許可」を押下します。
サインインを求められるので、ユーザ名とパスワードを入力して、「Sign in」を押下します。

次に「Continue」を押下します。
「Authorize Visual-Studio-Code」を押下します。

VSCodeを再起動して、再度「Publish to GitHub」を押下します。
その後に先ほどの設定を繰り返すと下記のようにリポジトリを作成できます。
ソースコードを公開しないのであれば、上のprivateの方を選択しましょう。

コミット&プッシュを行いましょう。

もし下記のようなエラーが起きる場合は設定を行ってください。

VSCodeのターミナルでコマンドを実行します。
git config user.name [ユーザ名]
git config user.email [メールアドレス]
この設定で先ほどのエラーは起きないと思われます。
下記のようなエラーが出た場合。
リモートの追加を行います。



ソース管理の方で「ブランチの発行」を押下すれば完了です。
あとは、GitHub側でファイルがプッシュされているかを確認してください。
ブランチの作成
ブランチとはGit管理では重要で、大本のソースから派生したものとなります。
Git管理は基本的に、作業者や作業内容でブランチを分けていって、それを最終的にマージ(合体)します。
ブランチの作成手順は以下です。
画面下部の現在のブランチ名を押下します。
(私の場合「main」というブランチになります。)

「新しいブラウザの作成」を押下します。

任意のブランチ名を指定してEnterを押下します。

「Branchの発行」を押下してリモートへ反映します。
画面下部が作成したブランチ名になっていることを確認してください。

下記コマンドでブランチが作成されていることを確認します。
git branch
まとめ
今回はLarabelの環境構築についての手順を紹介しました。
分量としてかなり多くなりましたが、初期設定を丁寧に行うことで、後々開発が楽になりますね。
またLarabelの開発について情報を紹介していこうと思います。
参考サイト

コメント