Vagrant+ApacheでPHP開発環境構築

僕が思うPHP開発環境とは、

実現したいこと
  • 無料でできて、学習コストは少しかかるけど自分のPCがあればOK
  • vimとLinuxコマンドを覚えたいので、ターミナルは触りたい
  • ホスト(自分のPC)側のファイルをvimで触って変更したら、仮想マシン上のファイルも自動で変更させたい

記事を書く前に簡易的な開発環境を用意するところまですでにやってました。

手法としては、php5.4からの機能でビルトインウェブサーバーを使ってました(というか知らないうちにその手法を採用してた…)

参考 ビルトインウェブサーバーPHP

ですが、その後の開発をどうやって進めていくのかの情報が少ないので、自分向けの備忘録も合わせて別の方法を使って(というかこっちのほうが王道?)、今の環境を利用しながら新しく環境構築することにしました。

なので、ところどころ抜けているところもあると思いますし、これだけを見てゼロから構築しようとするのは正直おすすめしません。(笑)

また、Linux、ターミナル、vagrant、virtualbox、yum、phpなど触りではありますが幅広い知識とコマンドの知識が必要になりますしそれなりに時間がかかるのとエラーが出ると結構時間取られますので興味がある方だけどうぞ!(笑)

  • ビルトインウェブサーバーでブラウザに表示させるまではこちら
  • Vagrant+ApacheでPHP開発環境構築はこちら

注意
開発環境構築は、自己責任でお願いします

PHP開発環境構築前に復習

よく使う用語、コマンド

用語

ホスト SSHで接続する側。自分のPC(この記事では”MacOS”)
ゲスト 接続される側。仮想マシン(この記事では”CentOS6.8″)

Linuxコマンド

OSを操作するためのコマンド。

cd カレントディレクトリに移動
pwd 自分のいる場所のパスを調べる
mkdir 新しくフォルダを作る
sed 文字を置換、抽出、削除したり、テキスト処理のコマンド
exit ログアウト
find ファイルを探す
ln -s シンボリックリンクを張る
ls -l ファイルやディレクトリ一覧と属性情報なども表示

vagrantコマンド

vagrantは、仮想マシンに命令を出すために必要なコマンドラインツール。

vagrant -v vagrantのバージョン確認
vagrant init Vagrantfileの作成
vagrant up 仮想マシン起動
vagrant ssh 仮想マシンにログイン
vagrant status 仮想マシンの状態を確認
vagrant suspend 仮想マシンを一時停止

yumコマンド

yumはパッケージの統合管理システム。

yum -y すべての問い合わせに「y」と返答

gitコマンド

git clone 同じものを複製するコマンド

phpコマンド

php -v PHPのバージョン確認
php -s ウェブサーバーの起動

Apacheコマンド

httpd -v Apacheのバージョン確認

ビルトインウェブサーバーでブラウザに表示させるまで

ほぼ、ドットインストールの内容になりますがところどころ自分がわかりやすいように表現を変えたり、調べて補足しています。

必要ソフトのダウンロード

  • vagrant(コマンドラインツール)
  • virtualbox(仮想化ソフトウェア)

この記事では割愛するので、ドットインストールを参考にやってみましょう。

参考 #01 ローカル開発環境を整えようドットインストール

vagrantの動作確認

vagrantとvirtualboxのインストールが完了したらvagrantのコマンドが使えるようになっているか動作確認を行います。

vagrant -v

TIPS
バージョン確認のコマンドですが、ここでは動作確認用で使っています。

フォルダ作成

次に、複数の仮想マシンを作ることを想定したフォルダ構造を作ります。

ホストOSのフォルダ構造

.

└ー MyVagrant(プロジェクトを束ねるフォルダ)

      └ー MyCentOS(プロジェクト1→このフォルダがサーバーになる)

            └ー Vagrantfile(仮想マシンの構成情報。1つのプロジェクトに1つ必要)

TIPS
複数のプロジェクトを想定したフォルダ構造になっています。プロジェクトが増えたらMyVagrant直下に同じようにフォルダを作っていけばOKです。フォルダの名前は、自分がわかれば何でもいいです。

