猫でもわかるWeb開発・プログラミング

本業エンジニアリングマネージャー。副業Webエンジニア。Web開発のヒントや、副業、日常生活のことを書きます。

Ansibleで構築したVagrant上のLaravel環境を使ってlocal開発環境を整える

この記事の続きてきなやつです

yoshiki-utakata.hatenablog.com

local環境で書いたLaravelのコードをすぐにvagrant上で動作確認したい

  • 開発しているPCにPHP7を入れるのはめんどいので動作確認はVagrant上でした
  • 書いたコードが即VagrantVMに反映されて動作確認できるようにしたい

これらを実現します。

新しいユーザーを作成する

アプリケーションを動作させる用のユーザーを作成します。

Vagrantのsynced_folderの設定をする

いまディレクトリはこうなっています

Vagrantfile
ansible/ -- ansibleが入っているディレクトリ

とりあえずここに適当なディレクトリを作ります。

Vagrantfile
ansible/
applications/

この applications ディレクトリをVagrantVMと共有します。以下をVagrantfileに追記します。

# coding: utf-8
# -*- mode: ruby -*-
# vi: set ft=ruby :

Vagrant.configure(2) do |config|
  
  ...

  # ホストとディレクトリを同期する
  config.vm.synced_folder "applications", "/home/vagrant/applications", create: true, mount_options: ["uid=vagrant,gid=vagrant"]

end

vagrant reload します。

vagrant側にディレクトリが出来ていることを確認します。

$ vagrant ssh

[vagrant@vagrant ~]$ ls -l
total 0
drwxr-xr-x 1 vagrant vagrant 68 Dec  7 06:46 applications

共有フォルダ上でアプリケーションを作成する

これでLaravel 5.5開発もお手の物です。例えばlocalで*1 Laravel 5.5 のアプリケーションを作成しようとすると

$ composer create-project laravel/laravel myapp "5.5.*"

  [InvalidArgumentException]
  Could not find package laravel/laravel with version 5.5.* in a version installable using your PHP version 5.6.22.

local環境はPHP 5.6.22なので無理だとよ言われてしまい作成できません。そこで、vagrant上でLaravel 5.5 のアプリケーションを作成します。先程 synced_fonder の設定をした /home/vagrant/applications 上でLaravel 5.5のアプリケーションを作成します。

$ vagrant ssh

[vagrant@vagrant ~]$ cd applications/
[vagrant@vagrant applications]$ composer create-project laravel/laravel myapp "5.5.*"

こうするとホストOS側でもlaravelのアプリケーションのディレクトリができています。

$ ls applications
myapp/

Apacheの設定を書き換える

アプリケーションのパスが変わったのでApacheの設定を書き換えます。

diff --git a/roles/apache2_4/templates/laravel.conf.j2 b/roles/apache2_4/templates/laravel.conf.j2
index cdc7831..bb14ec9 100644
--- a/roles/apache2_4/templates/laravel.conf.j2
+++ b/roles/apache2_4/templates/laravel.conf.j2
@@ -1,10 +1,10 @@
 <VirtualHost *:80>
-        DocumentRoot /home/vagrant/myapp/public
+        DocumentRoot /home/vagrant/applications/myapp/public

         ErrorLog /etc/httpd/logs/laravel_error.log
         CustomLog /etc/httpd/logs/laravel_access.log combined

-        <Directory "/home/vagrant/myapp/public">
+        <Directory "/home/vagrant/applications/myapp/public">
                 AllowOverride All
                 Require all granted
         </Directory>

vagrant provision して http://localhost:58080 にアクセスしてみます。Laravelのページが表示されるはずです。

適当に変更を加えてみる

Laravelのアプリに軽く変更を加えてみます。

ルーティングの設定は myall/routes あたりに書かれています。例えば、http://localhost:58080 にアクセスした時のルーティングは routes/web.php

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', function () {
    return view('welcome');
});

view('welcone'); に対応するビューは myapp/resources/views/welcome.blade.php です。これを少し書き換えてみます。

その前にまず git init します

cd myapp
git init
git status
git add .
git commit

`resources/views/welcome.blade.php を編集してみます。

diff --git a/resources/views/welcome.blade.php b/resources/views/welcome.blade.php
index a246e10..33e4a38 100644
--- a/resources/views/welcome.blade.php
+++ b/resources/views/welcome.blade.php
@@ -79,7 +79,7 @@

             <div class="content">
                 <div class="title m-b-md">
-                    Laravel
+                    Laravel 5.5
                 </div>

                 <div class="links">

http://localhost:58080 にアクセスしてみます。

f:id:yoshiki_utakata:20171207180222p:plain

まとめ

Ansibleはちょっと雑なところがありますが、だいたいこんな感じで開発は進めていけると思います。Laravelかなり便利なフレームワークなので皆使っていきましょう。

*1:VagrantではないホストOS上