ywork2020.com

Title

XAMPP を利用して Web 開発環境を構築する

目次 (INDEX)

Web 開発環境とは

Web 開発環境を構築するとは簡単に言えば Web サーバーを自宅などのローカルエリアネットワークに設置することです。

これはワールドエリアネットワークに公開する為のものではなく、 あくまでもローカルで開発するための個人的なテストサーバーです。 サーバーと聞いて、高スペックなパソコンが必要だろうと思う方もおられるかもしれませんが普通のパソコンがあれば十分です。

これは普通のパソコンに HTTP 通信機能やデータベースの利用、 PHP 言語でプログラムが実行できるソフトウェアを総合的にインストールしたものを Web 開発用のサーバーと呼んでいるにすぎません。 きっと貴方のお使いのパソコンで十分に環境を整えることが可能なはずです。

目次に戻る

XAMPP とは

ザンプと読みます。
XAMPP とは人気の高い Web 開発環境です。

XAMPP は、完全に無償で MariaDB ( MySQL ) 、PHP 、および Perl 等を簡単にインストールできる Apache の総合環境構築パッケージです。

他にも FTP サーバーや Mail サーバー、アクセス解析等のソフトウェアも含まれているます。 XAMPP オープンソースパッケージは、チェックボックスから必要なソフトウェアを選択して簡単にインストールすることがきるよう設定されています。

目次に戻る

XAMPP のダウンロードとインストール

日本語公式ページ: https://www.apachefriends.org/jp/index.html

XAMPP公式ページ

公式ページでは、英語ではありますが、インストールと使用している動画がありますので使い方や機能などが分かりやすいと思います。 また、XAMPP にはコントロールパネルがあり、各ソフトウェアの起動や停止の他に、設定ファイルへのショートカット機能などが組み込まれています。

目次に戻る

インストール時の流れ

それでは簡単にインストールする時のポイントだけ説明しておきますので参考にして下さい。 なお、説明は Windows の画面で行います。

XAMPPコンポーネント

以下、インストールの流れです。

  1. Select Components :
    どのソフトウェアをインストールするか選択します。 最低でも Apache + MySQL + PHP + phpMyAdmin だけは入れておいた方が良さそうです。 色々とサーバー管理の勉強もしたい方は全部導入しておくと後々良いと思います。

  2. Installation folder :
    インストールするフォルダーはデフォルトが無難だと思います。 ( C:\xampp\ )

  3. Bitnami for XAMPP :
    Bitnami for XAMPP は WordPress 用のパッケージを紹介するサイトを開くかをチェックで選択します。 これは混乱を避けるためにチェックを外しておいても問題ありません。 見てみたい方はチェックしたままでも構いません。

  4. Do you want to start the Control Panel now? :
    インストールが完了したらコントロールパネルを開くか？ という意味です。 なお、XAMPP のコントロールパネルや各ソフトウェアを初めて実行する際には、 OS のセキュリティー機能により、実行を許可するかの問い合わせがあるかもしれませんが、許可することが必要です。

※バージョンによってインストラーの仕様が若干違うかもしれませんが大筋での説明は以上です。

以下の画像は XAMPP のコントロールパネル のイメージです。

XAMPP のコントロールパネル

次のセクションからは、最低限の設定方法を説明していきますので、 XAMPP のコントロールパネルから Apache と MySQL の Start ボタンをクリックして実行しておいて下さい。 なお、XAMPP のコントロールパネルや各ソフトウェアを初めて実行する際には、 OS のセキュリティー機能により、実行を許可するかの問い合わせがあるかもしれませんが、許可することが必要です。

目次に戻る

Apache の設定

これは、サーバーが HTTP 通信でのリクエストに応答するのに必要な設定です。 また、PHP を使う上でも必須です。

これから httpd.conf という名のファイルの一部分を変更するのですが、 念のために httpd.conf ファイルをバックアップしておくことをお勧めします。 ファイルの場所は 以下の通りです。
( XAMPPインストールディレクトリ\apache\conf\httpd.conf )

  1. httpd.conf をテキストエディタで開く :
    XAMPP のコントロールパネルから Config ボタンで開くか、 エクスプローラーから ( XAMPPインストールディレクトリ\apache\conf\httpd.conf ) を開いて下さい。

  2. テキストエディタで 「 DocumentRoot 」 の文字を検索する :
    Windows なら Ctrl キーを押しながら F キーで検索ダイアログが開くはずです。

  3. 以下のコード部分を書き換える :
    DocumentRoot "***"
<Directory "***">
    *** の部分を自分の web ファイルを保存しているフォルダー ( ディレクトリ ) に書き換えて下さい。 以下、書き換えの例です。
    ネットワーク PC 名 での書き換え例:
DocumentRoot "//PCの名前/フォルダ名/フォルダ名/webフォルダ"
<Directory "//PCの名前/*フォルダ名/フォルダ名/webフォルダ">

    PC を 1台だけで利用する場合の書き換え例:
DocumentRoot "C:/フォルダ名/フォルダ名/webフォルダ"
<Directory "C:/フォルダ名/フォルダ名/webフォルダ">

web フォルダまでのパス ( フォルダ階層 ) は ご利用の環境によって異なりますので、ご自身での設定をお願いします。

windows10 ならエクスプローラーで Web ファイルがあるルートディレクトリに移動してからアドレスバーを右クリックして 「 アドレスをテキストとしてコピー 」 でディレクトリパスが取得できるはずです。

