ダークハリーポッターのコラム

東京長崎村のサイト開発の環境

2015年6月28日

第１回目のコラムとして何が良いか？そうだ、東京長崎村のサイト開発の環境でも紹介しましょう～

東京長崎村のサイトは PHP, MySQL, Apacheを利用して開発しています。Linux ではなく Windows に構築しています。

Windowsで PHP を利用した開発を行うには、XAMPP を利用することがとっても簡単です。 XAMPPのパッケージを提供している Apache Friends から Windows版をダウンロードしてインストールしてみましょう。

アイコンをクリックしてインストールを実行、ほとんど yes, OK, Next ボタンを押していきます。

選択のある画面だけスナップショットを付けておきます（東京長崎村でのインストール例）。

インストールするパッケージ選択画面で東京長崎村では以下のものを選択してインストールしています。

Apache - Webサーバー
MySQL - データーベース
Tomcat - Javaアプリケーションサーバー（ソース管理でGitBucketを利用するためにインストール）
PHP - PHP環境
phpMyAdmin - MySQLをブラウザー上から操作

インストール先はデフォルトのままで・・・

他にアプリを入れる気はないのでチェックを外す。

Next ボタンを押していきインストールが開始される。

インストールが完了したら以下のような画面が表示されるので、Control Panel を起動するチェックを入れたまま Finish ボタンを押す。

XAMPP Control Panel が起動される。

XAMPPの設定ファイル等の編集がメモ帳では何かと不便なので、あらかじめサクラエディターをインストールしておく。インストーラーの指示通りデフォルトのまま進めていく・・・

設定を開いて自動的に起動されるサーバーにチェックを入れる。設定ファイル等の編集にサクラエディタを指定する。

一旦、XAMPP Control Panel を終了させる。

XAMPP のセキュリティー設定（MySQLのパスワード設定など）を行うのだが、設定画面が文字化けするので、あらかじめ以下のファイルを修正しておく。

C:\xampp\security\htdocs\navi.php ファイルの修正

<a target=_parent class=n href="lang.php?jp"><?php print $TEXT['navi-japanese']; ?>

C:\xampp\security\htdocs\lang\jp.php ファイルの修正（UTF-8で保存することを忘れないように！）

$TEXT['navi-english'] = "English";
$TEXT['navi-german'] = "Deutsch";
$TEXT['navi-spanish'] = "Espanol";
$TEXT['navi-french'] = "Francais";
$TEXT['navi-italian'] = "Italiano";
$TEXT['navi-dutch'] = "Nederlands";
$TEXT['navi-norwegian'] = "Norsk";
$TEXT['navi-polish'] = "Polski";
$TEXT['navi-portuguese'] = "Portugues";
$TEXT['navi-slovenian'] = "Slovenian";
$TEXT['navi-chinese'] = "中文";
$TEXT['navi-japanese'] = "日本語";

tomcat を起動させるため JDKもインストールしておきます。同じようにインストーラーの指示通りデフォルトのまま進めていく・・・

XAMPP Control Panel を起動します。Windowsが再起動した際に、XAMPP Control Panelが実行されるように「スタートアップ」にショットカットを入れておくとよい。（この場合、ログインしないと起動されないけど・・・）

ブラウザーで http://localhost/ にアクセスしてみる

XAMPPのセキュリティー設定を行うために、「セキュリティ」ページを開く」

問題の修正を行う。MySQLの rootのパスワードおよびXAMPP設定画面のアクセス権の設定を行う。

XAMPPのセキュリティートップに戻る

XAMPPのセキュリティー設定を反映させるために Apache, MySQLを再起動

Apache, MySQLの再起動が完了したら、http://localhost/phpmyadmin/ へアクセスしてみる。「ユーザ名」は root、「パスワード」は「セキュリティ」ページで設定したもの。

ここまでできたら基本的な設定は終わり。外部公開はできないローカルネットワークなので、このぐらい設定しておけばよいかな。（Firewallの設定はそれなりにやってある）

次は、東京長崎村サイト特有の環境を設定します。

xamppの基本画面はいらないので捨ててしまいます。

C:\xampp\htdocs 以下のファイル

空っぽにする

ここに東京長崎村の Webサイトデータをコピーします。（実際はバージョン管理しているソースをチェックアウト）

ブラウザでhttp://localhost/ を確認すると PHP 等が動作していない。

そこで Apache や PHP の設定を行う。XAMPP Control Panl から変更できるが、ちょっと面倒なのでサクラエディタで編集してしまう。

C:\xampp\apache\conf\extra\httpd-xampp.conf ファイルの編集

# Windows で . で始まるファイルを扱うのが面倒なので .htaccessのファイル名を変更する
AccessFileName htaccess.txt

# .html の拡張子でも PHP を介して動作するように設定
AddType application/x-httpd-php .php .html

C:\xampp\php\php.ini ファイルの編集。ファイルの行数が多いので、ちょっと手を抜いて変更のある部分だけ抽出してあります。

default_charset = "UTF-8"
include_path=".;C:\xampp\htdocs;C:\xampp\php\PEAR"
upload_max_filesize=6M

mbstring.language = Japanese
mbstring.internal_encoding = UTF-8
mbstring.http_input = auto
mbstring.http_output = UTF-8
mbstring.encoding_translation = Off
mbstring.detect_order = auto
mbstring.substitute_character = none;
mbstring.func_overload = 0
mbstring.strict_detection = Off

これでPHPの設定はできました。

でもまだエラーが、データベースの設定しなくちゃ。

http://localhost/phpmyadmin/にアクセスしてデータベースの作成とデータを入れる。

ログインしてデータベースの作成

インポート

これでちゃんとページが表示される。

しかし、まだ設定が足りない。このままでは、他のPCから phpmyadmin へアクセスすることができない。サーバーの IPアドレスが 192.168.0.7 として他のパソコンから http://192.168.0.7/phpmyadmin/ へアクセスしてみる

そこで、ローカルネットワークからは phpmyadminにアクセスできるように設定する。

また、C:\xampp\apache\conf\extra\httpd-xampp.conf ファイルの編集

ローカル環境（自分自身）のみのアクセスを
<LocationMatch "^/(?i:(?:xampp|security|licenses|phpmyadmin|webalizer|server-status|server-info))">
        Require local
	ErrorDocument 403 /error/XAMPP_FORBIDDEN.html.var
</LocationMatch>

ローカルネットワーク内のホストからアクセス可能にする（ローカルネットワークが 192.168.0.0/24 の場合）
<LocationMatch "^/(?i:(?:xampp|security|licenses|phpmyadmin|webalizer|server-status|server-info))">
	Order deny,allow
	Deny from all
	Allow from 127.0.0.0/8
	Allow from 192.168.0.0/24
	ErrorDocument 403 /error/XAMPP_FORBIDDEN.html.var
</LocationMatch>

※ Apache 2.4 から Require の記述方法が変わっています
<LocationMatch "^/(?i:(?:xampp|security|licenses|phpmyadmin|webalizer|server-status|server-info))">
	Require ip 192.168.
	ErrorDocument 403 /error/XAMPP_FORBIDDEN.html.var
</LocationMatch>

もう一度、他のパソコンから http://192.168.0.7/phpmyadmin/ へアクセスしてみる

これで東京長崎村の開発環境（サーバー側）の設定は終わりです。第１回目からこんなに長い記事を書いてしまいました・・・不定期ですが、これからも役に立たない技術情報を載せていきます。よろしくね！