初学者向けVirtualBoxでWEB開発の学習環境構築!
WEBでシステム開発をしたいけど、何から始めて良いか分からない。開発未経験者でそのように感じられている人がいるのではないでしょうか。WEBや書籍で学習するのも良いですが、まずは開発できる環境を作って、実際にプログラムを動かしてみるのが理解を深める近道になると思います。そこで今回はローカル端末に開発環境を構築する方法を説明していきたいと思います。
構築する開発環境は図1のような仮想環境の構成とし、赤枠の部分が今回作成するところです。

構築手順
1.仮想環境構築
(1)VirtualBoxを入手
(2)VirtualBoxをインストール
2.仮想マシン構築
(1)CentOSを入手
(2)仮想マシンを作成
(3)CentOSをインストール
(4)ネットワークを設定
(5)ミドルウェアをインストール
①WEBサーバ
②アプリケーションサーバ
③DBサーバ
1.仮想環境構築
仮想化ソフトウェア(VirtualBox)を利用して、物理マシンに仮想環境を作成します。

(1)VirtualBoxを入手
下記のサイトから、最新版のVirtualBoxをダウンロードします。
(2022年1月現在、最新リリースバージョンは6.1.14)
(2)VirtualBoxをインストール
ウィザードの指示に従って、インストールを進めます。
インストールが完了したら、VirtualBoxの管理画面(Oracle VM VirtualBox マネージャー)が表示されます。

2.仮想マシン構築
VirtualBoxの管理画面から仮想マシンを作成して、OSとミドルウェアをインストールします。
ゲストOSには、CentOS7系の最新バージョンをインストールします。
(1)CentOSを入手
CentOSのサイトから、バージョン7系最新版のisoイメージファイルをダウンロードします。
2022年1月現在最新のイメージファイル:CentOS-7-x86_64-DVD-2009.iso
(2)仮想マシンを作成
1.で作成した仮想環境に、仮想マシンを作成します。

VirtualBoxの管理画面の「新規」ボタンを押下し、ウィザードの指示に従って進めます。
学習の目的によりますが、設定はデフォルトのままで大丈夫です。ある程度理解できるようになれば、用途に合わせてメモリとストレージのサイズを変更するのが良いかと思います
※仮想マシンの名称は、なんでも構いませんが、今回はOSとPG言語の種類とバージョンが分かるようにしています
CentOS7PHP74
※今回私が作成した環境は、メインメモリを2048MB、ハードディスクを16GBとしています。
作成が完了したら、下記の画面が表示されます。

(3)CentOSをインストール
(2)で作成した仮想マシンにゲストOSとして、(1)でダウンロードしたCentOS7をインストールします。
今回はリモート環境ではなく、ローカル環境で個人用に作成する想定なので、一般的にOSの初期設定時に行うSSHの設定やユーザの管理設定は割愛します。必要に応じてご自身で設定してみてください。

CentOS7のインストールは、仮想マシンを選択して起動します。起動ハードディスク選択画面が表示されるので、(1)でダウンロードしたCentOS7のisoイメージファイルを選択して、インストールを進めます。
ウィザードの指示に従い、最後にrootのパスワードを設定するので、内容を控えておいてください。
※言語は日本語を選択し、あとはデフォルトのままで大丈夫です
※ユーザの作成はしなくても大丈夫です
CentOS7のインストールが完了すると、下記VirtualBoxのコンソール画面が表示されます。

(4)ネットワークを設定
ネットワークの設定は、ネットワークマネージャー(TUI※GUIで設定)を使用して行います。
VirtualBoxでは、一般的にブリッジを利用してネットワーク設定することが多いようですが、今回はNATとホストオンリーアダプターを利用して行います。
NATで外部への接続を可能にし、ホストオンリーアダプターで内部(ホスト-ゲスト間、ゲスト-ゲスト間)の接続を可能にします。
※初学者はここで苦戦する人が多いです
①VirtualBoxの管理画面のネットワーク設定で、ホストオンリーアダプターを追加

