TodoアプリをPHPで作る為のLAMP環境をVagrantで構築

Todoアプリ開発と言えば、Webアプリケーション開発の基礎を学ぶのにもってこいの題材ですね。

そんなTodoアプリをローカル開発環境で作り、実際に本番環境で扱えるようにするにはどうしたらいいか、

イマイチイメージがつかない方も多いと思います。

 

そこで、ギークフィードエンジニアの伊藤が

ローカルでTodoアプリを作って、本番環境にデプロイし実際にWebで扱えるようにするまでの流れを解説していきます。

 

なお、今回は環境構築編ということで、仮想環境にLAMPを構築する所まで説明しています。

 

成果物制作までの流れ

  1. 開発環境の構築 ←今回はここ
  2. 仕様を考える
  3. コーディングする
  4. 動作確認
  5. 本番環境にデプロイ

 

前提条件

PC:MacBook Air 2017

 

開発環境を整える

今回は、仮想化ソフトウェアの「VirtualBox」と、それを動かす「Vagrant」を用いて仮想環境を作り、その中に「CentOS」をインストールし、LAMP環境を構築します。

 

LAMPって何?

Webアプリケーション制作に定番の開発環境のことです。以下4つの頭文字を取った略称です。

 

  • Linux
  • Apache
  • MySQL
  • PHP

 

まずは、VirtualBoxとVagrantで仮想環境を作りましょう。

仮想環境上に開発環境を構築することで、ホストOSと開発環境を分離し、互いに影響を受けないようにすることができます。

 

VirtualBoxとVagrantをインストール

①VirtualBoxをこちらからダウンロード

 

  • Mac→OS X hosts

 

 

②Vagrantをこちらからダウンロード

 

  • Mac→macOS

 

ダウンロード後、デフォルト設定でインストールします。

 

Vagrantで仮想環境を作る

①仮想環境を作るディレクトリを作成します。

 

②Vagrant 設定ファイルを作る

config.vm〜のコメントを戻すことで、仮想環境にIPアドレスを割り当てます。(10が他の仮想マシンで使われていれば、11に変更します)

 

③仮想マシンを立ち上げる

 

Vagrantを停止したいときは、「vagrant halt」コマンドで停止します。

ここまでで、VirtualBoxとVagrantで仮想環境を作り、その中にCentOS7をインストール出来ました。

 

CyberDuckでローカルから仮想環境にアクセスする

CyberDuckというファイル転送ツールを使い、ローカルから仮想環境に繋いで、ファイルを移動できるようにしましょう。

仮想環境に繋げるには、「新規接続」から以下のように設定します。

 

プロトコル SFTP
ポート 22
サーバー Vagrantfileで設定した仮想マシンのIPアドレス

(私の環境では 192.168.33.10)

ユーザー名 vagrant
パスワード vagrant

 

vagrantのユーザー名とパスワード はデフォルトで「vagrant」なので覚えておきましょう。

 

繋いだ先は、「vagrant ssh」した時と同じ「/home/vagrant」を見ていると思うので、

CLIからディレクトリを作って、Cyber Duckでも見れるか確認しましょう。

例えば、php_todo_listディレクトリを作りましょう。

 

CyberDuckを更新します。

 

 

きちんと表示されましたね。

CyberDuckはローカルから直で接続先のファイルを編集出来るので便利ですね。

 

Apache + MySQL + PHPを入れる

続いて、Webサーバー,DB,PHPを導入します。

今回は以下のバージョンでLAMP環境を構築します。

 

LAMP バージョン
Linux centos7
Apache 2.4.6
MySQL 5.6.45
PHP 7.2

 

 

まずはsudo権限にし、yum updateしておきましょう。

 

Apacheをインストールします。

 

MySQLをインストール。今回は5.6.45がインストールされました。

 

今気づいたけど、PHPをインストールするとApacheも一緒に入るので、一度Apacheをアンインストールします。

 

 

PHP7.2をインストールします。

 

CentOS7の標準リポジトリではPHP7.2は提供されていないので、

PHP最新版をインストールできるRemiプロジェクトのリポジトリを追加後に、PHP7.2をインストールします。(Apacheも一緒に入ります)

 

ではPHP7.2が正しくインストールされてるか、ドキュメントルートにindex.phpを作って、php情報を表示してみましょう。

 

Vagrantfileで指定したIPアドレスを開きます。今回はhttp://192.168.33.10/index.phpにアクセスします。

 

 

phpの情報が正しく表示されていれば環境構築完了です!

 

シンボリックリンクを作成する

Apacheでは通常、ドキュメントルートが/var/www/html配下に指定されていますが、

vagrant接続時には、毎回/home/vagrant の中に接続します。

 

いちいち/var〜に移動するのは面倒なので、シンボリックリンクを作成しましょう。

その為に、/var/www/htmlのhtmlを削除して、Apacheには/home/vagrantを見に行かせるようにしましょう。

 

これでOK。

 

 

試しに、MacからCyberDuckで/home/vagrant配下にindex.phpを作成して、エディタで以下のように記述して保存しましょう。

 

vagrantで見てみると・・・

 

しっかり更新されてますね!

続いて、http://192.168.33.10/index.php にアクセス

 

 

おっと、アクセス権限で怒られました。

 

パーミッションを755に変更します。

 

もう一度http://192.168.33.10/index.phpにアクセス

 

見れました!

これで、/home/vagrant を事実上のドキュメントルートに設定出来ました。

 

phpのパスを通す

最後にphp commandを使えるように、パスを通しましょう。

 

さらに、Vagrantを再起動してもパス設定がクリアされないように、Linuxの環境変数設定ファイルを修正します。

 

あとは、一度vagrantから落ちてvagrant reload(再起動)しましょう。

再度php -vでphpのバージョンが確認できたらOKです。

 

これでphpのパスを通せました!

 

 

LAMP環境をVagrantで構築するのまとめ

 

  • VirtualBoxとVagrantで仮想環境を作り、その上にCentOS7をインストールして、LAMP環境を構築した
  • CyberDuckでホストOSからファイル転送を簡単に出来るようにした
  • シンボリックリンクを作成し、homeディレクトリをドキュメントルートに設定する
  • phpのパスを通し、「php」コマンドを有効化した

 

 

次回は、実際にコードを書いてTodoアプリの機能を実装していきます。

この記事が気に入ったら
いいね ! しよう

Twitter で
The following two tabs change content below.
伊藤 佑
伊藤 佑
エンジニア
21歳で専業ブロガーになり、最盛期に月間150万pvのアクセスを獲得。 GFでエンジニアしながら、サイトの構成も担当してます。PHP/Laravel/JS/VB.NET/SEO/Blog

【採用情報】一緒に働く仲間を募集しています

採用情報
ページトップへ