Virtual box × vagrant × CakePHPの環境構築 #PHP

はじめに

インターン先でも同じような環境下で開発を行なっているのですが、個人的な開発ができる環境を作って色々作りたいなと思ったので改めて構築したのですが、以前構築した時の記憶が曖昧という事と、渡された手順に沿って構築していっただけだったので、何も理解できておらず、非常に苦戦したので、備忘録としてここに記事という形で書こうと思います。

流れ

大まかな流れをざっと先に紹介します。

Virtual boxのインストール
vagrantのインストール
vagrantの環境設定
Cakeのプロジェクト立ち上げ

以降1つずつ紹介していきます。

Virtual boxのインストール

まずVirtual boxのインストールをします。
こちらからインストールできます。→　https://www.virtualbox.org/

[参考]
https://eng-entrance.com/virtualbox-install

Virtual boxがなんなのかわからない方は下記を参考にしてみて下さい。

[参考]
https://hajipro.com/virtualbox/what-virtualbox

vagrantのインストール

続いてvagrantのインストールをします。
こちらからインストールできます。→ https://www.vagrantup.com/downloads.html

[参考]
https://weblabo.oscasierra.net/install-vagrant-onto-macosx/

次に、boxfileをダウンロードします。
ここから任意のfileを選択して、　→　http://www.vagrantbox.es/
以下のコマンドを叩きます。

$ vagrant box add [box名] [boxfileのURL]

ダウンロードが完了しましたら、任意のディレクトリに移動して、vagrantの初期化を行うので、以下のコマンドを叩きます。

$ cd hoge
$ vagrant init [box名]

ここでいう[box名]は先程boxfileインストール時に使用したbox名です。

次は、ネットワークの設定を行います。
先程のコマンドを実行すると、Vagrantfileが生成されますので、そのVagrantfileを編集します。

Vagrantfileに

# config.vm.network "private_network", ip: "192.168.33.10"

上記の1行の先頭の#を外して

config.vm.network "private_network", ip: "192.168.33.10"

このような形に編集します。

次はvagrantの起動を行うので、
以下のコマンドを叩きます。

$ vagrant up

起動が完了したら、vagrantにログインしてみましょう。

$ vagrant ssh

vagrantのコマンドは他にも数多く存在し頻繁に使用しますので、こちらを参考にしてみて下さい。
[参考]
https://qiita.com/oreo3@github/items/4054a4120ccc249676d9

vagrantがそもそもなんなのか分からない方は、こちらを参考にしてみて下さい。
[参考]
https://weblabo.oscasierra.net/about-vagrant/

Virtual boxとvagrantの違いに関してはこちらが参考になりましたので、掲載します。
[参考]
https://qiita.com/andrew954/items/1d9f460558da7b84768f

vagrantの環境設定

Apacheのインストールを行います。
下記のコマンドを叩きます。

$ sudo yum install httpd

apacheがインストールできましたら、apacheを起動します。
下記のコマンドを叩きます。

$ sudo service httpd start

コマンド実行後下記のように表示されたら起動完了です。

Starting httpd (via systemctl):                            [  OK  ]

そしたらブラウザからアクセスして見ましょう。
Vagrantfileの編集の際に編集したIPアドレスにアクセスします。

うまくいっていれば、下記の画面が表示されるかと思います。

実際に自分が作成した簡易的なファイルが表示されるかの確認もできます。
apacheはデフォルトで、/var/www/html配下のファイルを見ますので、そこにファイルを作成します。
なので、まず/var/www/htmlに移動します。

$ cd /var/www/html

移動しましたら、そこにhtmlのファイルを作成するので、下記コマンドを叩きます。

$ touch index.html

権限が無いと怒られた場合は、sudoを先頭につけて再度実行して下さい。

ファイルが作成できたら、ファイルの中身に簡易的なHTML構造のコードを書きますので、まずviコマンドでファイルを開きます。

$ vi index.html

何も記載されていない画面が表示されると思うので、insertモードにして記述していきます。
insertモードにした時にreadonly fileと怒られた場合は、sudoを先頭に付けて再度開いて下さい。

