1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. ターミナル
  6. »
  7. 【Mac】ローカルにWebサーバを立ち上げる超簡単な方法!

【Mac】ローカルにWebサーバを立ち上げる超簡単な方法!

JavaScriptを使ってWebページなどの開発をしていると、Google ChromeやSafariなどのブラウザでうまく開けない場合が稀にあります。
そんな時、ローカルにWebサーバを立ち上げて実行することで、うまく読み込まれる場合があります。

また、JavaScriptを使ったブラウザゲームなどを開発している場合、ローカルの環境ではうまく動作していたものが、サーバ上に保存したらうまく動作しなくなったという場合もありますので、実際にサーバを立ち上げて動作チェックを行なった方が懸命です。

そこで、今回はローカルにWebサーバを簡易的に立ち上げる方法を紹介します。

今回はMacでGoogle Chromeを使用した場合を例に、紹介していきたいと思います。

実際の状況

例えば、JacaScriptでコードを書いて、そのコードは間違っておらず、HTMLからもちゃんと呼び出したにも関わらず、画面が真っ白になる場合があります。

デベロッパーツールのConsoleを見てみると、このように表示されています。

Failed to load file:///xxxx/xxxx.js: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

今回の方法はこのような状況になった場合に有効な方法です。

ターミナルでのディレクトリ移動について

実際にサーバを立ち上げる前に、ターミナルでのディレクトリ移動を紹介します。

このあと紹介するサーバを立ち上げる方法は、ターミナルを使って行ないます。
今現在Webサイトを作成している場合、そのWebサイトのフォルダを作って、その中で作成していると思います。
サーバを立ち上げるには、そのディレクトリ(フォルダ)に移動して、コマンドを実行してあげる必要があります。

では、ディレクトリ(フォルダ)の移動方法です。
移動にはcdというコマンドを使います。

$ cd xxx/xxx/xxx/webサイトのフォルダ

このように、そのフォルダまでの場所を入力しますが、これを簡単に行なう方法があります。
ターミナル

cd 」と入力した後に、フォルダをターミナルに向かってドラッグするのです。
そうすることで、そのフォルダまでのパスが自動的に入力されます。(cdの後ろには半角スペースが必要)

phpコマンドを使う方法

phpコマンドを使ってローカルにサーバを立てる方法です。
ターミナルに以下のコマンドを入力してください。

$ php -S localhost:8080

その後、http://localhost:8080にアクセスすることにより、index.htmlやindex.phpが読み込まれます。

この方法ですと、index.phpファイルなどのPHP形式のファイルをブラウザで開くこともできます。

pythonコマンドを使う方法

次にpythonコマンドを使う方法を見ていきましょう。
ターミナルに以下のコマンドを入力します。

$ python -m SimpleHTTPServer 8080

その後、http://localhost:8080にアクセスすることにより、index.htmlが読み込まれます。

先ほどの方法だとPHP形式のファイルを開くことができたのに対し、この方法ではPHPには対応しておりません。

live-serverを使う方法

node(npm)がインストールされている場合、live-serverをインストールしてローカルWebサーバを立ち上げることができます。

$ npm init -y
$ npm install live-server
$ live-server
Serving "xxxx" at http://127.0.0.1:8080

その後、atの後に表示されたurl(今回であればhttp://127.0.0.1:8080)にアクセスすることで、index.htmlが読み込まれます。

この方法も同様にPHPには対応しておりません。

まとめ

JavaScriptなどを扱っていると、コードは間違っていないにも関わらず、ブラウザでうまく読み込めない場合があります。
また、ローカルとサーバ上では動きが異なってくる場合もあります。

そんな時の解決方法として、ローカルにサーバを立ち上げるという方法があります。
今回はそんな時に役立つ、超簡単にローカルにWebサーバを立ち上げる方法を紹介しました。
とても簡単にできる方法なので、気になった方はぜひやってみてください。

スポンサードリンク

関連コンテンツ

オススメ記事

ファイルを分けるべよ!

小学生からのJavaScript入門。ファイルを分けて管理してみよう!

小学生からのJavaScript入門講座(にゅうもんこうざ)、第5弾です。 前回はりこちゃんを方向キーで操作(そうさ)することができるようになりました。 しかしプログラムを作ってくと、コンピュ

【Android Studio】新規プロジェクトを作成する方法。

インスタント焼きそばを作ろうとすると、なぜか焼うどんになります。 @It_is_R です。 しかも、ラーメン作ろうと思うと焼きそばができあがります。 前回、 Android Studio のイ

【Gitの使い方 – その2】GitをMacにインストールする方法!

いらないファイルは残っているのに、欲しいファイルに限って見つからない@It_is_Rです。 Gitの使い方、第2回目の今回はGitをMacにインストールする方法を紹介します。

【Android Studio】Button(ボタン)を作る基本中の基本。

ボタンを作る基本中の基本ですが、ボタンを作ること自体が基本中の基本です。@It_is_Rです。 タイトルなんてどうだっていいんです。肝心のなのは真心です。 Androidアプリ開発、7回目とな

キャラを決まった間隔ずつ動かすよ!

小学生からのJavaScript入門。キャラを決まった間隔ずつ動かす!

小学生からのプログラミング入門講座(にゅうもんこうざ)、第8弾です。 前回は、キャラクターの画像(がぞう)をスムーズに動かす方法でしたが、スピードが速すぎたので、画像の移動間隔(かんかく)を短く

CSS Button

サイト制作に!!CSSでマウスオーバーボタンの作り方。

新年初の記事です。とりあえず、あけましておめでとうございます。@It_is_Rです。 お正月……おそーがつ……おそまつ……おそ松さん。新年早々くだらないこと言ってないで早く記事を書けって話ですね。

キャラクター

JavaScriptマンガ風講座。初心者でも絶対に理解できる入門編!!

プログラミングは奥が深い。。。@It_is_Rです。 Flashがスマホから使えなくなり、多くのサイトにHTML5が使われ、ブラウザ上でのアニメーションはJavaScriptが多く使われるように

WordPress のテーマ開発に絶対必須な gulp プラグイン9選!

3Dゲームに酔ってしまう@It_is_Rです。 WordPress テーマ自作シリーズ、第2回目です。 今回は、テーマを自作するのに必須な gulp プラグインの紹介と使い方について書いていき

今月の残り日数を計算するべ!

小学生からのJavaScript入門。今月の残り日数を計算してみよう!

小学生からのJavaScript入門、第2弾です。 今回はJavaScriptでの演算(えんざん)の方法を学び、今月の残り日数を計算してみましょう。 演算というのは、足したり、引いたり、割った

WordPressカスタムヘッダーを完璧に使いこなしたい人へ告ぐ!

森の中に昔から住んでる@It_is_Rです。 WordPressのカスタマイズをする上で、カスタムヘッダーを使うと、色やヘッダー画像をWordPressの管理画面から操作できるようになり便利です

コメントをどうぞ!

メールアドレスが公開されることはありません。