②nmtuiでネットワーク設定
VirtualBoxのコンソール画面で、nmtuiコマンドを実行します。
表示されが画面で、「Edit a connection」を選択すると、インターフェイスが2つ表示されます。( enp0s8 、 enp0s3 )
<「enp0s8」を選択>
※私の環境では”enp0s8″がなぜか文字化けていて”■■■■ 1″と表示されていました
IPv4 CONFIGURATION を<Automatic→Manual>に変更し、<show>を押下し、 表示された詳細設定画面の「Addresses」で、仮想マシンのIPアドレスを設定します。
※VirtualBoxの管理画面のツール-ネットワークで、今回自動生成されたVirtualBox Host-Only NetworkのIPv4アドレスを確認し、それが仮想環境のネットワークになります。
「192.168.56.1」で生成されていたので、192.168.56.XXXのネットワークということです。したがって今回、仮想マシンのIPアドレスは、「192.168.56.100」としました
IPv6 CONFIGURATION を<Automatic→Ignore>に変更
Automatically connect」のチェックボックスをONに変更

<「enp0s3」を選択>
IPv6 CONFIGURATION を<Automatic→Ignore>に変更
「Automatically connect」のチェックボックスをONに変更

③ネットワーク再起動
[root@localhost ~]# systemctl restart NetworkManager [root@localhost ~]# systemctl restart network
④接続確認
<仮想マシン→外部ネットワーク>
[root@localhost ~]# ping google.com PING google.com (172.217.161.46) 56(84) bytes of data. 64 bytes from nrt12s23-in-f14.1e100.net (172.217.161.46): icmp_seq=1 ttl=112 time=11.3 ms 64 bytes from nrt12s23-in-f14.1e100.net (172.217.161.46): icmp_seq=2 ttl=112 time=11.2 ms 64 bytes from nrt12s23-in-f14.1e100.net (172.217.161.46): icmp_seq=3 ttl=112 time=10.7 ms ^C --- google.com ping statistics --- 3 packets transmitted, 3 received, 0% packet loss, time 2002ms rtt min/avg/max/mdev = 10.731/11.092/11.339/0.260 ms
<ホストマシン→内部ネットワーク(仮想マシン)>
Windows PowerShell Copyright (C) Microsoft Corporation. All rights reserved. 新しいクロスプラットフォームの PowerShell をお試しください https://aka.ms/pscore6 PS C:\Users\PC001> ping 192.168.56.100 192.168.56.100 に ping を送信しています 32 バイトのデータ: 192.168.56.100 からの応答: バイト数 =32 時間 <1ms TTL=64 192.168.56.100 からの応答: バイト数 =32 時間 <1ms TTL=64 192.168.56.100 からの応答: バイト数 =32 時間 <1ms TTL=64 192.168.56.100 の ping 統計: パケット数: 送信 = 3、受信 = 3、損失 = 0 (0% の損失)、 ラウンド トリップの概算時間 (ミリ秒): 最小 = 0ms、最大 = 0ms、平均 = 0ms Ctrl+C
(5)ミドルウェアをインストール
(4)でネットワーク設定が完了しているので、ここからはターミナルエミュレータ(TeraTerm、Poderosaなど)を利用して、ホストマシンから仮想マシンにリモート接続します。
ミドルウェアは、一般的にWEB開発で利用されているWEBサーバ、アプリケーションサーバ、DBサーバを下記の構成でインストールします。
- WEBサーバ:Nginx
- アプリケーションサーバ:PHP7.4系最新
- DBサーバ:Postgresql13系最新