viコマンドがわからない方はこちらを参考にしてみて下さい。
[参考]
http://www.ritsumei.ac.jp/~tomori/vi.html

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>test</title>
</head>
<body>
<h1>Hello</h1>
</body>
</html>

titleとbody部分は適当に入力して下さい。

作成できましたら、もう一度ブラウザにアクセスしてみましょう。

このように表示されたら成功です。

そしたら次は、PHPのインストールです。
yumでインストールをするのですが、Cakeの導入方法が今回はcomposerになります。
composerでインストールしてCakeのプロジェクトを立ち上げる場合、PHPのバージョンは5.6以上が必要になります。
yumでのインストールの場合、CentOS６系の場合、PHPのバージョンは5.3で、CentOS7系の場合は5.4となり、立ち上げる事が出来ません。
なので、epelとremiリポジトリを追加します。(epelは既に入っているかもしれません。)

epalリポジトリ

$ yum install epel-release
又は
$ rpm -Uvh https://dl.fedoraproject.org/pub/epel/epel-release-latest-[バージョン].noarch.rpm

remiリポジトリ

$ rpm -Uvh http://rpms.famillecollet.com/enterprise/remi-release-[バージョン].rpm

rpmコマンドで追加出来ない場合は、下記のコマンドを先に叩いて再度rpmコマンドを叩きます。

$ wget http://rpms.famillecollet.com/enterprise/remi-release-[バージョン].rpm
$ rpm -Uvh remi-release-[バージョン].rpm

[バージョン]の部分には、自身のOSのバージョンに応じて変えてください。
CentOS6系の場合は6を、7系の場合は7になります。

ダウンロードしたらPHPのバージョンを指定してインストールをしますので、下記コマンドを叩きます。

$ yum install --enablerepo=remi,remi-php[バージョン] php php-devel php-mbstring php-pdo php-gd php-xml php-mcrypt

そしたらphp.iniを編集します。
ここは環境に応じて適当な編集にして下さい。
下記は私の環境での編集点になります。
viコマンドでphp.iniファイルを開きます。
php.iniは/etc/配下にあります。

$ cd /etc
$ vi php.ini

date.timezone = "Asia/Tokyo"

mbstring.language = Japanese
mbstring.internal_encoding = UTF-8
mbstring.http_input = UTF-8
mbstring.http_output = pass
mbstring.encoding_translation = On
mbstring.detect_order = auto
mbstring.substitute_charset = none

編集が終わったら、composerをダウンロードします。

$ curl -sS https://getcomposer.org/installer | php

ダウンロードしたら、パスが通っている場所にリネームをします。

$ mv composer.phar /usr/local/bin/composer

リネームしたら任意のディレクトリに移動して、composerをインストールします。

$ cd /var/www/html
$ composer install

epalやremiがなんなのかわからない方は、下記を参考にして下さい。
[参考]
https://zudoh.com/archives/144
http://kayakuguri.github.io/blog/2015/12/18/linux-package/

ここら辺に関しては下記を参考にしましたので、記載致します。
[参考]
https://qiita.com/ozawan/items/caf6e7ddec7c6b31f01e

Cakeのプロジェクト立ち上げ

html配下に移動し、以下のコマンドを叩いて下さい

$ cd /var/www/html
$ composer create-project --prefer-dist cakephp/app [プロジェクト名]

プロジェクトの立ち上げに成功したら、ブラウザからIPアドレス/プロジェクト名にアクセスしてみましょう。
うまくいって入れば、Cakeの初期画面が表示されます。

追記

今回は/var/www/html配下でプロジェクトを立ち上げましたが、このままではホスト側で編集する事ができません。要するに、自分が使用したいエディタを使用できないという事です。
vagrant上で全て編集する方は、特に初心者の方などでは少ないと思われますので、ホスト側で編集できる方法も追記という形で、記載いたします。

