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

カテゴリ一ブログ開発構築

2019-08-08 #PHP #Todoアプリ #LAMP

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

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

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

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

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

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

1 成果物制作までの流れ
2 前提条件
3 開発環境を整える
4 LAMP環境をVagrantで構築するのまとめ

成果物制作までの流れ

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

前提条件

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で仮想環境を作る

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

$ cd // ホームディレクトリに移動
$ mkdir Vagrant //Vagrantディレクトリ作成
$ cd Vagrant // Vagrantディレクトリに移動
$ mkdir MyCentOS //ここにVagrantで仮想環境をつくる

$ cd // ホームディレクトリに移動

$ mkdir Vagrant //Vagrantディレクトリ作成

$ cd Vagrant // Vagrantディレクトリに移動

$ mkdir MyCentOS //ここにVagrantで仮想環境をつくる

②Vagrant 設定ファイルを作る

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

$ vagrant init bento/centos-7 // centos7を指定しVagrantfileを作成
$ vim Vagrantfile

 # config.vm.network "private_network", ip: "192.168.33.10" //変更前
 config.vm.network "private_network", ip: "192.168.33.10" //変更後（コメントを戻す）

$ vagrant init bento/centos-7 // centos7を指定しVagrantfileを作成

$ vim Vagrantfile

# config.vm.network "private_network", ip: "192.168.33.10" //変更前

config.vm.network "private_network", ip: "192.168.33.10" //変更後（コメントを戻す）

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

$ vagrant up //時間かかります
$vagrant status //vagrantの状態を確認
Current machine states:
default                   not created (virtualbox) //作成されていない
The environment has not yet been created. Run `vagrant up` to
create the environment. //もう一度vagrant up する

$ vagrant up // vagrantを起動する
$ vagrant status //vagrantの状態を確認
Current machine states:

default                   running (virtualbox) // runningならOK、

$ vagrant ssh //sshでvagrantのサーバーにログインする
[vagrant@localhost ~]$ //ログイン完了

$ vagrant up //時間かかります

$vagrant status //vagrantの状態を確認

Current machine states:

default not created (virtualbox) //作成されていない

The environment has not yet been created. Run `vagrant up` to

create the environment. //もう一度vagrant up する

$ vagrant up // vagrantを起動する

$ vagrant status //vagrantの状態を確認

Current machine states:

default running (virtualbox) // runningならOK、

$ vagrant ssh //sshでvagrantのサーバーにログインする

[vagrant@localhost ~]$ //ログイン完了

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ディレクトリを作りましょう。

[vagrant@localhost ~]$ mkdir php_todo_list

1	[vagrant@localhost ~]$ mkdir 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しておきましょう。

[vagrant@localhost php_todo_list]$ sudo su
[root@localhost php_todo_list$ yum update

1 2	[vagrant@localhost php_todo_list]$ sudo su [root@localhost php_todo_list$ yum update

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

[root@localhost php_todo_list]$ yum -y install httpd　//Apacheをインストール
[root@localhost php_todo_list]$ httpd -v　//Apacheのバージョン確認
Server version: Apache/2.4.6 (CentOS)
Server built:   Jul 29 2019 17:18:49

[root@localhost php_todo_list]$ yum -y install httpd　//Apacheをインストール

[root@localhost php_todo_list]$ httpd -v　//Apacheのバージョン確認

Server version: Apache/2.4.6 (CentOS)

Server built: Jul 29 2019 17:18:49

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

[root@localhost php_todo_list]$ yum -y install http://dev.mysql.com/get/mysql-community-release-el7-5.noarch.rpm // yumリポジトリを追加
[root@localhost php_todo_list]$ yum -y install mysql-community-server // MySQL community Serverをインストール
[root@localhost php_todo_list]$ mysqld --version // バージョン確認
mysqld  Ver 5.6.45 for Linux on x86_64 (MySQL Community Server (GPL))

[root@localhost php_todo_list]$ yum -y install http://dev.mysql.com/get/mysql-community-release-el7-5.noarch.rpm // yumリポジトリを追加

[root@localhost php_todo_list]$ yum -y install mysql-community-server // MySQL community Serverをインストール

[root@localhost php_todo_list]$ mysqld --version // バージョン確認

mysqld Ver 5.6.45 for Linux on x86_64 (MySQL Community Server (GPL))

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

root@localhost php_todo_list]$ yum remove httpd // Apacheをアンインストール
Is this ok [y/N]: y // yを押す
Removed:
  httpd.x86_64 0:2.4.6-89.el7.centos.1 //削除完了

root@localhost php_todo_list]$ yum remove httpd // Apacheをアンインストール

