【Laravel/Vue】Githubに公開されているシステムを動かす

Laravel

先日、Laravel学習の一環(いわゆるコードリーディング)として、Githubで公開されているプロジェクトを、ローカルにもってきて立ち上げしました。
初めて経験し、プチ環境構築の経験にもなったので、その方法を記します。

「他人が作ったシステムをローカルで動かしてみたい。デバッグ等してみたい。
でも環境構築が難しくて挫折しそう…」と思った初学者の参考になればと思います。

参考にしたのは、Laravel×Vueで開発されたLaravel-blog というWebアプリになります。

Laravel-blogは、readmeから引用すると

The purpose of this repository is to show good development practices on Laravel as well as to present cases of use of the framework’s features like:

和訳:このリポジトリの目的は、Laravelでの優れた開発手法を紹介するとともに、以下のようなフレームワークの機能の使用例を紹介することです。

とあるように、どのような書き方で実装されているか、初学者にとっても参考になる部分が沢山ありそうですね。開発者に感謝!

それではやってみましょう!

【注意】今回の記事は、Laravel-blogを動かす為の方法です。
設定が異なると思いますので、他のプロジェクトを動かしたい方は、参考程度に留めておいてください。

準備:
VirtualBoxとVagrantが必要になります。
PCに入っていない方は、インストールを先にしておいてください。

①git cloneをしてローカルにディレクトリを持ってきます

GitHub - guillaumebriday/laravel-blog: Laravel 9.0 blog application with Hotwire, Homestead, Horizon, Telescope and Pusher
Laravel 9.0 blog application with Hotwire, Homestead, Horizon, Telescope and Pusher - GitHub - guillaumebriday/laravel-blog: Laravel 9.0 blog application with H...

Source treeの場合、新規→URLからクローン を押して、URLを貼り付けます。

②ターミナルで操作

ディレクトリに移動

cd laravel-blog

envのファイル名を変更して有効にする

cp .env.example .env

composerをインストールする

composer install

僕の場合、PHPのバージョンが必要とされる分とあっていないとエラーが出たので、アップデートしました。

こちらのQiita記事が参考になりました。

PHPのバージョンを7.4にアップデートする - Qiita
課題 PHPのバージョンをアップデートする 現状のバージョンを確認する 下記のコマンドでバージョンを確認 ターミナル $ php -v PHP 7.1.30 (cli) *ちなみにですが今回はHomebrewを使...

Vagrantを起動してVMの中に入る

vagrant up

vagrant ssh

③VMに入って環境構築。あと一息です!

cd code

yarn install

php artisan key:generate

php  artisan horizon:install

php artisan telescope:install

php artisan storage:link

これでLaravelの環境構築終わりです!

これで、ブラウザにhttp://localhost:8000を入力すれば見れると思います! 

DBの構造も把握したいので、クライアントツールを使って見てみましょう。

(僕はSequel Aceを使っています)

Homestead.yamlと.envを参考に情報を入力します。

ip: 192.168.10.10
DB_DATABASE=homestead
DB_USERNAME=homestead
DB_PASSWORD=secret

DBも無事見れました〜〜!

VMに入るのは環境構築時のみで、通常見る際は

vagrant up

のコマンドのみで立ち上がる事ができます。
ちなみにVagrantの終了コマンドは

vagrant halt

となります。

お疲れ様でした!!

気になる変数の所で、dd();をして中身を見てみるなど、
自由に操作できますね!

他にもSeedingの操作方法など、使えるコマンドはReadmeにも記載されているので
色々と試してみてください!

コメント

タイトルとURLをコピーしました