①WEBサーバ(Nginx)
・Nginxのリポジトリパッケージの有無を確認
[root@localhost ~]# ls -l /etc/yum.repos.d/ 合計 40 -rw-r--r-- 1 root root 1664 11月 24 2020 CentOS-Base.repo -rw-r--r-- 1 root root 1309 11月 24 2020 CentOS-CR.repo -rw-r--r-- 1 root root 649 11月 24 2020 CentOS-Debuginfo.repo -rw-r--r-- 1 root root 630 11月 24 2020 CentOS-Media.repo -rw-r--r-- 1 root root 1331 11月 24 2020 CentOS-Sources.repo -rw-r--r-- 1 root root 8515 11月 24 2020 CentOS-Vault.repo -rw-r--r-- 1 root root 314 11月 24 2020 CentOS-fasttrack.repo -rw-r--r-- 1 root root 616 11月 24 2020 CentOS-x86_64-kernel.repo
・Nginxのリポジトリパッケージを追加
[root@localhost ~]# vi /etc/yum.repos.d/nginx.repo
・nginx.repoを編集
[nginx] name=nginx repo baseurl=http://nginx.org/packages/centos/7/$basearch/ gpgcheck=0 enabled=1
・Nginxのリポジトリパッケージが追加されたことを確認
[root@localhost ~]# ls -l /etc/yum.repos.d/ 合計 44 -rw-r--r-- 1 root root 1664 11月 24 2020 CentOS-Base.repo -rw-r--r-- 1 root root 1309 11月 24 2020 CentOS-CR.repo -rw-r--r-- 1 root root 649 11月 24 2020 CentOS-Debuginfo.repo -rw-r--r-- 1 root root 630 11月 24 2020 CentOS-Media.repo -rw-r--r-- 1 root root 1331 11月 24 2020 CentOS-Sources.repo -rw-r--r-- 1 root root 8515 11月 24 2020 CentOS-Vault.repo -rw-r--r-- 1 root root 314 11月 24 2020 CentOS-fasttrack.repo -rw-r--r-- 1 root root 616 11月 24 2020 CentOS-x86_64-kernel.repo -rw-r--r-- 1 root root 100 1月 10 21:30 nginx.repo <------------------ 追加されたリポジトリ
・Nginxをインストール。エラーがなく「完了しました!」が表示されれば、OK。
[root@localhost ~]# yum install nginx ・ ・ インストール: nginx.x86_64 1:1.20.2-1.el7.ngx 完了しました!
・サービスを起動し、自動起動の設定を行う
[root@localhost ~]# systemctl start nginx [root@localhost ~]# systemctl enable nginx Created symlink from /etc/systemd/system/multi-user.target.wants/nginx.service to /usr/lib/systemd/system/nginx.service.
・Firewallの設定
ポートの空き状況を確認
[root@localhost ~]# firewall-cmd --list-all public (active) target: default icmp-block-inversion: no interfaces: enp0s3 enp0s8 sources: services: dhcpv6-client ssh ports: protocols: masquerade: no forward-ports: source-ports: icmp-blocks: rich rules:
httpとhttps接続を許可
[root@localhost ~]# firewall-cmd --add-service=http --zone=public --permanent success [root@localhost ~]# firewall-cmd --add-service=https --zone=public --permanent success [root@localhost ~]# firewall-cmd --reload success [root@localhost ~]# firewall-cmd --list-all public (active) target: default icmp-block-inversion: no interfaces: enp0s3 enp0s8 sources: services: dhcpv6-client http https ssh <------------------ 追加されたサービス ports: protocols: masquerade: no forward-ports: source-ports: icmp-blocks: rich rules:
・動作確認
ブラウザで、下記のURLにアクセスし、「Welcome to nginx!」の画面が表示したら設定完了!

②アプリケーションサーバ(PHP7.4)
・現在のリポジトリでインストールされるバージョンを確認
5.4系がインストールされることを確認。今回7.4系が必要なのでRemiリポジトリの取込が必要
[root@localhost ~]# yum list | grep php
・Remiリポジトリをインストール
[root@localhost ~]# yum -y install http://rpms.remirepo.net/enterprise/remi-release-7.rpm ・ ・ インストール: remi-release.noarch 0:7.9-2.el7.remi 依存性関連をインストールしました: epel-release.noarch 0:7-11 完了しました!
・PHP7.4をインストール
[root@localhost ~]# yum -y install --enablerepo=remi,remi-php74 php php-mbstring php-xml php-xmlrpc php-pdo php-pecl-mcrypt php-gd php-intl php-mysqlnd php-pecl-mysql php-pgsql
・インストールされたバージョンを確認
⇒7.4.27
[root@localhost ~]# php -v PHP 7.4.27 (cli) (built: Dec 14 2021 17:17:06) ( NTS ) Copyright (c) The PHP Group Zend Engine v3.4.0, Copyright (c) Zend Technologies
・追加された拡張モジュールを確認
[root@localhost ~]# php -m [PHP Modules] bz2 ・ ・ zlib [Zend Modules]
・phpの初期設定
最低限のタイムゾーンと文字コードの設定を行います。
[root@localhost ~]# cp -p /etc/php.ini /etc/php.ini.org [root@localhost ~]# vi /etc/php.ini
php.iniを編集
date.timezone = "Asia/Tokyo" mbstring.language = Japanese
・php-fpmのインストール
[root@localhost ~]# yum install --enablerepo=remi,remi-php74 php-fpm ・ ・ インストール: php-fpm.x86_64 0:7.4.27-1.el7.remi 完了しました!
・サービスを起動し、自動起動の設定を行う
[root@localhost ~]# systemctl start php-fpm [root@localhost ~]# systemctl enable php-fpm Created symlink from /etc/systemd/system/multi-user.target.wants/php-fpm.service to /usr/lib/systemd/system/php-fpm.service.
・php-fpmの初期設定
[root@localhost ~]# cp -p /etc/php-fpm.d/www.conf /etc/php-fpm.d/www.conf.org [root@localhost ~]# vi /etc/php-fpm.d/www.conf
www.confを編集
user = nginx group = nginx
・php-fpmを再起動
[root@localhost ~][root@localhost ~]# systemctl restart php-fpm
・Virtual Hostの設定
[root@localhost ~]# cp -p /etc/nginx/conf.d/default.conf /etc/nginx/conf.d/default.conf.org [root@localhost ~]# vi /etc/nginx/conf.d/default.conf
default.confを編集
location ~ \.php$ { root /var/www/html/fabrica; fastcgi_pass 127.0.0.1:9000; fastcgi_index index.php; fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name; include fastcgi_params; }
・php-fpmを再起動
[root@localhost ~]# systemctl restart php-fpm [root@localhost ~]# systemctl restart nginx
・動作確認
ドキュメントルートのディレクトリを作成し、index.phpを設置します。
[root@localhost ~]# mkdir /var/www/html/fabrica [root@localhost ~]# ls -l /var/www/html/ 合計 0 drwxr-xr-x 2 root root 6 1月 11 01:31 fabrica
index.php作成
[root@localhost ~]# vi /var/www/html/fabrica/index.php
index.phpを編集
<?php phpinfo(); ?>
ブラウザで、下記のURLにアクセスし、PHPINFOの画面が表示したら設定完了!

