Mac+XAMPPでWeb制作環境を構築してみる【XAMPPセキュリティ設定編】

前回でXAMPPのインストールが完了しましたが、インストール直後はMySQLのパスワードがなかったりとセキュリティ的に穴だらけの状態です。Apacheやらの設定ファイルを弄る前に、基本的なセキュリティ対策をしておきます。
インストールや起動までは簡単だったのですが、突如難易度が上がってここから先は基本的にターミナルを使って設定作業を行います。

rootは有効ですか?

ここでのrootはMacそのもののrootです。これが有効でない場合、XAMPPの設定が行えません。

  1. システム環境設定を開く
  2. 「ユーザとグループ」をクリック
  3. 「変更するにはカギをクリックします」をクリック、認証
  4. 「ログインオプション」をクリックし
  5. 「編集…」をクリック
  6. 「ディレクトリユーティリティを開く…」をクリック
  7. メニューバーの「編集」→「ルートユーザを有効にする」をクリック
  8. パスワードを設定して「OK」をクリック
これで、Macのrootユーザが有効になります。
コンソールでrootにスイッチする時、「$ su -」か「$ sudo コマンド」のどちらかを使用することになりますが、ここでは「sudo」を使うことにします。 
【20120911追記】
普通にターミナルから設定でもいいみたいです。
$ sudo passwd root

設定ファイルの編集はviで

ApacheやMySQLの設定ファイルを編集する際、「vi」コマンドを使用します。最低限以下のコマンドが使えたらいいです(個人的なメモも兼ねてます)。いろいろ覚えてると便利なのですが、ぶっちゃけ「i(編集)」と「:wq!(保存して終了)」さえ使えればいいです。

  • viを終了:esc→:q
  • 保存して終了:esc→:wq!
  • 編集モード:i
  • 編集モード解除:esc
  • 行単位で削除:dd
  • 行番号表示::set number
  • 指定行へ移動:行番号G ※「0G」で最下行へ移動
  • ワード検索(下方向):/検索したい文字
  • ワード検索(上方向):?検索したい文字
  • 次を検索:ワード検索実行後n
  • 前を検索:ワード検索実行後N

XAMPPのセキュリティ設定

$ sudo /Applications/XAMPP/xamppfiles/xampp security<ENTER>
Password:<ユーザパスワード>
XAMPP: Quick security check...
XAMPP: Your XAMPP pages are NOT secured by a password.
XAMPP: Do you want to set a password? [ja]<ENTER>
XAMPP: Password: <パスワード>
XAMPP: Password (again): <パスワード>
XAMPP: Password protection active. Please use 'xampp' as user name!
XAMPP: MySQL is accessable via network.
XAMPP: Normaly [ja] <ENTER>
XAMPP: Turned off.
XAMPP: Stopping MySQL...ok.
XAMPP: Starting MySQL...ok.
XAMPP: MySQL has to run before I can check the security.
XAMPP: MySQL has to run before I can check the security.
XAMPP: MySQL has a root passwort set. Fine! :)
XAMPP: ProFTPD has a new FTP password. Great!
XAMPP: Do you want to change the password anyway? [nein]<ENTER>
XAMPP: Done.

この設定をして「http://localhost」にアクセスするとログイン画面が表示されるようになります。
ユーザ名を「xampp」、パスワードを先ほど設定したパスワードでログインしてください。 

phpMyAdminのセキュリティ設定

次に、phpMyAdmin用のrootパスワードを設定します。phpMyAdminはブラウザ上でMySQLのテーブルを管理できるようするもので、いちいちコマンドで確認するよりも一覧性が高く便利なものとなっています。バックアップやリストアも簡単に行えます(文字化けが起きやすかったりしますが)。
設定を行う前に、予めXAMPP ControlのApacheとMySQLサービスをStartしておいてください。

$ sudo /Applications/XAMPP/xamppfiles/bin/mysqladmin -u root -p password <パスワード>
Enter password: <ENTER>

この時点では、「MySQL内のrootパスワードを設定した」だけなので、phpMyAdminにアクセスしても認証エラーが出てしまいます。
phpMyAdminの設定ファイルを編集して、ログインできるようにします。

$ sudo vi /Applications/XAMPP/xamppfiles/phpmyadmin/config.inc.php
【34行目変更】
$cfg['Servers'][$i]['password'] = '<上記で設定したパスワード>';

これでXAMPPのセキュリティ設定は完了です。localhostにアクセスし、「セキュリティ」がすべて「安全」になっていること、phpMyAdminが表示されることを確認してください。 

