自分だけのクイズを作成しよう - Quipha
スポンサーリンク

【Laravel】プロジェクトをGitHubからクローンした後にやること

Laravel

当サイトではアフィリエイト広告を利用しています。

スポンサーリンク

はじめに

開発中のプロジェクトのソース管理は、GitHubがよく使われるでしょう。

複数人の開発でもソースの管理ができるので便利ですよね!
今回は、GitHubのリポジトリにあるLaravelプロジェクトを、クローンして開発環境を構築しサイトが起動するところまでの手順をまとめました。

詳しくは以下のサイトもご覧ください。

Laravel Sail 10.x Laravel
使用するバージョンなど
  • Windows 11 or macOS Monterey (M1)
  • Laravel 8 or 9 or 10

2022/10/12 WindowsとMacを使い、最新バージョンで確認しました。
2023/03/11 Laravel10で確認しました。

他にも私のブログで、Laravelについて解説している記事がありますのでご覧ください。

スポンサーリンク

【紹介】個人開発

私の個人開発ですがQuiphaというサービスを開発しました。(Laravel, Vue3など)
良かったら、会員登録して動作を試してみて下さい。

また、Laravel 9 実践入門という書籍を出版しました。
Kindle Unlimitedを契約している方であれば、読み放題で無料でご覧いただくことができます

是非多くの方に読んでいただき、Laravelの開発に少しでもお役に立てたら幸いです。

VS Codeの用意

VS Codeのインストール方法は、以下の記事にまとめましたのでご覧ください。

設定方法は以下を参考にしてください。

LaravelプロジェクトをGitHubへプッシュ

以前、LaravelプロジェクトをGitHubへのプッシュ方法をまとめましたので、以下の記事を参考にしてください。

Git クローン

その1:VS Codeでクローン

VS Codeを開きます。
ソース管理を開き、「リポジトリのクローン」をクリックします。

「GitHubから複製」を選択します。

以下のダイアログが表示されますので、「許可」をクリックします。

Windows

ちなみにMacの場合は以下のようなダイアログになります。

Mac

拡張機能 ‘GitHub’ が GitHub を使用してサインインしようとしています。

以降の解説キャプチャは、Windowsをベースにしていますが、Macでも操作は同様です。

GitHubアカウントでサインインを行います。

「Authorize Visual Studio Code to access GitHub」と表示されました。
Continueボタンをクリックします。

成功しました。

VS Codeの方に、ユーザのリポジトリ一覧が表示されますので、クローンしたいリポジトリを選択します。

選択後、リポジトリのソースがダウンロードされ、クローンが完了します。

その2:Gitコマンドでクローン

以下のGitコマンドでリポジトリをクローンします。
URLについては、各自のリポジトリのものを指定してください。

git clone https://github.com/xxx/example-laravel-github.git

Personal access tokensの発行のやり方は以下の記事を参考にしてください。

以下のように鍵認証を使用したSSHでのクローンでも可能ですし、VS Codeを利用したGitHub連携でも可能です。

git clone git@github.com:xxx/example-laravel-github.git

安全ではないリポジトリの管理

ソースの管理で、「安全ではないリポジトリの管理」と表示される場合はクリックしましょう。
WindowsのGitを使用した場合に表示されます。

詳しくは以下の記事を参考にしてください。

スポンサーリンク

Laravelプロジェクトの環境構築(Sailの場合)

クローンしてきたプロジェクトをVS Codeで開きます

LaravelプロジェクトをSailを使って構築します。詳しくは以下の記事を参考にしてください。
Windowsの場合は、WSL2やDockerのインストールが必要になります。
Macの場合は、Dockerが必要になります。

Windows
Mac

ターミナルを開きます。
WindowsはUbuntu(WSL)を開きます。

Windows

Macはターミナルを開きます。

Mac

リポジトリをクローンした直後は、vendorフォルダが存在しません
このフォルダの中にはComposerで管理しているパッケージが格納されますが、Gitの管理対象外になっているためです。

まずSailを起動したいところですが、Composerがそもそもありません。
Sail自身もComposerで管理されているためです。

Sailを使ってDockerコンテナ上に一通りの開発環境を用意したいのに、ローカルPCにComposerは入れたくないですよね?

ターミナルから以下のコマンドでComposerのパッケージのインストールを行います。

docker run --rm \
    -u "$(id -u):$(id -g)" \
    -v $(pwd):/var/www/html \
    -w /var/www/html \
    laravelsail/php82-composer:latest \
    composer install --ignore-platform-reqs

PHPとComposerを含む最小のDockerコンテナを使用して、アプリケーションの依存関係をインストールします。

laravelsail/phpXX-composerの部分の82は、プロジェクトで使用するPHPのバージョンと合わせる必要があります。(Laravel10では標準で8.2です)
docker-compose.ymlのlaravel.testコンテナーのbuild定義を確認してください。
(82はPHP8.2を表しています)