Is this ok [y/N]: y // yを押す

Removed:

httpd.x86_64 0:2.4.6-89.el7.centos.1 //削除完了

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

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

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

[root@localhost vagrant]$ yum -y install epel-release //EPELリポジトリを追加
[root@localhost vagrant]$ yum -y install http://rpms.famillecollet.com/enterprise/remi-release-7.rpm　//Remiのリポジトリ情報を追加
[root@localhost vagrant]$ ls -l /etc/yum.repos.d/ //php72.repoが入っているか確認
[root@localhost vagrant]$ yum search httpd php72 //httpdとphp72をサーチ
[root@localhost vagrant]$ yum -y install php72 php72-php　// Apacheとphp72をインストール
[root@localhost vagrant]$ systemctl enable httpd.service　// 再起動時にApacheを自動で起動するよう設定
[root@localhost vagrant]$ systemctl start httpd.service //Apacheを起動

[root@localhost vagrant]$ yum -y install epel-release //EPELリポジトリを追加

[root@localhost vagrant]$ yum -y install http://rpms.famillecollet.com/enterprise/remi-release-7.rpm　//Remiのリポジトリ情報を追加

[root@localhost vagrant]$ ls -l /etc/yum.repos.d/ //php72.repoが入っているか確認

[root@localhost vagrant]$ yum search httpd php72 //httpdとphp72をサーチ

[root@localhost vagrant]$ yum -y install php72 php72-php　// Apacheとphp72をインストール

[root@localhost vagrant]$ systemctl enable httpd.service　// 再起動時にApacheを自動で起動するよう設定

[root@localhost vagrant]$ systemctl start httpd.service //Apacheを起動

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

[root@localhost vagrant]$ vi /var/www/html/index.php　// vimでドキュメントルートにphpファイルの作成
<?php phpinfo(); // php7.2情報を表示、「:wq」で保存
[root@localhost vagrant]# ip a // ipアドレス情報を表示
3: eth1: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc pfifo_fast state UP group default qlen 1000
    link/ether 08:00:27:a1:df:93 brd ff:ff:ff:ff:ff:ff
    inet 192.168.33.10/24 brd 192.168.30.255 scope global noprefixroute eth1   // 192.168.33.10が割り当てられているIPアドレス
       valid_lft forever preferred_lft forever
    inet6 fe80::a00:27ff:fea1:df93/64 scope link
       valid_lft forever preferred_lft forever
[root@localhost vagrant]$ http://192.168.33.10/index.php ←を開く

[root@localhost vagrant]$ vi /var/www/html/index.php　// vimでドキュメントルートにphpファイルの作成

<?php phpinfo(); // php7.2情報を表示、「:wq」で保存

[root@localhost vagrant]# ip a // ipアドレス情報を表示

3: eth1: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc pfifo_fast state UP group default qlen 1000

link/ether 08:00:27:a1:df:93 brd ff:ff:ff:ff:ff:ff

inet 192.168.33.10/24 brd 192.168.30.255 scope global noprefixroute eth1 // 192.168.33.10が割り当てられているIPアドレス

valid_lft forever preferred_lft forever

inet6 fe80::a00:27ff:fea1:df93/64 scope link

valid_lft forever preferred_lft forever

[root@localhost vagrant]$ http://192.168.33.10/index.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を見に行かせるようにしましょう。

[root@localhost html]$ cd /var/www
[root@localhost html]$ rm -rf html   //htmlディレクトリを削除
[root@localhost vagrant]$ ln -s /home/vagrant /var/www/html //Apacheが/var/www/htmlを見に行った時に、/home/vagrantディレクトリを見に行くようにする

[root@localhost html]$ cd /var/www

[root@localhost html]$ rm -rf html //htmlディレクトリを削除

[root@localhost vagrant]$ ln -s /home/vagrant /var/www/html //Apacheが/var/www/htmlを見に行った時に、/home/vagrantディレクトリを見に行くようにする

