葉っぱのメモ帳

フリーランスなフロントエンドエンジニアの備忘録

XAMPPでローカル環境を構築してバーチャルホストを設定する

2018.02.27 2021.07.12

いまさら感満載ですがこれも記録。やっぱりローカル環境が欲しくなったのでXAMPPを使用してローカル環境を作ってみました。

XAMPPを導入する

XAMPPとは?

XAMPP(ザンプ)とはは簡単に言ってしまえばWEB開発環境をローカルで構築するためのアレやらコレやらがまとめて入っているパッケージソフトです。
具体的に私に今必要なのはApach(Webサーバ)とPHP(言語)とMySQL(データベース)です。

公式サイトからダウンロード

さっそくXAMPPの公式サイトからインストーラをダウンロードしてきます。

それぞれのOSに合わせてダウンロードしてください。ここでは基本的にWindowsで話を進めていきます。

XAMPPをインストール

インストール自体はとても簡単です。解説しているサイトはたくさんありますのでサクっと行ってしまいましょう。

セキュリティソフトが入っているとうまくいかないかもしれないよってこと。Yesでどうぞ。
こちらもインストールの注意のようです。通常は初期設定でインストールしますのでそのままOKで大丈夫です。

さくさくとNext

最低限必要なものはこの4つです。必要なものにチェックを入れてNext。

インストール先の指定です。こちらも特に何もなければそのまま次へ進みます。

Bitnamiに関する紹介です。不要ならチェックを外します。

インストールが始まります。コーヒーでも飲んでしばらくお待ちください。

終わったらコントロール画面を表示するかどうかのチェックを入れてFinish!

Apacheが動作しているか確認

コントロール画面が起動するとこんな感じになります。

ApacheとMySQLをスタートさせてみましょう。
こんな感じになれば無事Apachが起動しMySQLが動作している状態です。ここでエラーが出ることもあるようですがここでは割愛します。

バーチャルホストの設定をしてみた

通常ここからサイト制作などを始めるにあたって使用するフォルダはC:\xampp\htdocsとなり、ローカルのアドレスはhttp://localhost/となります。もちろんそれでも問題はないのですが、私のパソコン、SSDなもんでこれからガシガシやっていくとなるとあまりCドライブに色々入れたくないんですよね…。ということでバーチャルホストを設定してみることにしました。

バーチャルホストとは?

バーチャルホストとは1つのサーバで仮想的に複数のドメインを管理できる技術です。設定に関してはこちらを参考にさせていただきました。

https://qiita.com/nbkn/items/e72b283c54403a30b2e1

フォルダのパスとドメインの設定

C:\xampp\apache\conf\extra\httpd-vhosts.confをテキストエディタで開きます。20行目にある

##NameVirtualHost *:80

というところの##(コメント)を外し、さらに追加。

NameVirtualHost *:80
<VirtualHost *:80>
    DocumentRoot "D:\htdocs\example"
    ServerName localexample
</VirtualHost>
<Directory "D:\htdocs\example">
    Options Indexes
    AllowOverride All
    Require all granted
</Directory>

DocutentRoot でドキュメントのパスの指定をします。好きなところで大丈夫です。
ServerName でドメインの指定をします。好きな名前でOKです。
その下のDirectoryではアクセスの権限の指定をしています。
これにさらに次の設定をします。

hostsを書き換える

C:\Windows\System32\drivers\etc\hostsを同じくテキストエディタで開くのですが、管理者権限でないと編集できませんので、テキストエディタを管理者権限で実行してください。通常はテキストエディタのアイコンの上で右クリック→「管理者として実行」で実行させればOKです。

開いたら一番下に次のように足します。

127.0.0.1       localexample

Apachが起動中だった場合は一度停止させてから再起動してください。これでブラウザでhttp://localexample/を開くとD:\htdocs\exampleが開くようになります。ためしに何かHTMLファイルでも置いて確認してみましょう。

このバーチャルホストはhttpd-vhosts.confhostsにさらに足すことで増やせます。元々のルートドキュメントのhttp://localhost/も使用したいのでそちらを足しておくといいと思います。私は結局「元々のlocalhost」「自分のサイト用」「仕事用」の3つのホストを用意しました。今のところ。ここまででローカル環境の準備はOKです。

ということ次回は作ったバーチャルホストにWordpressを導入してみます。

サポートよろしくお願いします

この記事を気に入って下さった方、応援してもいいという方、サポートしていただけると嬉しいです。

Amazonほしいものリスト Amazonギフト券をメールで送る

※受取人のEメールアドレスに とご入力ください。
※上記のアドレスはギフト受け取り専用です。

書いた人

トップへ