ローカル開発環境 Mac

仮想マシン（CentOS7）にWebサーバーNginxをインストールしブラウザからWEBページを表示確認する方法

VirtualBox、Vagrantで構築した仮想マシンにWEBサーバーNGINX（エンジンエックス）をインストールします。

その後、ブラウザからアクセスしてWEBページを表示するまでの流れを説明します。

ここでは、ブラウザからアクセスし「テスト」と表示させてみます。

前提条件と環境

前提条件

仮想化ソフトVirtualBox、Vagrantのインストール、boxの追加、ディレクトリを準備し仮想マシンの準備が完了していることを前提とします。

環境

今回は以下の環境で実行しています。

  • ホストOS：MaxOS 10.12.6
  • ゲストOS：CentOS Linux release 7.1.1503 (Core)

流れ

おおまかには、次の流れで行います。

  1. Vagrantfileの編集
  2. 仮想マシンにログイン
  3. 仮想マシンにWEBサーバーNginxをインストール
  4. WEBページの作成とアクセス

それでは具体的な手順を見ていきましょう。

Vagrantfileの編集

仮想マシンのWEBサーバーに接続するための設定を行います。

接続先を設定するに、Vagrantfileを編集します。

VagrantfileとはVagrantの設定ファイルです。

まず、ローカルパソコン側で仮想マシンの管理フォルダに移動します。

cd vagrant/centos7.0

Vagrantfileを編集するには、以下のコマンドを実行します。

「vim」とはターミナル上で利用できるメモ帳のことです。

vim Vagrantfile

テキストエディター「vim」で設定ファイル（Vagrantfile）が開きます。

「vim」には、「ノーマルモード」、「インサートモード」があり、起動したときは「ノーマルモード」です。


ファイルの内容を修正するときは、キーボードの「i」キーを押し（ノーマルモード➔インサートモード）へ切り替えます。

インサートモードに切り替わると、画面左下の表記が「INSERT」ヘ変わります。「INSERT」になれば編集ができます。

ファイルの中からプライベートネットワークに関する記述を探します。

目視探すのは大変なのでらキーボードのショートカットキー「⌘+F」で検索機能を起動し、「private_network」等で検索するとよいでしょう。

該当する行のコメントアウトをはずします。（#を削除する）

修正前：# config.vm.network “private_network”, ip: “192.168.33.10”
修正後：config.vm.network “private_network”, ip: “192.168.33.10”

キーボードの「esc」キーか、「Control＋C」をおし、（インサートモード➔ノーマルモード）へ切り替えます。

「:wq」と入力し「return」キーで保存して終了します。
すると、vimが終了し、元の画面に戻ります。

これで、Vagrantfileで仮想マシン接続するためのIPアドレスの設定は完了しました。

仮想マシンにログイン

仮想マシンを立ち上げ接続しましょう。

仮想マシンを起動します。

vagrant up

仮想マシンにログインします。

vagrant ssh

プロンプトが[vagrant@localhost ~]$と表示されたら、仮想マシンにログインできています。

これより後の作業はすべて、仮想マシンにログインした状態で行います。

「ifconfig」コマンドでネットワーク環境を確認できるので、覚えておくとよいでしょう。

ifconfig
inet addr:192.168.33.10

「192.168.33.10」が事前にVagrantfileで設定したIPアドレスです。

仮想マシンにWEBサーバーNginxをインストール

centos7-nginx

WEBサーバーNginxのインストール

ブラウザから接続HTMLファイルを表示させるためには、WEBサーバーが必要です。

シェアが大きい定番のWEBサーバーにはApache（アパッチ）とNginx（エンジンエックス）です。

今回はNginx（エンジンエックス）をインストールします。

WEBサーバーのインストールには、CentOSのパッケージ管理ツール「yum」を使います。

「yum」とはソフトウェアの導入や削除を行うツールで、CentOSには予めインストールされています。

それでは、以下の手順でNginxをインストールしていきましょう。

※仮想マシンにいることを表すために、[vagrant@localhost ~]を表記していますが、コマンド実行時この部分は不要です。

Nginx リポジトリのインストール

[vagrant@localhost ~]sudo yum install http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm

以下が表示されたら「y」と入力しエンターを押します。

Is this ok [y/d/N]:y

「完了しました!」と表示されたらOKです。

Nginx パッケージのインストール

[vagrant@localhost ~]sudo yum install --enablerepo=nginx nginx

以下が表示されたら「y」と入力しエンターを押します。

Is this ok [y/d/N]:y

「完了しました！」と表示されたら、OKです。

Nginxが正常にインストールできたか確認するために、「nginx -v」でバージョンをチェックします。

[vagrant@localhost ~]nginx -v
nginx version: nginx/1.13.3

「nginx/1.13.3」のインストールされていることが確認できました。

WEBサーバーNginxの起動と確認

WEBサーバーNginxを起動するには、以下のコマンドを実行します。

[vagrant@localhost ~]sudo systemctl start nginx.service