また、ネットワークパスを取得する場合はネットワークフォルダから Web ファイルがあるルートディレクトリに移動して、アドレスバーを右クリックして 「 アドレスをテキストとしてコピー 」 でネットワークパスが取得できるはずです。

目次に戻る

MySQL の設定

私が、この記事を書いている時点では XAMPP から MariaDB ( MySQL ) を導入した場合、 全ての権限をもつ root ユーザーにパスワードは設定されていませんでした。

ローカルでの開発環境ですが、 「 念のため 」 というか実際にセキュリティーの効いた状態で開発しないと、 公開したサーバーでは使い物にならないことになりますのでパスワードは設定しておきましょう。

これは XAMPP のコントロールパネルにある shell を使うか windwos のコマンドプロンプトで設定していきます。

rootユーザーのパスワードを設定する
XAMPP の shell を使う方が少し簡単ですが、(ディレクトリ移動の cd コマンドが不要だと思います。) ここでは、コマンドプロンプトを使用して説明していきますので Windows のシステムツールから コマンドプロンプト を起動して下さい。

以下にコマンドを記載しますが、インストールディレクトリの部分はご自分の環境に合わせて書き換えて下さい。 ここでは XAMPP のデフォルトでインストールした場合での説明とさせていただきます。

コマンドプロンプトで root ユーザーに新しいパスワードを設定するには下記のようなコマンドと表示になると思います。 

C:\Users\??? > cd c:\xampp\mysql\bin
c:\xampp\mysql\bin > mysqladmin -u root password
New password: **********
Confirm new password: **********

********** の部分に任意のパスワードを設定して下さい。 ********** の部分が2箇所ありますが、入力に間違いないかを確認する為に 2回同じパスワードを打つ必要があります。以上です。

コマンドプロンプトで MySQL にログインする
root ユーザーは MySQL に対して全ての権限を与えられたユーザーです。
その為、root ユーザーはネットワーク上の別のパソコンからのログインが禁止されていますので MySQL がインストールしてあるパソコン上で直接ログインを行って下さい。

ネットワーク経由でログインするには新しいユーザーを作成して権限設定を行う必要があります。
権限設定については、 GRANT (権限の付与) を参照してください。

下記のコードは XAMPP をデフォルトの C:\xampp にインストールしている場合のコードです。 違うディレクトリにインストールされている方はディレクトリパスを置き換えて下さい。 コマンドプロンプトでログインするときは下記のようなコマンドと表示になると思います。 

C:\Users\??? > cd c:\xampp\mysql\bin
c:\xampp\mysql\bin > mysql -u root -p
Enter password: ここにパスワードを入力

ログインに成功すると 「 Welcome to the MariaDB..... MariaDB [(none)]> 」 と表示されます。

以下のサンプルコードについての補足
これ以下のサンプルコードは SQL になりますが、分かりやすくする為に SQL の予約句はアルファベット大文字を使用しています。 実際の入力は小文字で入力できますので、全て小文字の方が間違えにくいかもしれません。

MySQL 5.67 以前で root ユーザーのパスワードを変更する場合 (補足的に書いていますが、多分使わないです)
現行バージョンでは PASSWORD 関数は廃止になっていると思われますが一応書いておきます。 以下は既に MySQL にログイン済みの状態からのクエリになります。 コマンドプロンプトで変更するときは下記のようなコマンドと表示になると思います。 

mysql > USE mysql;
mysql > UPDATE mysql.user SET password=PASSWORD('新しいパスワード') WHERE user='root';
mysql > FLUSH PRIVILEGES;

MySQL8 以上で root ユーザーのパスワードを変更する場合 (普通はこちらで OK だと思います)
以下は既に MySQL にログイン済みの状態からのクエリになります。 コマンドプロンプトで変更するときは下記のようなコマンドになると思います。 

mysql > USE mysql;
mysql > ALTER USER 'root'@'localhost' IDENTIFIED BY '新しいパスワード';

目次に戻る

サーバーの IP アドレスを固定する

ローカルサーバーの IP アドレスを固定することによってローカルドメインの代わりにします。 弊サイトのドメインは ywork2020.com ですが、ローカルな開発環境ではローカル IP アドレスを使用してサーバーに接続します。

その為にサーバーとして利用するパソコンの IP アドレスを固定する必要がありますので設定しておきましょう。

以下、windows10 での説明です。下記の手順でウィンドウを開いていって下さい。

  1. コントロールパネル
  2. ネットワークとインターネット
  3. ネットワークと共有センター
  4. イーサネット
  5. プロパティ
IPアドレスの固定方法

インターネット プロトコル バージョン4(TCP/IPv4)を選択してプロパティをクリックすると以下のウィンドウが開くはずです。

TCP/IPv4の設定

次の IP アドレスを使うを選択して設定して下さい。
青いマーカー部分 が、お使いのルーター等のアドレス番号です。 ( ルーターのメーカーによって初期値が違います )
赤いマーカー部分 が、任意で決めていただけるパソコンの番号です。 ( 通常は 1 ~ 255 の範囲だと思いますが、ルーターの設定範囲によります )
下段の DNS サーバーの設定は自動取得するで OK です。著者のパソコンがグーグルの DNS サーバーを使うように設定してあるだけですので関係ありません。 以上です。

このページの Apacheの設定 で
DocumentRoot "***"
<Directory "***">
に設定されたディレクトリに、ご自分で作成された index.html ファイルを配置した上でブラウザからアクセス出来れば完了です。
ルーター番号 = 10 , パソコンの番号 = 20 の場合はブラウザのアドレスに http://192.168.10.20/ と入力してアクセスしてみて下さい。

目次に戻る