3 A2. Webサイト のテスト環境をローカルPC上で構築 【 XAMPP 】

3. Web / プログラミング 雑記

レンタルサーバ上で、プログラムのいろんな試行錯誤をしたい時、いちいちFTPでアップロード…
は面倒だし、テキパキとテストを繰り返したい! そんなテスト環境をPC上で整えてみました。

参考にした記事はこちら:
https://www.onamae.com/column/wordpress/27/

最初は、簡単そうな【 Local 】を試しました。
WordPress を動作させる環境に特化していてセットアップも難しくはありませんでしたが、
普通に HTML や JavaScript でのテストを行なう環境とは違っていたので、今回は用途違いで却下。
(いずれ機会があれば再度試します)

ということで次にメジャーそうな選択として、【 XAMPP
参考記事では Mac版 の MAMP というのもあるそうですが、私が XAMPP を調べた時には
Mac版 XAMPP もありました。 まさにクロスプラットフォームで使い勝手が良さそう。
ということで、今回は XAMPP を Windows にインストールしてローカルなサーバ環境を
整えていったその方法を記載します。

まずは、XAMPP を検索、ダウンロードのページへ。

Windows版 はじめさまざまなOS用があります。利用したいPHPのバージョンを確認してダウンロード

 落としたインストーラをダブルクリックすると、なにやら聞いてきますが構わず続行!

インストールしたい場所はデフォルトでは以下の通りです。私は D:¥XAMPP としました

インストールが完了して立ち上げると、すぐに使えそうです。が…、

config で設定をしていこうとすると、拒否られました。しかも応答なしになって強制終了する羽目に。

エラー3連発の果てに強制終了…

どうやらインストール前の「注意喚起」が関係ありそうですが、ふと XAMPP を
”管理者として実行させる”ことを思いつき、それで実行!

通常起動とは違う感じで立ち上がりました。まずは必要そうなサービスの左側のチェックボックスに
チェックを入れます。 私の実行時は Tomcat だけチェックが入れられず×となりましたが
使わないので、今回は無視! 右上の Config ボタンをクリック!

デフォルトのテキストエディターを選択し、起動時に起動させたいサービスにチェックを入れて
セーブします。

以上で、準備は完了です。
インストール先の D:¥XAMPP フォルダ内にはいろんなフォルダが出来上がっていました。
どうやらここが「仮想のApacheサーバの中身」のようです。
で、ここまでは他の記事でもよく紹介されていますが、初心者な私は「ここからどうしたらいいの?」
となりました…。 ここで今回の重要なポイント「 index.html(php)を入れる場所 」についてです。
ズバリ、「 htdocs 」フォルダ以下が Webブラウザからアクセスできるルートフォルダです!
そして、「 htdocs以外のファイルやフォルダは触らない方がいいでしょう。

必要なファイルを「 htdocs 」フォルダに入れて、テストでWebブラウザからアクセスするのですが、
その際の URL は、`localhost` もしくは `127.0.0.1` でアクセスできます。

ローカルなサーバ環境がこれで整いました。
次回は「フロントエンドバックエンド を連携させ データベースにアクセスする」方法をここで
試したいと思います。 次回の記事もお楽しみに!

タイトルとURLをコピーしました