もりさんのプログラミング手帳

教えることは、二度学ぶこと

スポンサーリンク

【Laravel】Windows10Homeで環境構築(Homestead・VirtualBox・Vagrant・Composer)

f:id:excel-accounting:20181016200305p:plain

PHPのフレームワークLaravelを使用した某プロジェクトに初参加!

Homesteadを使用してゼロから構築した一連の手順を全記録しました。

初心者だからこそ遭遇する謎のエラーとか、このコマンドってどこのパスで実行するの?とか、悩みがつきないものです。

初心者のゼロベースの作業記録こそが後続の初心者に役立つと思い、画面キャプチャなども含めて詳細にまとめています!

Windowsユーザのお役にたてばうれしいです。

前提条件・環境

私の環境はこちら

  • OS→Windows 10 Home 64bit
  • ターミナル→Git for Windows

この記事の手順は、既存のLaravelプロジェクトに途中参加した時のものです。
※新規にLaravelプロジェクトを作成する場合は手順が異なると思いますのでご注意ください!

【Step 1】Vagrant・VirtualBoxのインストール

Vagrantとは?VirtualBoxとは?については、参考サイト一覧①に詳しく書いてあるので、そちらをご覧くださいね。

①Vagrant のインストール
DOWNLOAD VAGRANT からWindows版をダウンロードしてインストールします。

②VirtualBox のインストール
Download VirtualBox からWindows版をダウンロードしてインストールします。

私がインストールした時のバージョンは下記の通りです。

  • ダウンロード日 2018/10/7
  • Vagrant 2.1.5
  • VirtualBox 5.2.18

【Step 2】Homestead vagrant box をダウンロード

それではターミナルを起動しましょう!(私はGit for WindowsのGit Bashを使用しています)

※インターネット環境が快適・安定したところで行いましょう!ネットが遅いとエラー(?)が出るかも

✔ 実行パス
任意(私はGit Bash起動直後の画面で実行しました。)

✔ 実行コマンド

vagrant box add laravel/homestead

コマンド実行後、Enter your choiceで仮想化ソフトウェアの種類を聞かれます。
この記事ではVirtualBoxを使用するので、3と入力してEnterを押します。

f:id:excel-accounting:20181013204704p:plain

✔ 実行結果
約5分で完了しました。
(参考にしたサイトの方は10分と書いてあるので、多少待つようです)

このメッセージが出ればOKです
f:id:excel-accounting:20181013204737p:plain

〈エラー〉SSL_ERROR_SYSCALL, errno 10054が出たら

f:id:excel-accounting:20181013204727p:plain

最初に実行した際に出たエラーです。

エラーメッセージで色々検索した結果、自宅のWifiが遅いのが原因だったようです
(約30分待ったあげくにこのエラーメッセージに遭遇…)


手持ちのポケットWifiに切り替えて再度コマンド実行したら約5分で正常終了しました。(1.5GB消費…)

(参考)Pocket WiFi 603HW 超高速下り最大612Mbps!


もし、同じように、時間がかかりすぎてこのエラーに出くわした場合は、インターネット環境を疑ってみましょう!

【Step 3】Homstead のダウンロード

前提

Homesteadのファイルをダウンロードするフォルダを作成します。
作成場所(パス)は任意です。

ここでは、C:\Users\{ユーザー名}の配下にappという空フォルダを作成したとして、説明していきます。

Homestead のダウンロード

✔ 実行パス
/c/Users/{user}/app

✔ 実行コマンド

git clone https://github.com/laravel/homestead.git Homestead

✔ 実行結果
app配下にHomesteadフォルダが作成され、一式ダウンロードされています。
f:id:excel-accounting:20181013195707p:plain

YAMLファイルの作成

上記で作成されたHomesteadフォルダに移動します。

✔ 実行パス
/c/Users/{user}/app/Homestead

✔ 実行コマンド

bash init.sh

✔ 実行結果
Homestead配下に、[Homestead.yaml]というYAMLファイルが作成されます。
後続の作業でこのファイルを編集します。

ここのStepでは[Homestead.yaml]が作成されていることを確認できればOKです。

(参考)画面キャプチャはこんな感じ

f:id:excel-accounting:20181013194635p:plain

【Step 4】SSH鍵ファイルの作成

ホストOS(自PC)とゲストOS(仮想マシン)のやり取りをするために必要な鍵です。

✔ 実行パス
/c/Users/{user}

✔ 実行コマンド

ssh-keygen -t rsa

①何も入力せずEnterを押します
②設定したいパスワードを入力します
③確認用にもう一度パスワードを入力します

f:id:excel-accounting:20181013210551p:plain

✔ 実行結果
{user}配下に.sshフォルダが作成され、中にファイルが2つ作成されます。

  • id_rsa
  • id_rsa.pub

【Step 5】codeフォルダに既存のLaravelプロジェクトをクローン

codeフォルダの作成

C:\Users\{user}\app\Homestead
配下にcodeフォルダ(空フォルダ)を作成します。
エクスプローラーから「フォルダを作成」でも、ターミナルでmkdirでもOK

f:id:excel-accounting:20181013211305p:plain

リモートリポジトリからLaravelのプロジェクトをclone

C:\Users\{user}\app\Homestead\code に、プロジェクトのリモートリポジトリをcloneします。

クローンの方法はここでは説明省略します。
Sourcetreeを使用している方はこちらをご覧ください。
www.excel-prog.com

【Step 6】環境設定ファイルの設定