①ターミナルでホームディレクトリに移動します。

cd

②念の為、ホームディレクトリにいるのか自分のいる場所のパスを調べます。「/Users/ユーザー名」と表示されればOKです。

pwd

③ホームディレクトリに複数の仮想マシンのフォルダを束ねるフォルダを作ります。

mkdir MyVagrant

④作成したMyVagrantフォルダに移動します。

cd MyVagrant

⑤仮想マシンのフォルダを作成します。今回はMyCentOSというフォルダを作ります。

mkdir MyCentOS

⑥MyCentOSフォルダに移動します。

cd MyCentOS

仮想マシンの設定

①Vagrantfileの作成(仮想マシンを立ち上げる際の設定書を作ります。)

vagrant init bento/centos-6.8

TIPS

MyCentOSフォルダにvagrantfileが作成されました。

この際に、まだcentosはダウンロードされていませんが

vagrantfileを見ると指定したboxの情報が記載されました。

config.vm.box = "bento/centos-6.8"

②Vagrantfileを編集して仮想マシンのIPアドレスを192.168.33.10にする

sed -i '' -e 's/# config.vm.network "private_network", ip: "192.168.33.10"/config.vm.network "private_network", ip: "192.168.33.10"/' Vagrantfile

TIPS

処理内容は”Vagrantfile”の

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

config.vm.network "private_network", ip: "192.168.33.10"に書き換えるというもの。

“# “を取ったものに置換して設定を有効にしているだけなので直接Vagrantfileを編集してしまってもよいです。

③仮想マシンを起動する

vagrant up

TIPS

Vagrantfileがある場所で実行する必要があります。

初回vagrant up時、vagrantfileにboxの記述があるので、仮想マシンの起動と合わせて指定したbox(bento/centos-6.8)がインストールが行われます。

④仮想マシンにsshでログイン

vagrant ssh

TIPS

vagrant ssh を実行します. ssh接続で仮想マシンに入ることが出来ます。

⑤仮想マシンの状態を確認します

vagrant status

TIPS

起動していることを確認します。

〇仮想マシンが起動している状態

default running (virtualbox)

〇仮想マシンが停止している状態

default poweroff (virtualbox)

⑥OSを最新の状態に更新(時間がかかります)

sudo yum -y update

TIPS

仮想マシンの起動と基本ソフトウェアのOSがインストールでき、最新の状態になりました。

次は、必要なアプリケーションをダウンロードしていきます。

⑦スクリプトを入手するためのgitをインストール

sudo yum -y install git

⑧gitを使ってアプリケーション設定用のスクリプトをダウンロード

git clone https://github.com/dotinstallres/centos6.git

⑨centos6フォルダができるのでそちらに移動

cd centos6

⑩シェルスクリプトを実行(時間かかります)

./run.sh

参考 初心者向けシェルスクリプトの基本コマンドの紹介Qiita

・シェルスクリプトのことが載ってます。

TIPS

ここでは、結構重要なアプリケーションのインストール作業等を1度のコマンドで行っているので何を実行しているかはドットインストールのgthubを見るとよいです。

./run.sh で実施している内容につきましては、今後変更される可能性もあるため、

https://github.com/dotinstallres/centos6/blob/master/main.yml

を参考にしてみてください。

こちらのファイルの「- name:」の行に説明があります。例えば「- name: install apache」というのは Apache をインストールしていることを示しています。

参考:#07 仮想マシンの設定をしよう

⑪もろもろの設定を反映させるため、シェルを再起動

exec $SHELL -l

参考 シェルを再起動させる簡単な方法Qiita

ファイル転送ツールをインストール

仮想マシンの設定は終わりましたが、仮想マシン上のファイルを簡単に扱えるようにするファイル転送ツールを導入していきましょう。

  • Cyberduckのインストール
  • Cyberduckの設定

TIPS

Cyberduckは、データをアップする際にエラーが頻発したので現在はFileZillaを使用しています。また、できるだけターミナル操作で完結させる為FileZillaを使わず、Linuxコマンドで操作したりもします。

ファイル転送ツールから仮想マシンにアクセス

接続先の設定

新規接続

・SFTP

・192.168.33.10