vendorフォルダに、Composerのパッケージがインストールされました。

ローカルPCにComposerやMySQLは必要ありません。
Sailでコンテナを作成し、開発環境を用意します。

次に、「.env.example」ファイルを参考に、.envファイルを作成します。

DB_HOSTを変更しましょう。コンテナ内のMySQLに接続するために以下のように変更します。

DB_HOST=127.0.0.1
↓
DB_HOST=mysql

Sailをバッググランドで起動します。

./vendor/bin/sail up -d

以下のコマンドでAPP_KEYを更新します。

sail php artisan key:generate

以下のコマンドでテーブルを作成しましょう。

sail php artisan migrate

正常にテーブルが作成されました。

Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated:  2014_10_12_000000_create_users_table (219.70ms)
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated:  2014_10_12_100000_create_password_resets_table (167.89ms)
Migrating: 2019_08_19_000000_create_failed_jobs_table
Migrated:  2019_08_19_000000_create_failed_jobs_table (156.31ms)
Migrating: 2019_12_14_000001_create_personal_access_tokens_table
Migrated:  2019_12_14_000001_create_personal_access_tokens_table (216.64ms)

phpMyAdminからも確認できます。

MySQLのユーザ・パスワードは.envに記載の通りです。

SailにphpMyAdminの構築方法は以下の記事を参考にしてください。

ついでにLaravel-Mixのビルドも行いましょう。
NPMコマンドでパッケージをインストールします。

sail npm install

ビルドを行います。開発時なのでdevを指定しました。
「Compiled Successfully」と表示され、publicフォルダにcss/jsファイルが出力されていることを確認します。

sail npm run dev

最後に、以下のURLにアクセスしましょう。

http://localhost/

正常にLaravelの画面が表示されました。

バッググランドで起動したSailの終了方法は以下です。

sail down

ここまでで一通りの開発環境の構築と確認ができました。

Laravelプロジェクトの環境構築(Composerの場合)

Sail環境ではなく、ローカルPCのComposerやNPMを使用する場合の手順をまとめました。

Composerのパッケージのインストールは、ローカルPCのComposerで行います。

composer install

後は、npmのインストールやテーブルの作成などは、以下の記事を参考にしてください。

さいごに

Laravelの開発を、GitHubを利用して複数人の開発を行う場合があると思います。
そういった時に必要な手順をまとめました。

是非参考にしてください。

他にも私のブログで、Laravelについて解説している記事がありますのでご覧ください。

\オススメ/

コメント

  1. より:

    いつも千草先生の記事を熟読しながらLaravelの勉強をしております、南と申します。

    本記事の通りに実行しているときにsail php artisan migrateを実行すると以下のようなエラーが発生し、実行することができません。

    $ sail php artisan migrate
    
       Illuminate\Database\QueryException
    
      SQLSTATE[HY000] [2002] Connection refused (Connection: mysql, SQL: select * from information_schema.tables where table_schema = project and table_name = migrations and table_type = 'BASE TABLE')
    
      at vendor/laravel/framework/src/Illuminate/Database/Connection.php:793
         789▕         // If an exception occurs when attempting to run a query, we'll format the error
         790▕         // message to include the bindings with SQL, which will make this exception a
         791▕         // lot more helpful to the developer instead of just the database's errors.
         792▕         catch (Exception $e) {
      ➜ 793▕             throw new QueryException(
         794▕                 $this->getName(), $query, $this->prepareBindings($bindings), $e
         795▕             );
         796▕         }
         797▕     }
    
          +38 vendor frames
    
      39  artisan:35
          Illuminate\Foundation\Console\Kernel::handle()
    

    新しいプロジェクトをgit cloneし確認しても、同様のエラーが発生することを確認しました。

    私の検索能力や知識レベルでは解決できる見込みが立ちません。

    普段、ご多忙のことかと存じ上げますが
    ご教授いただくことは可能でしょうか。

    何卒よろしくお願いします。

    • 千草 より:

      こちらでも本記事の手順通りに確認しました。
      基本的に手順は問題ありませんが、Sailの初回起動時にMySQLの初期化に時間がかかっているようです。

      コンテナもボリュームもない場合、MySQLが初期化を行っており、私のPCでは30秒程度かかっていました。
      その間に以下のコマンドを実行すると、まったく同じエラーが発生しました。

       sail php artisan migrate
      

      初期化時間はPCのスペックにもよるかと思いますが、Sailを起動後、しばらく時間をおいてから上記のコマンドを実行し確認してみてください。
      私の環境ではうまく行きました。

      • より:

        千草先生

        返信ありがとうございます。
        しばらく時間を空けてから再び実行したところ解決しました!