これでOK。

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

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

<html>

<body>

<?php

echo('test php');

</body>

</html>

vagrantで見てみると・・・

[vagrant@localhost /]$ cat /home/vagrant/index.php
<html>
<body>
  <?php
    echo('php test');
  ?>
</body>
</html>

[vagrant@localhost /]$ cat /home/vagrant/index.php

<html>

<body>

<?php

echo('php test');

</body>

</html>

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

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

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

[vagrant@localhost /]$ cd home
[vagrant@localhost home]$ ls -la
total 0
drwxr-xr-x.  3 root    root     21  7月 23 03:50 .
dr-xr-xr-x. 18 root    root    239  8月  5 03:16 ..
drwx------.  4 vagrant vagrant 153  8月  6 02:25 vagrant //権限が所有者以外にはない

[vagrant@localhost /]$ cd home

[vagrant@localhost home]$ ls -la

total 0

drwxr-xr-x. 3 root root 21 7月 23 03:50 .

dr-xr-xr-x. 18 root root 239 8月 5 03:16 ..

drwx------. 4 vagrant vagrant 153 8月 6 02:25 vagrant //権限が所有者以外にはない

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

[vagrant@localhost home]$ chmod 755 vagrant //vagrantディレクトリのパーミッションを755に変更
[vagrant@localhost home]$ ls -la
total 0
drwxr-xr-x.  3 root    root     21  7月 23 03:50 .
dr-xr-xr-x. 18 root    root    239  8月  5 03:16 ..
drwxr-xr-x.  4 vagrant vagrant 153  8月  6 02:25 vagrant //OK

[vagrant@localhost home]$ chmod 755 vagrant //vagrantディレクトリのパーミッションを755に変更

[vagrant@localhost home]$ ls -la

total 0

drwxr-xr-x. 3 root root 21 7月 23 03:50 .

dr-xr-xr-x. 18 root root 239 8月 5 03:16 ..

drwxr-xr-x. 4 vagrant vagrant 153 8月 6 02:25 vagrant //OK

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

見れました！

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

phpのパスを通す

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

[vagrant@localhost ~]$ cat /opt/remi/php72/enable //　パスを確認する
export PATH=/opt/remi/php72/root/usr/bin:/opt/remi/php72/root/usr/sbin${PATH:+:${PATH}}
export LD_LIBRARY_PATH=/opt/remi/php72/root/usr/lib64${LD_LIBRARY_PATH:+:${LD_LIBRARY_PATH}}
export MANPATH=/opt/remi/php72/root/usr/share/man:${MANPATH}
[vagrant@localhost ~]$ export PATH=/opt/remi/php72/root/usr/bin:/opt/remi/php72/root/usr/sbin${PATH:+:${PATH}}      // パスを通す
[vagrant@localhost ~]$ export LD_LIBRARY_PATH=/opt/remi/php72/root/usr/lib64${LD_LIBRARY_PATH:+:${LD_LIBRARY_PATH}} // パスを通す
[vagrant@localhost ~]$ export MANPATH=/opt/remi/php72/root/usr/share/man:${MANPATH}                                 // パスを通す
[vagrant@localhost ~]$ php -vPHP 7.2.21 (cli) (built: Jul 30 2019 14:10:18) ( NTS ) //phpのバージョン確認
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.2.0, Copyright (c) 1998-2018 Zend Technologies

[vagrant@localhost ~]$ cat /opt/remi/php72/enable //　パスを確認する

export PATH=/opt/remi/php72/root/usr/bin:/opt/remi/php72/root/usr/sbin${PATH:+:${PATH}}

export LD_LIBRARY_PATH=/opt/remi/php72/root/usr/lib64${LD_LIBRARY_PATH:+:${LD_LIBRARY_PATH}}

export MANPATH=/opt/remi/php72/root/usr/share/man:${MANPATH}

[vagrant@localhost ~]$ export PATH=/opt/remi/php72/root/usr/bin:/opt/remi/php72/root/usr/sbin${PATH:+:${PATH}} // パスを通す

[vagrant@localhost ~]$ export LD_LIBRARY_PATH=/opt/remi/php72/root/usr/lib64${LD_LIBRARY_PATH:+:${LD_LIBRARY_PATH}} // パスを通す