・ID・パス:vagrant

接続先をブックマークに追加しておくと使いやすいです。

PHPの学習をしてみよう

①Cyberduck上で仮想マシンの中にphp学習用のフォルダ(php_lessons)を作成します。

②index.phpを作成します。

PHP
<?php echo "hello"; ?>

TIPS

ブラウザにhelloと表示させたいので、index.phpを作り上記のコードを入力します。

③ターミナルでphp学習用のフォルダに移動します。

cd php_lessons

④ビルトインウェブサーバーを起動します。

php -S 192.168.33.10:8000

TIPS

ビルトインウェブサーバーはphp(ver5.4以上)のインストールが必要ですがgitですでにインストール済みです。また、IPアドレスとポート番号を指定しています。

⑤ブラウザ上で、webサーバにアクセスします。

http://192.168.33.10:8000/

TIPS

helloと表示されていればOKです。

ログアウトの手順

①ターミナルでphpのwebサーバを閉じます。

Ctrl-C

②仮想マシンからログアウトします。

exit

TIPS

ターミナルの表示がvagrant@localhost ~ から変わっていればOKです。

③仮想マシンを停止させます。

vagrant suspend

④ターミナルを停止させます。

exit

TIPS

終了の手順はよく使うので覚えておきましょう。

参考記事

参考 ローカル開発環境の構築ドットインストール

・ドットインストールを参考に進めました。ドットインストールさん、ありがとうございます!

Vagrant+ApacheでPHP開発環境構築

ドットインストールでphpのビルトインウェブサーバーを使って、ブラウザ上にphpファイルを表示するところまでできました!

この状態で、PHPの開発環境を構築していきます。

構築の流れ
  1. ブラウザからのアクセス
  2. Mac上のファイルをリアルタイム同期
  3. シンボリックリンクの作成
  4. Macで編集したファイルをブラウザで確認

前提条件

ホスト(自分のPC)

  • MacOS
  • vagrantインストール済み
  • virtualboxインストール済み

ゲスト(仮想マシン)

  • centOS(6.8)インストール済み
  • PHP(5.6)インストール済み
  • Apache(2.2)インストール済み

アプリケーションのインストール確認

PHPのバージョン確認

php -v

Apacheのバージョン確認

httpd -v

TIPS

仮想マシン上に開発環境を構築しているので、ターミナルの表示がvagrant@localhost ~ になっていることを確認して行います。なっていなければ、vaglantfileがある場所でvagrant sshを行い仮想マシンにログインしましょう。

【推奨】どのディレクトリにいても、仮想マシンにログインできる設定を行っておきます。

TIPS
[name]の箇所は、ご自身の好きな名前をつけましょう。

次からは、ssh mytestといったコマンドでどこからでもログインができます。

ブラウザからのアクセス(htmlファイル)

①Apacheのドキュメントルートの確認

まずはhtmlファイルを作成して、ブラウザからアクセスするまでを行います。

作成したファイルは、Apacheのドキュメントルートに置きますのでディレクトリを確認します。

ドキュメントルートとは、Web上に公開されるディレクトリです。

②仮想マシンのルートディレクトリに移動

cd /

TIPS

一番上の「/」というディレクトリは、ルートディレクトリと呼びます。頂点のディレクトリになります。

普段、sshログイン時にいるディレクトリはホームディレクトリといいvagrantの場合「/home/vagrant」になります。自分がいるディレクトリを知りたいときはpwdしましょう。

③Apacheの設定ファイルを検索

ドキュメントルートは「httpd.conf」というファイルに記載されていますのでファイルがあるパスを検索します。

find . -name "httpd.conf" 2>/dev/null

④Apacheの設定ファイルをvimで開く

findコマンドで「./etc/httpd/conf/httpd.conf」にあることがわかったのでvimで開きます。

vim ./etc/httpd/conf/httpd.conf

292行目あたりに記載があり、ドキュメントルートが「/var/www/html」にあることがわかりました。

⑤Apacheのドキュメントルートに移動

cd /var/www/html

⑥index.htmlの作成

sudo vi index.html