Mac+XAMPPでWeb制作環境を構築してみる【準備〜インストール編】

XAMPPはWebサーバを稼働するために必要なパッケージがひとまとめになったもので、基本でApache・MySQL・Perl・PHPがセットになっており、簡単にWebサーバ環境を構築することができます。ちなみに「ザンプ」と読むらしいです。

XAMPPはいくつか種類がある

XAMPPはクロスプラットフォームで動作する、という前提で用意されており、Windows、Linux、そしてMacそれぞれのパッケージが用意されています。

しかし、バージョンには大きな差異があり、Windows版とLinux版は2012/7/13であるのに対し、Mac版は2010/03/04とかなり古いものとなっています(Solaris版ですら2011/9/20)。 当然ながらApache等のバージョンも低く、Windows版は2.4.2、Mac版は2.2.14と、なかなかの迫害ぶりを受けている状態です。

Mac版は別プロダクトでMAMPというものがあり、そちらのほうがメインになっているようです。といっても、Apacheは2.2.22なのでXAMPPとあまり変わりありませんが・・・。

MAMPは無料版と有料版であるMAMP PROの2種類があり、無料版との違いは幾つかの設定がGUIで行えるぐらいで、なんと59ドルします…

前置きが相変わらず長くなりましたが、結論としては、MAMP PROに59ドル払う必要もないし、Mac上で使う分にはXAMPPもMAMPバージョンもそれほど違いがないので、XAMPP for Mac OS X版を使用することにします。

インストールは至極簡単

インストールはびっくりするほど簡単です。

  1. apache friends – xampp for mac os xへ移動し、「XAMPP Mac OS X 1.7.3」のリンクをクリック、自動でダウンロード開始。
    20120910:Mac+XAMPPでWeb制作環境を構築してみる【準備〜インストール編】001
  2. ダウンロードした「xampp-macosx-1.7.3.dmg」をマウント。
  3. 表示されたウインドウの指示通りにXAMPPのフォルダをApplicationsフォルダへ移動して完了。
    20120910:Mac+XAMPPでWeb制作環境を構築してみる【準備〜インストール編】002 

Windowsのようなインストーラも必要ありませんでした。ちなみにMAMPはダウンロード欠損が多い上にpkgでインストールする必要があり、アンインストーラもまともに動きません。

起動も簡単

  1. アプリケーションフォルダにXAMPPがあるので、その中にある「XAMPP Control」アプリを起動。
  2. 「Apache」「MySQL」「FTP」の起動ボタンが表示されたら、とりあえず「Apache」の「Start」をクリック。
  3. アカウントのパスワードを入力してランプが緑になれば起動成功
    20120910:Mac+XAMPPでWeb制作環境を構築してみる【準備〜インストール編】003 

ブラウザ上から「http://localhost」と入力すればXAMPPのようこそ画面が表示されます。このあと、幾つかのセキュリティ設定やバーチャルホスト等の設定を行うのですが、これはまた次回。
20120910:Mac+XAMPPでWeb制作環境を構築してみる【準備〜インストール編】004 

注意点

Web共有は無効にしよう

Web共有はMacをAir Mac ExpressのようにMacをアクセスポイント化できたりする便利な機能なのですが、XAMPPを使う際にはいろいろ不都合が出るので無効にしておきましょう。システム環境設定→共有から変更できます。
20120910:Mac+XAMPPでWeb制作環境を構築してみる【準備〜インストール編】005 

プロキシの除外リストに「localhost」を入れておこう

ネットワーク接続にプロキシを使用している場合、まれにlocalhostがプロキシに引っかかることがあるので、localhostを「プロキシ設定を使用しないホストとドメイン」に追加しておきましょう。システム環境設定→ネットワーク→詳細→プロキシから変更できます。
20120910:Mac+XAMPPでWeb制作環境を構築してみる【準備〜インストール編】006 

アンインストールに「App Cleaner」等のアプリは絶対に使わないように!

アンインストールするときにAppCleaner等のアンインストールアプリを使うと、他のシステムファイルを巻き込んでゴミ箱に持って行ってしまいます。

なので、アンインストールするときは必ずXAMPPフォルダのみ削除するようにしましょう。

XAMPP+phpEclipseインストールメモ

Eclipse公式サイトが毎回レイアウト変更するのかどうかわかりませんが、紹介サイトごとにインストール方法が違っていて非常にわかりづらくなっていたので、ものすごい箇条書きでメモ。
バージョンは2008年3月12日現在のリリース分を入れています。

