【Webアプリ】開発環境をイチから作成・その6(Apache + PHP + Eclipse連携)

Web開発環境構築のアイキャッチ画像

今回やること

前回、XAMPP をインストールしてからの続きとなります。

今回は Apache 、 PHP、 Oracle の連携をするところまでを具体例をのせながら、やっていこうと思います。

ブラウザなどでWebアプリを使うときの内部の流れ

前回までで Apache 、 PHP、Oracle に対して個別に動作を確認しましたが、通常のWebアプリはこれらが互いに連携して動作します。

以下、すごく適当な概略です。Webゲームで敵に攻撃をしたときの各ソフトの連携イメージ。

dev_setting_02_web_flow_01

ブラウザでWebアプリにアクセスするときの流れ(おおざっぱ)

実際にWebアプリを動かせる開発環境をつくってみる

hosts ファイルの編集

まず初めに、最終的な稼動状態のドメイン名(のテスト版)をローカルPC上に再現するため、hosts という設定ファイルを編集します。hosts ファイルに設定を書き込むことで、「yukuto.net」や「yahoo.co.jp」などのネットワーク上のアドレスの向き先(IPアドレス)を手動で設定できます。例えばここに「yahoo.co.jp」などの設定を書いておけば、ブラウザからyahoo.co.jpにアクセスしたとき、hosts の IPアドレスに書いた IPアドレス にアクセスされます。

hosts の位置は通常以下の場所にあります。

場所「%windir%\system32\drivers\etc\」

「%windir%」は環境変数とよばれ、実際にコマンド等で利用しようとするとシステムにてあらかじめ設定してある文字列に置き換わります。OSのバージョンや、OSをインストールするときに特別な指定をしたりすると微妙にこの文字列(パス)は異なります。

ほとんどのPCでは「c:\windows\system32\drivers\etc」に置き換わるので、ここにアクセスしてみれば hosts ファイルがあるかと思います。

[start] -> ファイル名を指定 で上記の「場所」をそのままコピー&ペーストすればフォルダを開けます。フォルダを開くと、いくつかファイルが並んでいますが、その中にhosts があります。

dev_setting_01_hosts_01

hosts の中身はテキストですので、Windowsに最初から入っている「notepad」等で編集可能です。(※編集の際は管理者権限が必要になることが多いです。)

以下の一文を追加します。

127.0.0.1      testweb.localhost

上記の 「testweb.localhost」はお好きなテスト用ドメイン名を入れてください。

一応、自分のテスト環境に接続できるか、確認してみます。

Apache を立ち上げた状態で  「http://testweb.localhost」 をブラウザに入力してみると・・・

つながりました。成功です。XAMPP のデフォルト画面が表示されています。

dev_setting_01_hosts_02

稼働確認のためにWEb上で PHP を動かす

稼動確認用に PHP で記述された小さなページを作成してみます。

1.EclipseからPHPプロジェクトを作成

Eclipse を起動し、【File】→【New】→【PHP Project】 を選択。 dev_setting_03_new_php_pj_01

Project name: の欄に稼動確認用の適当なプロジェクト名を入力。 今回は「testphp」という名前でWebアプリを作成することにします。それ以外はデフォルトのまま、「Finish」ボタンを選択。

dev_setting_03_new_php_pj_02

PHPプロジェクト「testphp」が無事に作成されました。中身はこれから作成していきましょう。

dev_setting_03_new_php_pj_03

2.プロジェクトに動作確認用の php ファイルを作成

作成された空の PHP プロジェクトの中に動作確認用に php ファイルを作成してみます。 プロジェクトのルートフォルダ「testphp」を右クリックし、【New】→【PHP File】を選択します。

dev_setting_03_new_php_pj_04

File Nameの欄に新規作成するPHPファイル名を記述。(今回は 「phpinfo.php」というファイル名にしました。) そののち、「Finish」ボタンを押す。

dev_setting_03_new_php_pj_05

これで新規に phpinfo.php が出来上がりました!

dev_setting_03_new_php_pj_06

作成されたファイルを Eclipse から開き phpinfo.php に2行、以下のコードを追加して上書き保存します。

 <?php phpinfo(); 

Apache と PHP プロジェクトを連携できるように設定

