【Larabel環境構築】PHPのフレームワークであるLarabelの環境構築方法を解説!

【Larabel環境構築】PHPのフレームワークであるLarabelの環境構築方法を解説!

PHPフレームワークのLarabelの開発環境をDockerというコンテナ型の仮想環境を用いて構築していきます。

Dockerは一つのマシン上で複数のアプリケーション環境を構築できるメリットがあり、さらにその環境を他社に渡すこともできます。

組織単位で開発するときはとても便利です。

今回はDockerを用いて下記の流れでLarabelの開発環境を構築していきます。

Larabel開発環境構築
  • WSL2をインストール
  • Docker Desktopをインストール
  • VSCodeをインストール
  • Gitのインストール
  • Larabelプロジェクト作成

Laravel sailというコマンドで、Dockerですぐに開発環境が構築できます。

ではここから必要なソフトウェアのインストールに入ります。

今回はWindows11での環境構築になります。

目次

WSL2をインストールする

WSL2とはWindows上でLinuxを動作させるためのものです。

WSL1が古いバージョンになるので、必ずWSL2の方を使用しましょう。

WSL2インストール手順

まずはWindowsボタンを押下して「PowerShell」と入力します。

そして「管理者として実行」を押下。

WSL2_powershell起動
wsl --install
WSL2_コマンド実行

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

WSL2_ubuntuインストール

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

UbuntuとはLinuxの派生OSになります。

Ubuntuを起動します。

WSL2_ubuntu起動

起動後にユーザの設定とパスワードの設定を行います。

設定が完了したら、再びPowerShellを管理者で起動して下記コマンドを入力します。

wsl -l -v
WSL2_ubuntu確認

上記のように表記されたら問題なくインストールされています。

Docker Desktopをインストールする

WSL2のインストールを完了したら、次はDockerのインストールになります。

実際にコンテナ型の仮想環境をインストールして構築していきます。

Dockerのインストール手順

まずは下記サイトからダウンロードします。

Dockerのダウンロードサイト
Docker_ダウンロード

exeファイルをダウンロードしたら起動してインストールします。

下記、両方にチェックを入れて「OK」ボタンを押下します。

Docker_インストール2

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

Docker_インストール3

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

Docker_インストール4

Hyper-Vが有効になっていない場合はエラーが起きるようです。

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

Docker_アカウント作成

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

Docker_アンケート

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

Docker_ホーム

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

docker ps
Docker_確認

VSCodeをインストールする

続いてVSCodeをインストールします。

開発はこのVSCodeで行っていきます。

VSCodeインストール手順

下記サイトからダウンロードします。

VSCodeのダウンロードサイト
VSCode_ダウンロード

exeを起動し、使用許諾には「同意する」を選択してインストールを行います。

以下のように、「PATHへの追加」は必ずチェックするようにしましょう。

VSCode_注意

画面の指示に従ってインストールを進めます。

「完了」を押下してインストールを完了させましょう。

VSCode_インストール完了

必要な拡張機能をインストール

以下の画面から拡張機能をダウンロードしていきます。

VSCode_拡張機能

私が必要だと思う拡張機能は下記です。

必要な拡張機能
  • WSL
  • Japanese Language Pack for Visual Studio Code
  • GitLens
  • PHP Intelephense
  • Laravel Extension Pack
  • PHP Debug
  • Prettier
  • Docker

Gitをインストールする

Gitとはバージョン管理をするためのツールになります。

開発を行っていく上で必須となります。

開発する人数が増えれば増えるほど、Gitの有用性を理解できるでしょう。

下記からダウンロードします。

Gitのダウンロードサイト
Git_インストール

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

Git_インストール1

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

Git_インストール2

「Next」を押下します。

Git_インストール3

「Next」を押下します。

Git_インストール4

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

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

Git_インストール6

「Next」を押下します。

Git_インストール7

「Next」を押下します。

Git_インストール8

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

Git_インストール9

「Next」を押下します。

Git_インストール10

「Next」を押下します。

Git_インストール11

「Next」を押下します。

Git_インストール12

「Next」を押下します。

Git_インストール13

「Install」を押下します。

Git_インストール14

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

Git_インストール15

次にGitのアカウントを登録します。

アカウントを持っていない方は下記から作成しましょう。

Gitアカウント作成

GitBashを起動してメールアドレスとユーザ名を登録します。

  • git config –global user.name “ユーザ名”
  • git config –global user.email “メールアドレス”

続いてSSHキーの作成を行います。
GitBashで下記コマンドを実行します。

ssh-keygen

保存先のメモを忘れないように注意です。

Enterキーで進めていって、作成できます。

Larabelプロジェクト作成