つづいて、Nginxの起動状態を確認するために、次のコマンドを使います。

[vagrant@localhost ~]sudo systemctl status nginx

「Active: active (running)」 と表示されれば正常に起動できています。

WEBサーバーNginxの自動起動設定

再起動したときも自動的にNginxが起動するための設定を行います。

[vagrant@localhost ~]sudo systemctl enable nginx

自動起動の設定が有効になったか確認するには、次のコマンドを使います。

[vagrant@localhost ~]systemctl list-unit-files -t service

ファイヤーウオールの設定

ここまで出来たら、ブラウザから「192.168.33.10」にアクセスしてみましょう。

「192.168.33.10」はVagrantfileで事前に設定しておいたIPアドレスです。

すると、以下のように「このサイトにアクセスできません」と表示されるはずです。

接続できるようするために、ファイヤーウオールの設定が必要です。

192.168.33.10
ファイヤーウオールの設定は以下のコマンドを順番に実行してください。

[vagrant@localhost ~]sudo firewall-cmd --add-service=http --permanent
success

コマンド実行後、「success」と表示されたらOKです。

[vagrant@localhost ~]sudo firewall-cmd --reload
success

これも「success」と表示されたらOKです。

ブラウザにアクセスする

それでは改めてブラウザから「192.168.33.10」にアクセスしてみましょう。

「Welcome to nginx!」と表示されれば正常に接続できています。

WEBページの作成とアクセス

nginxはWWWサーバです。クライアントからコンテンツのリクエストに対して対応するコンテンツを返します。

サーバー上のドキュメントルートにHTMLファイルをおいて表示を確認してみましょう。

ドキュメントルートとは、ＷＥＢサーバ上に公開するためコンテンツを配置しておく場所です。

以下のコマンドでドキュメントルートを確認しましょう。

[vagrant@localhost ~]cat /etc/nginx/conf.d/default.conf

ドキュメントルートは「/usr/share/nginx/html」と確認できました。

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

「cd」コマンドを実行し、先程確認した「/usr/share/nginx/html」ディレクトリに移動します。

[vagrant@localhost ~]cd /usr/share/nginx/html

HTMLファイルを作る

ディレクトリに移動できたら、その中にHTMLファイルを作成しましょう。

HTMLファイルを作成はエディタは何を使ってもかまいません。

今回はターミナル上のテキストエディタ「vim」を使い「test.html」という名前のファイルを作成します。

管理者の権限で実行するため、コマンドの先頭部分に「sudo」を付けます。

[vagrant@localhost ~]sudo vim test.html

コマンドを実行すると、「vim」が起動します。

起動した状態はノーマルモードなので、「i」キーを押してノーマルモード➔インサートモードに切り替えましょう。

画面の左下が「INSERT」と表示されているのを確認できたら、以下を入力します。

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <title></title>
 </head>
 <body>
<h1>テスト</h1>
 </body>
 </html>
index.html

記入が完了したら、キーボードで「control＋c」と押しノーマルモードに切り替えてください。

次にキーボードで「:wq」と入力後、「enter」を押して内容を保存して「vim」を閉じます。

これで、「test.html」ファイルができました。

ブラウザを開き確認します。

ブラウザを開き、192.168.33.10/test.htmlにアクセスしてみましょう。

さきほど作成したHTMLファイルに無事にアクセスできました！

ブラウザにアクセスするとき、ターミナルから開くこともできます。

一旦、仮想マシンからログアウト（キーボードで「control+D」）した上で以下のように実行します。

open http://192.168.33.10/test.html

この方法も覚えておくとよいでしょう。

コマンドまとめ

今回使ったコマンドをまとめて記述しておきます。

ディレクトリ移動

cd vagrant/centos7.0

Vagrantfileの編集

vim Vagrantfile
config.vm.network "private_network", ip: "192.168.33.10"

vagrantの起動・接続

vagrant up
vagrant ssh

IPアドレス確認

ifconfig
inet addr:192.168.33.10

Nginxのリポジトリ、パッケージのインストール

[vagrant@localhost ~]sudo yum install http://nginx.org/packages/centos/7/noarch/RPMS/nginx-release-centos-7-0.el7.ngx.noarch.rpm
[vagrant@localhost ~]sudo yum install --enablerepo=nginx nginx

Nginxのサーバー起動

[vagrant@localhost ~]sudo systemctl start nginx.service

Nginxのファイヤーウォール設定

[vagrant@localhost ~]sudo firewall-cmd --add-service=http --permanent
[vagrant@localhost ~]systemctl list-unit-files -t service

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

[vagrant@localhost ~]cd /usr/share/nginx/html

ブラウザにアクセス

open http://192.168.33.10/test.html

最後に

Vagrantで構築した仮想マシンにNGINXをインストールし、ブラウザからアクセスしてWEBページ表示確認する手順を説明しました。

webサーバーの主役はNGINXになりつつあるので、学習しておくとよいでしょう。

シェア！

RECOMMENDこちらの記事も人気です。

RECOMMENDこちらの記事も人気です。