今回やること

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

今回は Apache、PHP、Oracle DB がそれぞれ連携して動くように設定するところまでを具体的にやっていこうと思います。

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

前回までは、 WebブラウザであるApache、アプりのプログラムとしてPHP、ゲームデータ等を保存する先に Oracle DB とインストールしていき、個別に動作を確認することを行いましたが、通常のWebアプリはこれらが互いに連携して動作しています。

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

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

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

本番のドメイン名でローカルにアクセスさせる

Webアプリでは最終的にブラウザからURLにアクセスすることで、ブラウザ上でゲームが開始します。 アプリの開発中は、本番サーバではなく、ローカルＰＣで実験を繰り返したいです。バグとかもつぶしてから本番サーバにアップロードする流れを考えましょう。

例えば「https://nodachisoft.com/jp/smc2020winter/」にアクセスしたら本番アプリが起動するとして、ローカルＰＣで開発するときも、同じ URL でつないだら、ローカルＰＣの環境（WebサーバやPHPなど）が動く、ということがしたい時があります。

この nodachisoft.com 部分はドメイン名と呼ばれますが、一時的にこの特定のドメインにアクセスしたとき、インターネット上のサーバではなく、自分のＰＣにアクセスするように設定をすればＯＫです。

hosts ファイルの編集

今回は、hosts という設定ファイルを編集します。hosts ファイルにIPアドレスとドメインの設定を書き込むことで、「nodachisoft.com」や「google.com」などのネットワーク上のアドレスの向き先（IPアドレス）を個別に制御できます。 例えばここに「yahoo.co.jp」などの設定を書いておけば、ブラウザからyahoo.co.jpにアクセスしたとき、hosts の IPアドレスに書いた IPアドレス にアクセスされます。

Windows であれば、hosts の位置は通常以下の場所にあります。

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

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

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

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

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

127.0.0.1      testweb.localhost

上記の 「testweb.localhost」はテストに使う時のドメイン名を入れてください。

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

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

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

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

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

１．EclipseからPHPプロジェクトを作成

Eclipse を起動し、File→New→PHP Project を選択します。

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

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

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

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

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

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

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

<?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">

DocumentRoot と Directory に先ほど作成した testphp プロジェクトを指定します。

これを読んでる方は、Eclipse で作成した各プロジェクトパスを設定してくださいね。

# 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 を（再）起動しましょう。再起動するまでは httpd.conf への設定変更は反映されないので注意しましょう！

正常に起動が終わると、「Apache」の背景が緑色になり、PID(プロセスＩＤ）、Portが表示され、Actions は「stop」に変化します。また、XAMMP のログに

「Status change detected: running(状態の変化を検知：稼働中)」と表示されます。

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

早速自分の作成したtestphpプロジェクトにアクセス！

アドレスは「http://testweb.localhost/phpinfo.php」です。

このアドレス（testweb.localhostドメイン）でアクセスできるのは、hosts ファイルを変更した自分のパソコンだけです。

無事に phpinfo() 関数の結果がブラウザに出力されています。

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

これで Apache と php と eclipseプロジェクトとの紐付けができました。

今回はここまで。

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

ページの更新履歴