[vagrant@localhost ~]$ export MANPATH=/opt/remi/php72/root/usr/share/man:${MANPATH} // パスを通す

[vagrant@localhost ~]$ php -vPHP 7.2.21 (cli) (built: Jul 30 2019 14:10:18) ( NTS ) //phpのバージョン確認

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

[vagrant@localhost ~]$ vi /etc/profile　//Linuxの環境設定ファイルを編集する
// 最下部に下記三行を追加する
export PATH=/opt/remi/php72/root/usr/bin:/opt/remi/php72/root/usr/sbin${PATH:+:${PATH}}
export LD_LIBRARY_PATH=/opt/remi/php72/root/usr/lib64${LD_LIBRARY_PATH:+:${LD_LIBRARY_PATH}}
export MANPATH=/opt/remi/php72/root/usr/share/man:${MANPATH}
:wq //保存する

[vagrant@localhost ~]$ vi /etc/profile　//Linuxの環境設定ファイルを編集する

// 最下部に下記三行を追加する

export PATH=/opt/remi/php72/root/usr/bin:/opt/remi/php72/root/usr/sbin${PATH:+:${PATH}}

export LD_LIBRARY_PATH=/opt/remi/php72/root/usr/lib64${LD_LIBRARY_PATH:+:${LD_LIBRARY_PATH}}

export MANPATH=/opt/remi/php72/root/usr/share/man:${MANPATH}

:wq //保存する

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

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

[vagrant@localhost ~]$ logout
〇〇Mac:test 〇〇$ vagrant reload
〇〇Mac:test 〇〇$ vagrant ssh
[vagrant@localhost ~]$ php -v
PHP 7.2.21 (cli) (built: Jul 30 2019 14:10:18) ( NTS )
Copyright (c) 1997-2018 The PHP Group
Zend Engine v3.2.0, Copyright (c) 1998-2018 Zend Technologies

[vagrant@localhost ~]$ logout

〇〇Mac:test 〇〇$ vagrant reload

〇〇Mac:test 〇〇$ vagrant ssh

[vagrant@localhost ~]$ php -v

PHP 7.2.21 (cli) (built: Jul 30 2019 14:10:18) ( NTS )

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

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

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

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

この記事を書いた人
最近の記事

サイト管理者

株式会社ギークフィードのサイト編集担当者です。弊社へのお問い合わせ・質問は、お問い合わせページからお願いいたします。

サイト管理者 (全て見る)

【React】フロントエンドのテストコードを書いてみよう【Vitest】 - 2024-04-30
Simple AWS DeepRacer Reward Function Using Waypoints - 2023-12-19
Restrict S3 Bucket Access from Specified Resource - 2023-12-16
Expand Amazon EBS Volume on EC2 Instance without Downtime - 2023-09-28
Monitor OpenSearch Status On EC2 with CloudWatch Alarm - 2023-07-02

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

2019-08-08 #PHP #Todoアプリ #LAMP

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

成果物制作までの流れ

前提条件

開発環境を整える

LAMPって何？

VirtualBoxとVagrantをインストール

Vagrantで仮想環境を作る

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

Apache + MySQL + PHPを入れる

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

phpのパスを通す

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

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

エンジニア募集

Asterisk13CLI_チートシート

CentOS7_チートシート

カテゴリー

月別で見る

投稿者から見る

サイト内検索

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

成果物制作までの流れ

前提条件

開発環境を整える

LAMPって何？

VirtualBoxとVagrantをインストール

Vagrantで仮想環境を作る

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

Apache + MySQL + PHPを入れる

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

phpのパスを通す

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

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

関連投稿

中級figma教室

Twilio Flex v2.x.x系でLINE連携を実装する方法

[会話型AI活用]Amazon LexとConnectでシーン別にお花をレコメンドする仕組みを作ってみた

[Amazon Connect]東京リージョンで電話番号取得に時間がかかる理由を調べてみた – Amazon Connect アドベントカレンダー 2024

おすすめガジェット紹介！2024年12月編

Synology NASとAmazon CLIの連携を試してみました！

エンジニア募集

Asterisk13CLI_チートシート

CentOS7_チートシート

カテゴリー

月別で見る

投稿者から見る

サイト内検索