株式会社ファブリカコミュニケーションズ
  1. HOME
  2. テックブログ
  3. 初学者向けVirtualBoxでWEB開発の学習環境構築！

初学者向けVirtualBoxでWEB開発の学習環境構築！

2022/01/20 テクノロジー

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

構築する開発環境は図1のような仮想環境の構成とし、赤枠の部分が今回作成するところです。

構築手順

1．仮想環境構築
　(1)VirtualBoxを入手
　(2)VirtualBoxをインストール

2．仮想マシン構築
　(1)CentOSを入手
　(2)仮想マシンを作成
　(3)CentOSをインストール
　(4)ネットワークを設定
　(5)ミドルウェアをインストール
　　①WEBサーバ
　　②アプリケーションサーバ
　　③DBサーバ

１．仮想環境構築

仮想化ソフトウェア(VirtualBox)を利用して、物理マシンに仮想環境を作成します。

(1)VirtualBoxを入手

下記のサイトから、最新版のVirtualBoxをダウンロードします。
(2022年1月現在、最新リリースバージョンは6.1.14)

Oracle VM VirtualBox

(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!」の画面が表示したら設定完了！

http://192.168.56.100

②アプリケーションサーバ(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の画面が表示したら設定完了！

http://192.168.56.100/index.php

③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サーバ)は一通り入ってますので、開発環境を作成してプログラムを動かしてみては如何でしょうか？

ファブリカコミュニケーションズで働いてみませんか？

あったらいいな、をカタチに。人々を幸せにする革新的なサービスを、私たちと一緒に創っていくメンバーを募集しています。

ファブリカコミュニケーションズの社員は「全員がクリエイター」。アイデアの発信に社歴や部署の垣根はありません。

“自分から発信できる人に、どんどんチャンスが与えられる“そんな環境で活躍してみませんか？ご興味のある方は、以下の採用ページをご覧ください。

◎ 新卒採用の方はこちら
◎ キャリア採用の方はこちら

この記事を書いた人

犬太
プロダクト開発本部　開発チーム
犬太
一覧に戻る
一覧に戻る

カテゴリー

検索

アーカイブ

2023
2022
2021
2020
2019

おすすめの記事

VPNでテレワークしてみた（コロナ対策、FortiGate)
2020/05/20コラム/雑記 テクノロジー
Googleスプレッドシートでは出来ない？検索範囲で【ワイルドカード検索】する方法
2020/06/17コラム/雑記 マーケティング/グロース
【勉強大嫌い】社会人になって克服できた私的至高の勉強法
2021/02/01コラム/雑記 マーケティング/グロース