環境設定用の2ファイルに接続情報などを記述します。

YAMLファイルの編集

/c/Users/{user}/app/Homestead配下の[Homestead.yaml]ファイルを編集します。

※folders:mapは、Cドライブ配下のフルパスを記述します
※sites:mapのhoge.localはご自分のプロジェクトに読み替えてください

ip: "192.168.10.10"
memory: 2048
cpus: 1
provider: virtualbox

authorize: ~/.ssh/id_rsa.pub

keys:
    - ~/.ssh/id_rsa

folders:
    - map: C:\Users\{user}\app\Homestead\code
      to: /home/vagrant/code

sites:
    - map: hoge.local
      to: /home/vagrant/code/nyan/public

databases:
    - homestead

Windows hostsファイルの編集

C:\Windows\System32\drivers\etc 配下のhostsを編集します。

私の環境では、アクセス権限の問題でhostsファイルを直接修正できないので、hostsファイルをデスクトップ等にコピーして編集してから、ファイルを差し替えました。

■hostsの設定
hoge.localはご自分のプロジェクトに読み替えてください(YAMLファイルのsites:mapと同じものです)

127.0.0.1  localhost
192.168.10.10  hoge.local

【Step 7】仮想マシンの起動

✔ 実行パス
/c/Users/{user}/app/Homestead

✔ 実行コマンド

vagrant up

f:id:excel-accounting:20181013211818p:plain

✔ 実行結果
Oracle VM VirtualBox マネージャーで起動が確認できます。
f:id:excel-accounting:20181013221518p:plain

【Step 8】仮想マシン上でComposerをインストール

仮想マシンに接続

✔ 実行パス
/c/Users/{user}/app/Homestead

✔ 実行コマンド

vagrant ssh

✔ 実行結果
仮想環境に接続されます。

composerのインストール

※ここからの作業は、起動した仮想マシンで行います

✔ 実行パス
任意(?)

✔ 実行コマンド

composer install

✔ 実行結果
コマンド実行後、長いメッセージが表示されます。正常終了すればOKです。
f:id:excel-accounting:20181013213801p:plain

【Step 9】 DB構築

envファイルの設定

Laravelプロジェクトに含まれている.env.exampleを.envにリネームして、設定内容を編集します。

※.env.exampleは、リモートリポジトリからcloneしてきたフォルダ内にあります(※隠しファイル)
f:id:excel-accounting:20181013214705p:plain

■envの設定
※プロジェクト固有の設定情報は書けないので、ポイント部分のみ一部抜粋です

APP_NAME=Laravel
APP_ENV=local
APP_KEY=
APP_DEBUG=true
APP_URL=http://localhost

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=homestead
DB_USERNAME=homestead
DB_PASSWORD=secret

アプリケーションキーの初期化

✔ 実行パス
artisanファイルと同一パス

✔ 実行コマンド①

php artisan key:generate

DB構築

✔ 実行コマンド②

composer dump-autoload

✔ 実行コマンド③

php artisan migrate

✔ 実行コマンド④

php artisan db:seed

✔ 実行結果
f:id:excel-accounting:20181013215822p:plain


これでアクセスできるようになりました。

ブラウザからhttp://hoge.localにアクセスしてみてください。
hoge.localはご自分のプロジェクトに読み替えてください。(YAMLファイルとhostsに記述したやつです)

上手く表示されない場合は、次項のエラー対応をご覧ください

こんなエラーが出たときは?

ブラウザにNo input file specified.と表示される

✔ 確認ポイント
下記の2点が一致しているか確認しましょう。

  • 仮想マシンのindex.phpが存在するパス
  • YAMLファイルのsites:to:

(それぞれの★が一致しているか)

f:id:excel-accounting:20181014001618p:plain

f:id:excel-accounting:20181014001633p:plain

オレンジ色のWarning(failed to open stream)が出る

✔ 確認ポイント
hostsファイルの設定・envファイルの設定を見直しましょう。
f:id:excel-accounting:20181014000236p:plain

QueryException(変なSQLのエラー)が出る

✔ 確認ポイント

DB接続の設定が怪しいです!
【Step 9】 DB構築を見直しましょう。

おまけ(YAMLファイルの設定反映)

一通り環境構築を終えたけど、YAMLファイルを変更(修正)した場合は、設定反映が必要です。

✔ 実行パス
/c/Users/{user}/app/Homestead

✔ 実行コマンド
vagrantが立ち上がっていない場合

vagrant up --provision

vagrantが立ち上がっている場合

vagrant reload --provision


以上です!


環境構築・・・ツライですよね・・・

エラー発生→ググる→ググる→これさっき見たページや~ん→ググる→解決→次のエラー発生→ググる→・・・の無限ループにハマっちゃって、初心者がひとりでやってたら、開発に入る前に挫折しちゃいそうですよね

そんな私をサポートしてくれたのがこちら!

Special Thanks !!

入江開発室プロジェクトの先輩・小野雅希さんです。

エラー事象をSlackで説明するだけで、「XXの設定がXXになっちゃってませんか?」と、まるで私のPCが見えているかのようなピンポイントなアドバイス!ありがとうございました!

会社員としてのSEを経て、現在はフリーのWebエンジニア・ブロガーとして活動されています!

小野さんのブログはこちらです。

ブログタイトルのB-minorって単語、気になりますよね??
その由来は、ぜひぜひブログ内のプロフィールを読んでみてください!(私は共感度MAXでした)
b-masaki.me

MENTAもやってます!
menta.work

スポンサーリンク