HP・ブログ関連 テクノロジー関連

[XAMPP] PC内のローカル環境にサーバーを構築しサイトを確認する方法

更新日:

サイトをネットで公開する前に自身のローカルサーバーで確認したい、という時に役立つ「XAMPP」というソフトの導入方法と使い方について分かり易く解説します!

XAMPPとはWebアプリケーションを開発するためのツールを無料で一括インストールすることのできるソフトです。

このソフトを用いることで以下の利点があります。

  • PC内にローカルサーバーが構築できる
  • ローカルサーバー内に作業中のサイトをアップすることで、デザインの確認やphp等の動作確認をスムーズに行うことができる
  • オフライン環境でも使用できるため、インターネット環境が無くてもWordpressなどの管理が行える

XAMPPのダウンロード

Apache Friends.org

上記のサイトにアクセスし、ページ上部の "ダウンロード" ボタンからダウンロードページへ飛び、 使用しているOSに対応している最新バージョンのXAMPPをダウンロードしてください。

※ Windows版は32bitと書かれたものしかありませんが、64bitOSでも動くので問題ありません。

XAMPPのインストール

次にソフトのインストールを行います。

先程ダウンロードした.exeファイルを起動してください。

※PCにセキュリティソフトの類が入っている場合は以下のようなウィンドウが表示されますが、構わず "Yes" を選択してください。

"Next" を押していくと以下のような画面が出ます。ここはすべてチェックを入れたままで"Next" をクリック。

次にインストール先を決定します。インストール先のパスが画像のようにC直下になっているのを確認して "Next"。

次の画面で 「Learn more about Bitnami for XAMPP」 と書かれたチェックボックスが出てきますが、 今回はチェックせずに "Next" へ。

 

以上の過程を終えるとインストールが始まります。

インストール終了後、"Finish" をクリックしてインストーラを閉じ、XAMPPを起動してください。

XAMPPの動作確認

次にXAMPPがキチンと動作するかの確認を行います。

XAMPPを起動すると以下のような画面が出現すると思います。

ローカルサーバーを構築するためには、上2つの "Apache" と ""MySQL" を起動する必要があります。

それぞれの右側にある "Start" ボタンを押し、画像のようにApacheとMySQLが緑色になれば準備は完了です。

ApacheとMySQLの起動に成功したらプラウザを開き、アドレス欄に localhost と入力してください。

無事XAMPPのページが開かれればローカルサーバーの構築は成功です。

エラーがでた場合(原因①)

XAMPPを起動する際にエラーが出てApacheが起動しないという場合が多々あります。

その原因と解決方法について解説します。

まず原因の一つ目として考えられるのは、ポート番号の重複です。

XAMPPはポート番号80を使用するのですが、他のソフトが同じポートを使用している可能性があります。

この場合、XAMPP画面の右側にある "Netstat" をクリックし、ポート番号80が他のソフトに使われてる場合は該当ソフトを停止させるか、 別ポートを割り振ってください。

エラーがでた場合(原因②)

実はみんな大好きSkypeもポート80を使用している可能性があります。

Skypeをインストールしている場合、Skypeの「ツール」→「設定」の画面に入り、「詳細」タブの「接続」を選び、

 

"上記のポートに代わり、ポート80と443を使用"

 

と書かれたチェックを外して "保存" をクリックしてください。

エラーがでた場合(原因③)

上記2つの原因に当てはまらない & Windowsをお使いの方は、「コントロールパネル」→「プログラム」→「プログラムと機能」の ウィンドウの左側にある「Windowsの機能の有効化または無効化」をクリックして開いてください。

そして「インターネット インフォメーション サービス」のタブ内にある "World Wide Webサービス" のチェックを外してください。

以上3つの原因と解決法について解説させて頂きました。

もしこれでも解決できない場合、対処法についてより詳しくまとめた記事を投稿したので、是非参考にしてみてください。

[XAMPP]エラーが出てApacheが起動しない場合の対処方法まとめ

自サイトをローカルサーバー上へアップする

次に自分のサイトをローカルサーバー上にアップします。

HTMLサイトの場合

HTMLベースのサイトの場合、XAMPPをインストールした「C:\xampp」の中の「htdocs」というファイルを開き、 中にあるファイルをすべて削除し、代わりにindex.htmlを筆頭とした自分のサイトコンテンツのファイルをすべて配置してください。

※この時、".htaccess" ファイルも一緒に配置すると、記述内容によってはローカルサーバー上で正常に動作しない可能性があるので、 できれは ".htaccess" は出しておいてください。

 

配置後、同じようにプラウザのアドレス欄に "localhost" と入力し、自分のサイトが現れればローカルサーバーへのアップロードは完了です。

WordPressサイトの場合

WordPressサイトをローカルサーバーへアップする際の作業工程に関しては既に以下のサイトさんで紹介されているので、 そちらをご覧ください。

WordPressをローカルにインストール - BitNami for XAMPP

 

長くなってしまいましたが、以上でXAMPPでのローカルサーバー構築方法の解説を終わります

ローカルサーバーを構築すると作業効率がグンッと上がるので、是非皆さんもXAMPPを利用してみてくださいね!( ´∀`)

-HP・ブログ関連, テクノロジー関連
-, , , , , , , , ,

Copyright© ふかふか交易所 , 2019 All Rights Reserved.