index.html
<!DOCTYPE html><html>
<head>
<meta charset="utf-8"><title>test</title>
</head>
<body>
<h1>Hello, world</h1>
</body>
</html>

⑦「http://192.168.33.10/」にアクセス

TIPS

Hello, Wolrdと表示されたら成功です。

ブラウザからのアクセス(phpファイル)

①Apacheをphpに対応させる。

「httpd.conf」を開きます。

vim /etc/httpd/conf/httpd.conf

AddTypeで検索します。

PHPのファイルをPHPプログラムとして認識するように下記2行を追加。

AddType application/x-httpd-php .php
AddType application/x-httpd-php-source .phps

②test.phpの作成

index.htmlを作ったディレクトリで作成します。

sudo vim test.php

test.php
<html>
<body>
<?php
echo('Hello PHP');
?>
</body>
</html>

③「http://192.168.33.10/」にアクセス

TIPS

Hello PHPと表示されたら成功です。

Mac上のファイルをリアルタイム同期

これで、仮想マシン上のファイルにブラウザからアクセスして表示させることができるようになりました。

編集するたびに仮想マシンにログインして編集するのは大変なので、Mac上のファイルを更新したら仮想マシンのファイルも同期されるように設定を行います。

①Vagrantfileを編集します。

Vagrantfileがあるディレクトリに戻り、46行目のコメントアウトを外しましょう。

config.vm.synced_folder "../data", "/vagrant_data"

注意

VirtualBoxのデフォルトの仕様で、vagrantfileがあるディレクトリが、仮想マシン内の/vagrantと共有されるため上記を行わなくても良かったみたいです。もし、ディレクトリを任意で設定したい場合は活用しましょう。

↓理解を深めたい方は、下記が参考になります。

参考 初期状態のVagrant同期フォルダの動作の流れについてteratail

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

今は、下記のような状態になっており、ホスト側のディレクトリで作業すると、ゲストの/vagrantディレクトリに同期されますが、Apacheはルートディレクトリ(/var/www/html)を見に行くため、ブラウザにはいくら経っても変更が表示されません。

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

①ホストのVagrantfileがあるディレクトリでファイルを更新⇒ゲストの/vagrantディレクトリに同期

②ブラウザは、ゲストのApacheのルートディレクトリ(/var/www/html)を見に行く。

>> 結果:ブラウザに変更が表示されない。

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

①ホストのVagrantfileがあるディレクトリでファイルを更新⇒ゲストの/vagrantディレクトリに同期

②ブラウザは、ゲストのApacheのルートディレクトリ(/var/www/html)を見に行く⇒/var/www/htmlは、/vagrant/htmlを参照しにいく

>> 結果:ブラウザに変更が表示される。

①/vagrantにmytestディレクトリを作ります。

Mac上でVagrantfileがあるディレクトリでmytestディレクトリを作成します。

mkdir mytest

これでMac上のディレクトリは、ゲストの/vagrantディレクトリに同期されるので、/vagrant/mytestというディレクトリができます。

②/var/www/にあるhtmlディレクトリを削除します。

cd /var/www

sudo rm -r html

③/vagrant/mytestを参照する/var/www/html(シンボリックリンク)を作成します。

sudo ln -s /vagrant/mytest /var/www/html

④シンボリックリンクができたか確認する方法

ls -l /var/www/html

TIPS

このような表示が出ます。

lrwxrwxrwx 1 root root 15 1月 30 04:29 2019 /var/www/html -> /vagrant/mytest

「/var/www/html」は「/vagrant/mytest」を参照しているという表示ですので成功です。

参考記事

参考 vagrantを用いたPHPの環境構築Qiita

・Qiitaの記事を参考にさせていただきました。@tiwu_officialさん、ありがとうございます!

まとめ

この記事をまとめたことでvagrantやLinuxコマンドの理解がとても深まりました。

今までは、色々な記事を真似してやってみようとしましたがうまくいかず何度か断念しました。

そんな方は、まずドットインストール通りに試す⇒分からない箇所は調べる⇒Qiitaの参考記事を試す⇒分からない箇所は調べるという手順で進めると理解が深まりますし、PHP開発環境も手に入ると思いますので試してみてはいかがでしょうか。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です