みなさん、こんにちわ。オルターブースの小島です。最近はハッカソンでも学生向けハッカソンメンターをやる機会が多くて、最初につまづく環境構築について詳細に書いてみました。これをもとに環境構築できればいいですね！

※本記事で環境構築時に使用したMacは以下になります。 - 機種名: MacBook Pro - 機種ID: MacBookPro18,4 - チップ: Apple M1 Max - コアの総数: 10（パフォーマンス: 8、効率性: 2） - メモリ: 32 GB

全体の流れ

単純にLaravel環境を構築するだけでなく、その前後の設定や操作も説明しています。 Laravel環境をローカル環境へ直接セットアップせずに、Laravel Sailを使いコンテナにセットアップします。そしてVS Codeから直接リモート接続し開発できる環境を構築します。

Dockerのインストール

公式サイトからDocker for Macのデスクトップアプリをダウンロードします。

docs.docker.com

IntelチップとApple Chipがありますが、今回はM1を積んだMacにインストールするので "Mac with Apple chip" を選択します。

VS CodeにRemote Developmentをインストールする

VS Codeには様々な拡張機能が用意されています。今回はdevcontainerを使いますので拡張機能から "Remote Development" をインストールします。

手順としては以下になります。

表示メニューから拡張機能を選択する
検索窓に”Remote Development"を入力する
Remote Developmentを選択し、インストールする

インストールが完了するとVS Codeの縦メニューにリモートエクスプローラーが表示されます。

Laravel Sailのセットアップ

Laravel SailとはLaravelが提供するコンテナのセットアップスクリプトです。従来であればComposerでセットアップしますが、今回はコンテナを利用して環境を構築します。

下準備

まずはVS Codeのターミナルを開きます。そこからローカル環境のプロジェクトディレクトリを作成します。

※ ”Laravel-Project"と記載している部分はプロジェクト名ですので任意に変更してください。

cd ~
mkdir Laravel-Project
cd Laravel-Project

Laravel Sailのセットアップスクリプトを実行する

Laravel Sailのセットアップスクリプトを実行します。

※ ”laravel-example"と記載している部分はプロジェクト名ですので任意に変更してください。

curl -s https://laravel.build/laravel-example?with=mysql | bash
cd laravel-example

ここで以下のようなエラーが出ちゃった人はMacのデフォルトシェルがzshになっていて、Bashにパイプできない状態になっている可能性が高いです。

zsh: no matches found: https://laravel.build/laravel-example?with=mysql

以下のコマンドを入力して入力モードをBashに切り替えます。

bash

以下のようなメッセージが出てbashモードになればOKです。

The default interactive shell is now zsh.
To update your account to use zsh, please run `chsh -s /bin/zsh`.
For more details, please visit https://support.apple.com/kb/HT208050.
bash-3.2$

bashモードから以下のコマンドを入力します。

curl -s https://laravel.build/laravel-example?with=mysql | bash

コマンドが全て終了すると

Thank you! We hope you build something incredible. Dive in with: cd laravel-example && ./vendor/bin/sail up

というメッセージが表示されますので、bashモードを exit を入力して終了します。

コンテナのビルドを実施する

sailコマンド入力してコンテナをビルドします。

./vendor/bin/sail up -d

次にdevcontainerで起動するコンテナを指定します。

./vendor/bin/sail artisan sail:install --devcontainer

Which services would you like to install?? [mysql]:
と聞かれるので "0" を入力します。

VS Codeからリモート接続する

先ほど作ったコンテナへは全てVS Codeを使ってリモート接続できます。 VS Codeからリモートエクスプローラーを表示させます。

Dev Containerにlaravel-exampleが表示されていればOKです。ここからリモート接続をします。

VS Codeの画面が切り替わりターミナルが表示されます。

ターミナルから以下のコマンドを入力してLaravelのサンプルコードをVS Codeで開きます。

cd /var/www/html/
code .

これでVS Codeの環境は整いました。以後は、composerやartisanコマンドなど利用してPHPやLaravelを拡張するときはリモート接続したコンテナにVS Codeからログインしてコマンドを入力していきます。

一度この状態でブラウザからLaravelのサンプルコードを表示させてみます。

http://localhost にアクセスし、以下の画面が表示されれば成功です。

GitHubとの連携

次に行うことはGitHubでコードを管理するためにLaravelのプロジェクトとGitHubに作ったリモートリポジトリを同期させることです。これも非常に簡単です。

公開鍵をGitHubに登録する

VS Codeのターミナルからコンテナにログインし、以下のコマンドを入力します。

ssh-keygen -t rsa

色々聞かれるが全てエンターキーを押す

このコマンドを入力するとSSH鍵というものが作成されます。このSSH鍵は公開鍵と秘密鍵がセットになったもので、公開鍵をGitHubにセットアップします。

cat ~/.ssh/id_rsa.pub

表示された文字列を全てコピーする

モザイクかけていますが表示された文字列です。

GitHubのSettingから公開鍵を作成します。（自分のアイコンをクリックします）（SSH and GPG keysをクリックし、New SSH keysから作成します）（先ほどコピーした公開鍵を貼り付けます）

これでGitHubのセットアップは完了です。

LaravelのサンプルコードをGitHubへプッシュする

以下のコマンドを入力してGitの初期セットアップをする。

cd /var/www/html
git init .
git remote add origin YOUR_REPOSITORY_URL

YOUR_REPOSITORY_URLはGitHubのリポジトリURLです。 Gitの初期設定が終わるとVS Codeの画面にGitHubのリポジトリとローカルリポジトリの差分が表示されます。

ターミナルから以下のコマンド入力してGitHubにプッシュします。

git add .
git commit -m "コミットメッセージ"
git push origin main

これでGitHub にプッシュできました。

で、こんなに面倒臭いんですがそれをサクッとできるようなdevcontainerをへーしゃのCTAさんが公開されてました。

tsubalog.hatenablog.com

こういうのを悩みに悩んで解決したときに人は賢くなるので、ぜひみなさんも試行錯誤しながらやってみてくださいね。

www.alterbooth.com

cloudpointer.tech

Alternative Architecture DOJO

オルターブースのクラウドネイティブ特化型ブログです。

超初心者向けLaravel+devcontainerで作るチーム開発環境 Mac版