ローカル環境にXAMPPをインストールしてサイト構築する方法

Webサイトを構築するためにはレンタルサーバーの契約が必要ですが
XAMPP を利用することで ローカル環境でサイトの構築をすることができます。

XAMPPとは…!?

XAMPP (ザンプ)とは Webサイト構築のために必要な
サーバーやデーターベースなどを一つにパッケージ化されたもので
ローカル環境でサイトの開発ができる とても便利なアプリケーションなのです。

Apache・MariaDB(旧はMySQL)・PHP・Perlのイニシャルの頭文字から
Windows では XAMPP  Macでは MAMP(マンプ)呼ばれています。

Mac を利用されている方は MAMPをインストールしてご利用ください。
MAMP のダウンロードはこちらのサイトからできます。 ↓

XAMPPのインストールからセキュリティ設定まで

サイトの構築をするところまでの設定には たくさんの項目があります。
初心者の方には少し難しい内容もありますが
あせらずにゆっくり設定していきましょう。^^

Xamppのインストールの手順

XAMPPのダウンロード画面 Windows向けのXAMPPをダウンロードしていきます。
https://www.apachefriends.org/jp/index.html

追記:現在の Windows 向け 最新バージョン 7.1.33 / PHP 7.1.33 です。

① こちらの画面から Windows向けXAMPP をダウンロードし
パソコンにインストールしていきます。
注意喚起の表示のあとにこちらの画面が表示されます。

XAMPPのsetupを始めます。
② setup-XAMPP  Next > をクリック

インストールするコンポーネントの選択です。WordPressの場合、apache/MySQL/PHP/phpMyAdminの4項目です。
③ Select Components   インストールするコンポーネントです。
WordPressで使用する項目は4つです。
他のものは チェックをはずしてもらっても構いません。

Apache(アパッチ) Webサーバーソフトウェア
MySQL(マイ・エスキューエル)データベース管理システム
php(ピーエイチピー) WordPress で使用するプログラミング言語です。
phpMyAdmin(ピーエイチピー マイ アドミン) データベースの管理画面
コントロールパネルからApacheとMySQLを起動させていきます。
④ インストールフォルダの選択
C:¥xamppのままで OKですが、後々使用するフォルダですので
どこにあるのか覚えておきましょう。

XAMPPアプリケーションサイトを開けるかどうかのチェックです。
⑤ XAMPPアプリケーションサイトを開けるかどうかのチェックです。
こちらは基本的に使用しませんので チェックは外してもらって 問題ありません。

⑥ Next> をクリックするとインストールを開始します。
数分かかる場合がありますのでお待ちください。

インストール終了画面。XAMPPコントロール画面へ進みます。
⑦ インストール終了画面です。
こちらのチェックはコントロール画面の起動させるか聞いています。
Finish をクリックして XAMPPの 初期設定と動作確認 に進みます。

XAMPP Control Panel  の設定

XAMPPで使用する言語の選択=英語orドイツ語
言語の選択はどちらか利用しやすい方でSaveをクリック
あとの解説画面は英語の方になります。

phpMyAdmin-ログイン画面
こちらがコントロール画面です。
始めに Apache の Startボタンをクリックします。
Apacheの起動スタート
起動が始まり Apache の文字の背景が黄色になり 正常に作動したら薄い緑色に変わります。

エラー表示が出た場合

まれに正常に起動できずに 画面下エラー表示されるケースがあります。

Port(s) 80,443 というのが apacheで使用されるポート番号ですが
Skype  などを利用しておられる方は
このポート番号をSkypeが使用している場合があります。
これが原因でエラー表示されてしまっている場合
Skype のポート番号を変更すれば 解決します。

また、必要なファイルが 正常にインストール出来ていないケースがあります。
インストールをやり直すことで 解決する場合がありますが
私の場合、インストールでもだめで ダウンロードからやり直して解決したことがあります。
Apache とMySQL の起動が正常に行われた画面
無事 Apache が起動できたら MySQL  のStartボタンをクリックし起動させます。
こちらも緑色に変わりましたら これで無事起動できました。
ローカル環境でサイト作成をする場合、
この状態でWordPressの画面を開くことが出来ます。

ローカル環境でWordPressを動作させるためには

Apache と MySQL  を毎回 起動させる必要がありますので
コントロール画面はすぐに使用できるようにタスクバーなどに固定するなど
分かりやすい場所においておくと便利です。

apache MySQL の動作確認

