[ローカル開発環境 #04]Web開発環境を実用的にしよう

ローカル開発環境の構築:もくじ

  1. ローカルサーバーを導入しよう
  2. ローカルサーバーの設定をしよう
  3. Web開発環境を構築しよう
  4. Web開発環境を実用的にしよう
  5. WordPressでブログを作成しよう
  6. メールの送受信を可能にしよう

ドキュメントルートをDropboxで共有する

Apacheのドキュメントルートをクライアント側から操作しやすいようにします。
クライアント側で作業したファイルをそのままブラウザで確認できれば便利です。

Apacheのドキュメントルートはディフォルトでは、/var/www/htmlです。
ドキュメントルートは、/etc/httpd/conf/httpd.confで変更が可能です。

Vagrantの共有ディレクトリ

Vagrantにはクライアント側と共有できるディレクトリが用意されています。

  • Vgrant側:/vagrant
  • クライアント側:Vagrantfileが格納されているディレクトリ

Apacheのドキュメントルートを、/vagrantに変更することでドキュメントルートを共有することも可能です。

Dropboxで共有ディレクトリを作成

複数のマシンで開発を行う場合は、Dropboxを利用すると便利です。

手順の確認

  1. カーネルの、sendfileサポートを無効化
  2. Vagrant側とDropboxに、それぞれディレクトリを作成
  3. パーミッションの設定
  4. Vagrantfileを編集
  5. Vagrantを再起動(設定を反映させる)
  6. ドキュメントルートのシンボリックリンクをはる

カーネルの、sendfileサポートを無効化

ドキュメントルートをネットワークマウントさせると静的ファイル(.html, .css, .js, etc…)が更新されない場合があります。
以下は、Appacheのドキュメントの引用です。詳しくは、Appacheのドキュメントを参照してください。

ネットワークマウントされた DocumentRoot (例えば NFS や SMB) では、カーネルは自身のキャッシュを使ってネットワークからのファイルを 送ることができないことがあります。

core – Apache HTTP サーバ バージョン 2.2 | EnableSendfile ディレクティブ

httpd.confをviで開きます。

sudo vi /etc/httpd/conf/httpd.conf

以下をコメントインします。


(省略)
# EnableSendfile: Control whether the sendfile kernel support is
# used to deliver files (assuming that the OS supports it).
# The default is on; turn this off if you serve from NFS-mounted
# filesystems.  Please see
# http://httpd.apache.org/docs/2.2/mod/core.html#enablesendfile
#
EnableSendfile off
(省略)

Apacheを再起動して設定を反映させます。

sudo service httpd restart

Vagrant側とDropboxに、それぞれディレクトリを作成

Vagrant側にディレクトリを作成します。

sudo mkdir /home/vagrant/vagrant_public

Dropboxには、Vagrantという名前でディレクリを作りました。

パーミッションの設定

sudo chmod -R 755 /home/vagrant

このディレクトリのパーミッションを変更しないとブラウザからアクセルできません。
忘れていたら少しハマりますので気をつけましょう。

Vagrantfileを編集

以下の一行を追加してください。

config.vm.synced_folder "~/Dropbox/Vagrant", "/home/vagrant/vagrant_public", owner:'vagrant', group:'apache', mount_options:['dmode=755', 'fmode=755']

Vagrantの共有ディレクトリは、コマンドでパーミッションを変更することはできません。

もし、/vagrantの共有ディレクトリが必要ない場合は、以下の一行を追加してください。マウントされなくなります。

config.vm.synced_folder ".", "/vagrant", disabled: true

Vagrantを再起動(設定を反映させる)

vagrant reload

SS 2015-08-15 16.28.48

作成した共有ディレクトリ、/home/vagrant/vagrant_publicがマウントされているのがわかります。
そして、不要な/vagrantの共有ディレクトリはマウントされていないのもわかります。

ドキュメントルートのシンボリックリンクをはる

まずは、ドキュメントルートのディレクトリを削除します。

sudo rm -rf /var/www/html

シンボリックリンクを作成します。

sudo ln -fs /home/vagrant/vagrant_public /var/www/html

SS 2015-08-15 17.02.02

ドキュメントルートがDropboxと共有出来たのがわかります。

バーチャルホストの設定

複数のドメインに対応するために、バーチャルホストを利用します。

仮想ドメインを策定

仮想ドメイン 用途
big1to.com 当ブログ
blog.example.com 非公開のWordPressブログ
example.com 運用中のWebサイト

この3つのドメインは今後の記事に利用します。

運用しているドメインは、仮想ドメインも同じにした方が何かと便利なのですが、今回は当ブログのドメイン以外はダミーにしています。

ドメイン毎のディレクトリを作成

sudo mkdir /var/www/html/big1to.com
sudo mkdir /var/www/html/example.com

blog.example.comはWordPressを新規にインストールする際に作成するので今は不要です。

virtualhost.confの作成

バーチャルホストの設定は、httpd.confに記述してもいいのですが、分かりやすいようにファイルを分けました。
/etc/httpd/conf.d/の下の.confファイルはApacheが起動するときに一緒に読み込まれます。

ファイルを作成してviで編集します。

sudo vi /etc/httpd/conf.d/virtualhost.conf

以下を追加します。

<VirtualHost *:80>
    DocumentRoot /var/www/html/big1to.com
    ServerName big1to.com
    ErrorLog /var/log/httpd/big1to.com_error_log
    CustomLog /var/log/httpd/big1to.com_access_log combined
    AddDefaultCharset UTF-8
    DirectoryIndex index.html index.php
    <Directory “/var/www/html/big1to.com”>
        AllowOverride All
    </Directory>
</VirtualHost>

<VirtualHost *:80>
    DocumentRoot /var/www/html/blog.example.com
    ServerName blog.example.com
    ErrorLog /var/log/httpd/blog.example.com_error_log
    CustomLog /var/log/httpd/blog.example.com_access_log combined
    AddDefaultCharset UTF-8
    DirectoryIndex index.html index.php
    <Directory “/var/www/html/blog.example.com”>
        AllowOverride All
    </Directory>
</VirtualHost>

<VirtualHost *:80>
    DocumentRoot /var/www/html/example.com
    ServerName example.com
    ErrorLog /var/log/httpd/example.com_error_log
    CustomLog /var/log/httpd/example.com_access_log combined
    AddDefaultCharset UTF-8
    DirectoryIndex index.html index.php
    <Directory “/var/www/html/example.com”>
        AllowOverride None
    </Directory>
</VirtualHost>

WordPressは.htaccessを使うので、example.com以外はAllowOverride Allにしています。
必ず、httpd.confでもAllowOverride Allにしてください。

VirtualHostを有効化

viでhttpd.confを開きます。

sudo vi /etc/httpd/conf/httpd.conf

以下の行をコメントインします。

NameVirtualHost *:80

Apacheを再起動(設定を反映させる)

sudo service httpd restart

Hosts編集ツールHostsの導入

ブラウザからIPアドレスではなく、ドメインでApacheにアクセス出来るようにします。

Hosts.prefpaneを導入

SS 2015-08-18 3.39.54

specialunderwear/Hosts.prefpane

バージョン1.3(執筆時の最新バージョン)をダウンロードしました。

インストールは、VirtualBox.pkgを展開しインストーラーの指示に従って行います。
特にオプション設定などはありません。

システム環境設定パネルのアイコンから操作します。

SS 2015-08-18 3.48.06

先ほどのドメインを追加します。

SS 2015-08-18 3.50.48

Hello, World!を表示させる

PHPのテストも兼ねて、index.phpを作成します。

sudo vi /var/www/html/big1to.com/index.php

以下を追加します。

<html>
<h1>
<?php echo 'Hello, World!'; ?>
</h1>
</html>

ブラウザから、big1to.comにアクセスします。

通常だと、当ブログのトップページが表示されますが、Hostsを有効にしているのでHello, World!が表示されます。

SS 2015-08-18 4.16.21

まとめ

Web開発環境の構築は、一通り終わりました。
次回からはWordPressの導入から開発環境を準備していきます。

スポンサーリンク
レクタングル(大)
レクタングル(大)

コメントをどうぞ

メールアドレスが公開されることはありません。

CAPTCHA


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>