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

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

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

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

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

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

目次
  1. 実際の状況
  2. ターミナルでのディレクトリ移動について
  3. phpコマンドを使う方法
  4. pythonコマンドを使う方法
  5. live-serverを使う方法
  6. まとめ

実際の状況

例えば、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サーバを立ち上げる方法を紹介しました。
とても簡単にできる方法なので、気になった方はぜひやってみてください。

スポンサードリンク

関連コンテンツ

オススメ記事

【webpack 4】npm-scriptsでオリジナルのコマンドを設定する方法

※追記(2018/5/15) 殆ど意味のない例を使っての説明にのちのち後悔し、余分な部分を大幅に削除しました。 畳んだ布団が飼い猫のお気に入りの場所になってます。@It_is_Rです。

【Gitの使い方 – その3】Gitで実際にバージョン管理してみよう!

お魚くわえた@It_is_Rです。 Gitの使い方第3回目の今回は、実際にGitを使ってバージョン管理をしてみようと思います。 [serif name="It is R"]りこ師匠

宇宙一分かりやすい JavaScript のかなり詳しい基本の解説。

宇宙一分かりやすい JavaScript のかなり詳しい基本の解説。

JavaScriptを使ってゲームを作成するのが好きです。@It_is_Rです。 JavaScriptはWebページに動きを出すのによく使われ、ブラウザゲームなども作ることができます。 今回は

zplug を使ってプラグインをインストール、管理する。

二つのことを同時にできない、@It_is_Rです。 今回はターミナルをかっこよくするシリーズ、第三回目です。 zplug を使って、プラグインをインストールする方法を紹介します。

ファイルを分けるべよ!

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

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

【 Bootstrap 4 】全体的な機能の解説と、Alert の使い方。

頭がお花畑の@It_is_Rです。 今回からは Bootstrap 4 の使い方について、詳しく書いていこうと思います。 このシリーズの、前回の記事はこちらです。 Bootstrap 4 を

WordPress テーマ自作 | Pug ( Jade ) で記事一覧ページを作る方法!

愛と勇気だけが友達の@It_is_Rです。 今回はPugでWordPressテーマを作る方法を少し紹介します。 詳しいテーマの作り方はこちらをご覧ください。 WordPressのテーマを自作

文字を一文字ずつ表示してみよう!

小学生からのJavaScript。改行と一文字ずつ画面に表示する方法!

小学生からのJavaScript講座です。 このシリーズでは、ゲームをつくりながらJavaScriptの使い方を学んでいきます。 前回、画面に文字を表示するためのクラスを作ったのですが、それを

【Android Studio】 GridLayout の使い方。複雑なレイアウトを表現する方法

スマホの充電がいつの間にか無くなっている@It_is_Rです。 Androidアプリ開発、10回目となりました。 前回、様々なレイアウトの使い方を紹介しましたが、今回はその中でもちょっと難しい

【Xcode7】Swift2でMacアプリ開発。画像を読み込む為のボタンを作る。

犬も歩けば棒にあたる。だからRは歩かない。@It_is_Rです。 最近はSwiftの記事が多いと思っている人もいるのでは無いでしょうか。実はRは現在、Swiftを使ってゲーム開発のお助けアプリを

コメントをどうぞ!

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