ざっくりとした流れは、
1. /vagrant/配下に任意のディレクトを作成。
2. シンボリックリンクの作成
3. バーチャルホストの設定
4. ブラウザからのアクセス確認
5. 作成したディレクトリに移動して、Cakeのプロジェクトの立ち上げ
6. 再度ブラウザからアクセス確認

となります。

`/vagrant/`配下に任意のディレクトを作成。

まず任意のディレクトリを作成します。

$ cd /vagrant
$ mkdir hoge

シンボリックリンクの作成

apacheのドキュメントルート（/var/www/）に対してシンボリックリンクを作成します。

$ ln -s /vagrant/hoge/ /var/www/

シンボリックリンクが生成されたか確認しましょう。

$ cd /var/www/
$ ll
lrwxrwxrwx 1 root root 19  x月  x xx:xx hoge -> /vagrant/hoge

このようになっていればOKです。(xの部分はシンボリックリンクを作成した日付になります。)

シンボリックリンクが何かわからない方は、私の方で別途記事を書きましたので、ご覧ください。
[参考]
https://qiita.com/tatsuo-iriyama/items/77df0c8a0f4453eef4a8

バーチャルホストの設定

まずVagrantfileを編集します。
vagrant配下にVagrantfileがあると思いますので、config.vm.network "private_network", ip: "192.168.33.10"の下あたりに以下の1行を追加して下さい。

config.vm.hostname = "hoge"

hogeの部分は先ほど作成したディレクトリ名になります。

次に/etc/httpd/conf.d/配下にあるvirtualhost.confを編集します。
以下のコマンドを叩いてvirtualhost.confを開いて下さい。

$ cd /etc/httpd/conf.d
$ vi virtualhost.conf

開きましたら、insertにして下記のコードを追加します。

<VirtualHost *:80>
    DocumentRoot "/var/www/hoge"
    ServerName local.sample.com
    <Directory "/var/www/hoge">
      AllowOverride All
    </Directory>
</VirtualHost>

ServerNameは適当な名前を入れて下さい。

ブラウザからのアクセス確認

apacheを再起動してブラウザからアクセスできるかの確認をします。
アクセス先は、先程指定したServerNameになります。

$ sudo service httpd restart

うまくいっていれば先程掲載したテストページが表示されます。

作成したディレクトリに移動して、Cakeのプロジェクトの立ち上げ

先程作成したディレクトリに移動してCakeのプロジェクトを立ち上げます。

$ cd /var/www/hoge
$ composer create-project --prefer-dist cakephp/app [プロジェクト名]

再度ブラウザからアクセス確認

先程立ち上げたプロジェクトにブラウザからアクセスしてCakeの初期画面が表示されるか確認します。
アクセス先はServerName/プロジェクト名になります。

以上で終わりになります。

まとめ

今回は記載しませんでしたが、手順の間にはエラーが色々発生しました。
私がどういうエラーにどう対処して解決したのかを書いたら長くなりますので、今回は記載しませんでした。
個人的な感覚として、エラーは起きて欲しくないものですが、エラーが起きると知識が増えます。そのエラーを解消する為に色々調べたりしますので。
そういう意味ではエラーは嫌なものですが、逆にいい面もあるという感じでしょうか。

エンジニアとしてエラーは付きものであり、力が試される部分の一つだと思います。
避けがちなエラーと向き合って、成長の一つだと前向きに思う事も大切なのかもしれません。

私はとてもいい経験になりました。

[他参考記事]
https://qiita.com/ymt193/items/72348c07b2fb00addd8f
https://qiita.com/ymt193/items/868c7e000803d3290bc9
https://book.cakephp.org/3.0/ja/installation.html

今回記載した内容に不備等ありましたら、コメントにて教えて頂けると嬉しく思います。

おまけ

Twitterやってます！外部のエンジニアの方ともどんどん繋がりたいと考えていますので、是非フォローして頂ければと思います！@Tatsuo96
p.s.今年の2月までは溶接職人でした。ガッツ系エンジニアとしてやらせて頂いております。

Virtual box × vagrant × CakePHPの環境構築