参考サイトはこちら:

XAMPP

PHP、MySQL、Apache、Perl等がセットになった総合Webサーバです。インストーラ版もありますが、ZIPでも配布されており、やろうと思えばUSBメモリ等に入れてどこでも仮想環境を実現できそうです(User権限では動かせないと思いますが)。

  1. XAMPP Windows 1.6.6a(http://www.apachefriends.org/download.php?xampp-win32-1.6.6a.zip)のダウンロード・解凍
  2. 解凍したxamppフォルダをドライブレター直下に移動(C:\等)
  3. 「setup_xampp.bat」を起動、Apache等の設定ファイルが自動設定される
  4. 「xampp-control.exe」を起動
  5. ApacheとmySQLの「Start」をクリック、Runningとなっているか確認
  6. ブラウザから「http://127.0.0.1/」または「http://localhost/」でアクセス
  7. XAMPPの大きいアイコンが表示され、使用言語に「日本語」を選択
  8. XAMPP管理画面が表示されれば成功

※ XAMPPの終了はxampp-controlの各サービスにある「Stop」をクリックしてから「Exit」をクリックして終了してください。ウインドウのXボタンは最小化されるだけです。

XAMPP-phpMyAdminでMySQL初期設定

XAMPPにはMySQLデータベースを管理するためのツールが同梱されています。コマンドラインからSQLを打ち込んでもよいですが、動作が安定しているのでこちらを利用します。

  1. ブラウザから「http://127.0.0.1」にアクセス

不要ユーザの削除

  1. 左メニューの「phpMyAdmin」をクリック
  2. 「特権」をクリック
  3. ユーザリストのroot:127.0.0.1の項目にチェック
  4. 「実行する」をクリック

rootパスワードの設定

  1. root:localhostの項目右端にあるアイコンをクリック
  2. 「パスワードを変更する」エリアからパスワードを任意で入力
  3. 「実行する」をクリック

phpMyAdminのユーザ認証方法設定

  1. 「C:\xampp\phpMyAdmin\config.inc.php」をエディタで開く
  2. 19行目を「$cfg[‘Servers’][$i][‘auth_type’] = ‘http’;」に変更
  3. 再度phpMyAdminにアクセスし、認証画面が表示されたら設定したrootのユーザとパスワードを入力

Web製作用の一般ユーザ作成

  1. phpMyAdminトップページから「特権」をクリック
  2. 「新しいユーザを追加する」をクリック
  3. ユーザ名:任意、ホスト:ローカル、パスワード:入力必須
  4. 「グローバル特権」エリアの「データ」「構造」すべてにチェックを入れる
  5. 「実行する」をクリック
  6. ログアウト

Web製作用データベースの作成

  1. 作成したユーザでログイン
  2. 「データベース」をクリック
  3. 「新規データベースを作成する」項目に任意のデータベース名を入力
  4. 「作成」をクリック

XAMPP-Apacheバーチャルホストの設定

XAMPPのhtdocsフォルダ内はXAMPP管理系ファイルがおいてありますので、Web製作用フォルダを別にhtdocs2として作成します。
http://127.0.0.1:8080でアクセスするとWeb製作用サイトにアクセスする設定にします。
htdocs以下にフォルダを作成して作業する場合はこの設定は必要ありません。

  1. XAMPPフォルダ直下にhtdocs2フォルダを作成
  2. 「C:\xampp\apache\conf\httpd.conf」をエディタで開く
  3. 54行目「Listen 8080」を追加
  4. 最終行に以下の内容を追加

<VirtualHost *:8080>
DocumentRoot C:/xampp/htdocs2
<Directory "C:/xampp/htdocs2">
Options Indexes FollowSymLinks MultiViews Includes ExecCGI
AddType text/html .shtml
AddHandler server-parsed .shtml
AddHandler cgi-script .cgi .pl
AllowOverride All
Order allow,deny
Allow from all
</Directory>
</VirtualHost>

  1. XAMPPからApacheを再起動
  2. ブラウザから「http://127.0.0.1:8080」にアクセスし、ページが表示されるか確認

Eclipse

Eclipseはオープンソースの総合開発環境です。基本はJavaしか使えませんが、プラグインを追加することによりC++やHTML等の多言語を扱うことができます。

  1. Eclipse Classic 3.3.2のダウンロード(http://www.eclipse.org/downloads/)
  2. Eclipse Classicを任意の場所に解凍
  3. JDK 6 Update 5のダウンロード(http://java.sun.com/javase/ja/6/download.html)
  4. JDK 6 Update 5のインストール
  5. eclipse.exeのショートカット作成
  6. ショートカットのリンク先に「-vm "C:\Program Files\Java\jdk1.6.0_05\bin\javaw.exe"(JDKのパス)」を追加
  7. ショートカットから起動してeclipseの起動を確認

Eclipse-Pleiades(日本語化)

Pleiades はEclipseと関連する有名なプラグインを日本語化します。Eclipseしか使わないという方はEclipse 日本語化言語パック (http://prdownloads.sourceforge.jp/blancofw/29812/NLpackja-eclipse-SDK-3.3.2 -win32-blancofw20080307.zip)を使用してください。

  1. Pleiades 1.2.1(http://mergedoc.sourceforge.jp/index.html#/pleiades.html)のダウンロード
  2. Pleiades の解凍
  3. 解凍した中身をEclipseのフォルダに上書き
  4. eclipse.iniをメモ帳で開き、最下行に「-javaagent:plugins/jp.sourceforge.mergedoc.pleiades/pleiades.jar」を追記
  5. eclipse.exe -clean.cmdをメモ帳で開き、5行目を「start .\eclipse.exe -clean -vm "C:\Program Files\Java\jdk1.6.0_05\bin\javaw.exe" %*」に変更
  6. eclipse.exe -clean.cmdを実行(eclipse.exe -clean.cmdの起動はこれ一回のみ)
  7. 次回以降の起動は作成したショートカットから起動する
     

Eclipse-phpEclipse(PHPエディタ)

phpEclipseはEclipse上でPHPの開発ができるようにするものです。XAMPPのPHPと連携してデバッグする機能も備えています。

  1. Eclipseを起動
  2. 「ヘルプ」→「ソフトウェア更新」→「検索およびインストール」
  3. 「インストールする新規フィーチャー」にチェックし、「次へ」
  4. 「新規リモートサイト」をクリック
  5. 名前「phpEclipse(任意)」、URL「http://phpeclipse.sourceforge.net/update/releases」
  6. 「終了」クリック後、自動的にパッケージの検索開始
  7. 「インストールフィーチャーの選択」の「phpEclipse」にチェックし、「次へ」
  8. 「使用条件の条項に同意します」にチェックし、「次へ」
  9. 「終了」をクリック後、自動的にダウンロード開始
  10. 署名なしの警告画面が出るが、無視して「インストール」
  11. Eclipseの再起動「はい」
  12. 再起動後、「ウインドウ」→「設定」
  13. 「PHPeclipse Web開発」→「ブラウザー・プレビューのディフォルト」
  14. プレビューのデフォルト・エントリーにあるチェックをすべてはずす
  15. 「PHPeclipse Web開発」→「プロジェクト・ディフォルト」
  16. PHPプロジェクトのディフォルト・エントリーにあるローカルホストを「http://127.0.0.1:8080」、ドキュメントのルートを「C:/xampp/htdocs2」に変更
  17. 「PHPeclipse Web開発」→「PHP外部ツール」
  18. PHPコマンド実行に「C:\xampp\php\php.exe」、パーサー・コマンドに「C:\xampp\php\php -l -f {0}」へ変更
  19. 必要ならApacheやMySQLのパスも指定しておく

Eclipse-Aptana(HTML総合エディタ)

AptenaはHTML、CSS、JavaScript等の総合HTMLエディタプラグインです。

  1. Eclipseを起動
  2. 「ヘルプ」→「ソフトウェア更新」→「検索およびインストール」
  3. 「インストールする新規フィーチャー」にチェックし、「次へ」
  4. 「新規リモートサイト」
  5. 名前「Aptana(任意)」、URL「http://update.aptana.com/install/3.2」
  6. 「終了」クリック後、自動的にパッケージの検索が始まる
  7. 「インストールフィーチャーの選択」の「Aptana」にチェックし、「次へ」
  8. 「使用条件の条項に同意します」にチェックし、「次へ」
  9. 「終了」をクリック後、自動的にダウンロードが開始される
  10. 署名なしの警告画面が出るが、無視して「インストール」
  11. Aptena Firewall Configurationは特に設定しなくてもよいが、一応指示通りに設定しておいた
  12. Eclipseの再起動「はい」

意外にめんどくせーって感じです。