③DBサーバ(Postgresql13)
・Postgresqlのリポジトリをインストール
[root@localhost ~]# yum -y install https://download.postgresql.org/pub/repos/yum/reporpms/EL-7-x86_64/pgdg-redhat-repo-latest.noarch.rpm ・ ・ インストール: pgdg-redhat-repo.noarch 0:42.0-23 完了しました!
・Postgresql13をインストール
[root@localhost ~]# yum -y install postgresql13-server ・ ・ インストール: postgresql13-server.x86_64 0:13.5-1PGDG.rhel7 依存性関連をインストールしました: libicu.x86_64 0:50.2-4.el7_7 postgresql13.x86_64 0:13.5-1PGDG.rhel7 postgresql13-libs.x86_64 0:13.5-1PGDG.rhel7 完了しました!
・インストールされたバージョンを確認
⇒13.5
[root@localhost ~]# psql -V psql (PostgreSQL) 13.5
・サービスを起動し、自動起動の設定を行う
[root@localhost ~]# systemctl start postgresql-13 [root@localhost ~]# systemctl enable postgresql-13 Created symlink from /etc/systemd/system/multi-user.target.wants/postgresql-13.service to /usr/lib/systemd/system/postgresql-13.service.
・データベース初期化(クラスタを作成)
[root@localhost ~]# export PGSETUP_INITDB_OPTIONS="--encoding=UTF-8 --no-locale" [root@localhost ~]# /usr/pgsql-13/bin/postgresql-13-setup initdb Initializing database ... OK
・登録されているデータベースを確認
[root@localhost ~]# su - postgres -bash-4.2$ psql -l データベース一覧 名前 | 所有者 | エンコーディング | 照合順序 | Ctype(変換演算子) | アクセス権限 -----------+----------+------------------+----------+-------------------+----------------------- postgres | postgres | UTF8 | C | C | template0 | postgres | UTF8 | C | C | =c/postgres + | | | | | postgres=CTc/postgres template1 | postgres | UTF8 | C | C | =c/postgres + | | | | | postgres=CTc/postgres (3 行) -bash-4.2$
まとめ
今回、VirtualBoxを利用して仮想環境を作成し、開発環境の構築方法を説明してきました。WEB開発に最低限必要な構成(WEBサーバ、アプリケーションサーバ、DBサーバ)は一通り入ってますので、開発環境を作成してプログラムを動かしてみては如何でしょうか?
ファブリカコミュニケーションズで働いてみませんか?
あったらいいな、をカタチに。人々を幸せにする革新的なサービスを、私たちと一緒に創っていくメンバーを募集しています。
ファブリカコミュニケーションズの社員は「全員がクリエイター」。アイデアの発信に社歴や部署の垣根はありません。
“自分から発信できる人に、どんどんチャンスが与えられる“そんな環境で活躍してみませんか?ご興味のある方は、以下の採用ページをご覧ください。