startボタンの横の Adminのボタンをクリックして
apache MySQL が正常に動作しているかの確認をしていきます。
apacheのAdmin画面
apache Admin画面

MySQLのAdmin PHPMyAdmin管理画面
phpMyAdmin管理画面
こちらの画面が無事表示できましたら 正常に動作している証拠です。

phpMyAdminの画面が 英語表記になっている場合は
中央にあります 外観の設定の言語(Language)から日本語表記に変更できます。

データベース セキュリティの設定について

初期設定では データベースの セキュリティ設定がされていない状態 なので
MySQL の Admin をクリックするとすぐに phpMyAdmin の画面に移動できます。

ですが、セキュリティ設定されていない場合 ネットワーク経由で外部から
アクセス可能な状態となってしまっているのです。
悪意のあるプログラムなどからの攻撃を受ける可能性がありますので
ローカル環境であっても 設定しておくことをおすすめします。

セキュリティの設定をするためには データベースの情報を
書き換える必要がありますので順に説明していきます。

MySQL データベース パスワードの設定

セキュリティ設定-Shell
まず XAMPPのコントロール画面のShellボタンをクリックして頂き
コマンドプロント画面を開きます。
セキュリティ設定の変更をコマンドプロント画面から行います。
このような黒い画面が出てきます。
この文章の最後の  の後に続いて入力していきます。
文字列がズレるだけでも エラーになりますので
コード内を コピペで入力していただいた方が簡単です。
コマンドプロント-ユーザーネーム画面
cd mysql\bin  を 入力し Enter を押します。

コマンドプロント画面-ユーザーネームを指定
次に mysql -u root   を 入力し Enter を押します。

コマンドプロント画面-passwordの指定
set password=password('your_password');
ここでパスワードの設定になります。
ここでは この (‘your_password’) のままで Enter を押していますが
(”) この部分に さきほど設定したパスワードを入力し Enter を押してください。

セキュリティ設定の変更をコマンドプロント画面から行います。
Query OK, で正常に変更できました。という表示になります。
データベースの変更はこれで終了です。

quit と入力して Enter で 元の画面に戻ってきました。
右上の✖で閉じるか exit と入力して Enter を押すことでも
画面を閉じることができます。

phpMyAdmin  ログイン画面の設定

もう一度 XAMPPコントロールパネル から MySQLのAdminをクリックしてみます。
phpMyAdminの画面確認
MYSQLのパスワードの設定をしたことで 先ほど開けることができた
phpMyAdminに入れずにエラー表示が出てきました。

これは 先ほど設定した パスワードを phpMyAdminの方にも設定してあげることで解決します。
書き換えは phpMyAdmin フォルダの中の confing.inc.php ファイルになります。
phpファイル-セキュリティ設定の画面
画像上部のタブに表示されているのが phpMyAdminのフォルダ が保存されている場所です。
ローカルディスク C:\ XAMPP \phpMyAdmin \confing.inc.php
というファイルを開いた画面がこちらの画像です。

こちらのテキスト画面は…

sublime Text( サブライムテキスト )という
エディタで表示した画面になります。カラーで表示することが出来るので
書き換えたいところがわかりやすくとても便利です。

テキストエディタがなくても お使いのエクセルでもメモ帳機能でも
編集は可能ですが機能的にもあると便利です!!

詳しくはこちら↓
SublimeText インストールと日本語変換のしかた

話を戻して...
上記の画像の赤で囲んである場所の設定変更です。

[‘auth_type’] = 認証タイプの設定 ですが
ファイルには パスワードを書き込まずにログイン認証にします。
ログイン認証にするためには ”cookie”と入力し
あとの  [‘user’]  [‘password’] は空欄にしたままで 保存して終了します。
phpファイルへセキュリティ再設定
これで 設定が終了しました。
ログイン画面が表示されるか確認してみましょう。
XAMPPのコントロールパネルの MySQL の Admin をクリックで
この画面が表示されればOKです。

phpMyAdmin-ログイン画面
ユーザー名は”root
パスワードは先ほど設定したパスワードでログインできるはずです。
これで セキュリティ設定終了です。お疲れ様でした。^^

 

こちらのインストールの手順は
私のサイト作成の際に参考にさせていただいたサイトさまです。
ありがとうございました。

参考サイト:XAMPPセキュリティの設定~データーベース(phpAdmin)編~

ログインできましたら ようやく WordPress のダウンロードです。