新しくphp をプロジェクトに追加しましたが、まだブラウザ上からアクセスしても見えません。Apache側にPHPプロジェクトの場所を教えてやる必要があります。

Apache の設定を行い、今作成した Eclipse のワークディレクトリ内をドキュメントフォルダ(ブラウザからアクセスしたときに参照される場所)に指定したいと思います。
Apache の設定ファイルの場所は xammp をインストールしたフォルダの下 「apache\conf 」フォルダ内に「httpd.conf」というファイル名でおいてあります。

httpd.conf を notepad など適当なテキストエディタで開き、設定項目の一つであるDocumentRoot(HTTPサーバアクセス時に参照されるドキュメント格納場所)を先ほど作成した PHP プロジェクトである Eclipse のワークディレクトリに変更します。

httpd.conf に記載の DocumentRoot の説明文の適当日本語訳も載せておきます。

# DocumentRoot: The directory out of which you will serve your
# documents. By default, all requests are taken from this directory, but
# symbolic links and aliases may be used to point to other locations.

以下、当ページを書いた人(あまじ)による日本語訳です。
DocumentRoot: 文章等を外部に公開するためのディレクトリです。通常、全てのリクエストはこのディレクトリから参照されますが、シンボリックリンクやエイリアスにより他の場所(パス)が参照されることがあります。

実際に httpd.conf で以下の行を編集して、phpプロジェクトの場所を指定しましょう。

#
# DocumentRoot: The directory out of which you will serve your
# documents. By default, all requests are taken from this directory, but
# symbolic links and aliases may be used to point to other locations.
#
DocumentRoot "C:/add/tools/xampp/htdocs"
<Directory "C:/add/tools/xampp/htdocs">

今回は testphp プロジェクトを指定しました。

以下の DocumentRoot は今回この記事を書いている人が testphp を作った場所へのパスなので、もしこれを読んでる方がいたら、パスは読み替えてください。

#
# DocumentRoot: The directory out of which you will serve your
# documents. By default, all requests are taken from this directory, but
# symbolic links and aliases may be used to point to other locations.
# 
DocumentRoot "C:/add/devs/eclipse_cc/workspace/testphp"
<Directory "C:/add/devs/eclipse_cc/workspace/testphp">

httpd.conf の書き換えが終わったら、XAMPP Control Panel から、 Apache を(再)起動します。
dev_setting_04_apache_start01

正常に起動が終わると、「Apache」の背景が緑色になり、PID(プロセスID)、Portが表示され、Actions は「stop」に変化します。また、XAMMP のログに
「Status change detected: running(状態の変化を検知:稼働中)」と表示されます。

dev_setting_04_apache_start02

実際にブラウザからPHPで書いたWebアプリへアクセス!

早速自分の作成したtestphpプロジェクトにアクセス!
アドレスは「http://http://testweb.localhost/phpinfo.php」です。

dev_setting_05_testphp_pj_access01

無事に phpinfo() 関数の結果がブラウザに出力されています。phpinfo() とは、PHPが標準で用意している関数で、PHPが動作する環境についてのありったけの情報をHTMLで出力する関数です。上の画面のようにいろいろなPHPの動作環境が表形式で出力されていれば、とりあえずPHP本体は正常に動作しており、Webサーバ(Apache)がPHPの結果を渡してくれていることになります。
これで Apache と php と eclipseプロジェクトとの紐付けができました。

今回はここまで。

Webアプリの開発環境をイチから作成シリーズ記事

  1. その1(Eclipse&Java SDK7 導入)
  2. その2(Eclipse の Plugin 導入)
  3. その3(Oracle DB 11g XE R2 インストール)
  4. その4(Oracle DB 11g XE R2 疎通確認)
  5. その5(XAMPP インストール)
  6. その6(Apache + PHP + Eclipse連携) ←いまココ
  7. その7(Apache + PHP + Oracle連携)
  8. その8(CakePHP + Oracle連携)
  9. その9(CakePHP + Oracle連携)

ページの更新履歴

更新日更新内容
2013.10.4ページ公開
2018.3.24スマホからレイアウトが崩れて読みにくいので修正。ついでに文章構造と内容も訂正。文章も人に読んでいただくレベルではなかったのでちょこちょこ修正。

シェアする

  • このエントリーをはてなブックマークに追加

フォローする