実際にLarabelプロジェクトの作成を行っていきます。

まずは「Windows」ボタン+「X」で下記を表示して、「Windowsターミナル(管理者)」を押下します。

Windowsターミナル開き方

「↓」からUbuntuを選択。

Ubuntu起動

下記コマンドで任意のフォルダを作成。

mkdir フォルダ名

下記コマンドで作成したフォルダに移動

cd フォルダ名

下記コマンドでプロジェクトを作成します。

curl -s https://laravel.build/任意のプロジェクト名 | bash

プロジェクトの作成にしばらく時間がかかります。

Ubuntuのパスワードを問われるので入力します。

下記コマンドで、Larabel Sailを起動します。

cd 作成したプロジェクト名
./vendor/bin/sail up

Larabel Sailとは、DockerにコマンドだけですぐにLarabel環境を作成できるものになります。

もう一度新たにターミナルでUbuntuを開き、プロジェクトフォルダのへ移動して下記コマンドを実行します。

./vendor/bin/sail artisan migrate

下記URLにアクセスしてみましょう。

http://localhost/

あるいは以下です。

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です。

Larabel起動

VSCodeで開く

次にVSCodeでLarabelを起動していきます。

開発はVSCodeで行うのでこちらが主流になるでっしょう。

アプリケーションフォルダで「code .」コマンドを実行してVSCodeを開きます。

code .

今まで行った作業のファイルはWindows側でも確認できます。
\\wsl.localhost\Ubuntu\home\

VSCodeを開いたら、次にVSCode内のターミナルを開きます。
表示タブ→ターミナル

VSCodeターミナル

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

ターミナルbash

ここからVSCodeでSailコマンドが実行できるようにして、さらにLarabelの起動までを行っていきます。

まずは下記コマンドを実行します。

vi ~/.bashrc

コードが表示されたら「i」を押して編集モードに入ります。そして、.bashrcファイルの最後の行に下記を追記します。

alias sail='[ -f sail ] && bash sail || bash vendor/bin/sail'

「Esc」キーで編集モードを終了して、「:wq」で保存して終了します。

下記コマンドでLarabelが表示できるか確認してください。

sail up

http://localhost/

終了する場合は下記コマンドを実行します。

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

ユーザ名とパスワードは.evnファイルの「DB_USERNAME」と「DB_PASSWORD」に記載されています。

まずはSailを起動します。

sail up

PHPMyAdimnにログインできればOKです。

Larabelの画面が表示される場合はポート番号が異なる可能性があります。

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キー」を押下します。

MarariaDB追加コマンド

「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」を押下してください。

GitHub連携

ダイアログが表示されたら「許可」を押下します。

サインインを求められるので、ユーザ名とパスワードを入力して、「Sign in」を押下します。

GitHubサインイン

次に「Continue」を押下します。

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

VSCode連携

VSCodeを再起動して、再度「Publish to GitHub」を押下します。

その後に先ほどの設定を繰り返すと下記のようにリポジトリを作成できます。

ソースコードを公開しないのであれば、上のprivateの方を選択しましょう。

リポジトリ作成

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

コミットプッシュ

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

プッシュエラー
エラーが起きる場合

VSCodeのターミナルでコマンドを実行します。

git config user.name [ユーザ名]
git config user.email [メールアドレス]

この設定で先ほどのエラーは起きないと思われます。

下記のようなエラーが出た場合。

リモートの追加を行います。

リモートの追加
リモートの追加2
リモートの追加3

ソース管理の方で「ブランチの発行」を押下すれば完了です。

あとは、GitHub側でファイルがプッシュされているかを確認してください。

ブランチの作成

ブランチとはGit管理では重要で、大本のソースから派生したものとなります。

Git管理は基本的に、作業者や作業内容でブランチを分けていって、それを最終的にマージ(合体)します。

ブランチの作成手順は以下です。

画面下部の現在のブランチ名を押下します。
(私の場合「main」というブランチになります。)

ブランチ作成1

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

ブランチ作成2

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

ブランチ作成3

「Branchの発行」を押下してリモートへ反映します。

画面下部が作成したブランチ名になっていることを確認してください。

ブランチ作成4

下記コマンドでブランチが作成されていることを確認します。

git branch

まとめ

今回はLarabelの環境構築についての手順を紹介しました。

分量としてかなり多くなりましたが、初期設定を丁寧に行うことで、後々開発が楽になりますね。

またLarabelの開発について情報を紹介していこうと思います。

参考サイト

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

フリーランスエンジニアとして活動。
主に業務システムの要件定義~保守まで幅広く担当しています。
お気軽にお問い合わせください。

【趣味】
筋トレ/読書/プログラミング/資格の勉強

コメント

コメントする

目次