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

スポンサードリンク

関連コンテンツ

オススメ記事

.zshrc で zsh をカスタマイズしてみよう。(プラグイン無し)

昔、車に幽霊が乗っていたので、じっと目を凝らして見ていたら、ただの人だったことがあります。@It_is_Rです。 あの時は気まずかった。。。女性の方でした。 さて、今回はターミナルをかっこよく

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。ヘッダーをカスタマイズ。

寒くなってきましたね。皆さま前かがみになって、まるで亀の様です。@It_is_Rです。 皆様がブログを見て、一番最初に目に入ってくるのはどこでしょうか? 殆どの場合、ヘッダー部分ですよね。つま

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

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

JavaScriptマンガ講座。条件分岐(if文)の真偽値による使い方。(実践編)

生まれも育ちもド田舎、@It_is_Rです。 JavaScriptマンガ講座、第3回目です。 笑いあり、涙あり(?)のマンガで、JavaScriptを覚えようというものです。 今回は条件

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

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

クイックタグ

【WordPress】クイックタグを編集し効率よく記事を書こう!

WordPressで記事を投稿するとき、クイックタグを使うと便利です。 デフォルトで用意されているクイックタグもありますが、それだけでは少々不便なところもあります。 今回は効率よく記事を書くた

【Android Studio】レイアウト( Layout )の種類を覚えよう!

服に膝を入れるのが癖です。@It_is_Rです。 Androidアプリ開発、9回目となりました。 さて今回は、ボタンやテキストのレイアウトを整える方法を、解説していきたいと思います。

【Android Studio】開発したアプリの実機テストを行う方法。

どうも、頭がすっからかんの@It_is_Rです。 やかましいわ。 今回は Android Studio で実機テストする方法を紹介します。 これからアプリ開発をしていく上で必要不可欠な実機テ

HTML CSS

CSSで文字を、円の上下左右中央ド真ん中に表示する方法。

体重が50キロを切りました。@It_is_Rです。身長は171あります。 骨っていうなー! サイトを作る時、円形のパーツを作りたい時ってよくありますよね。画像を丸くして。。。なんてやっている人

Swift

【Xcode7】Swift2でMacアプリ開発。Storyboardでボタンを作る。

喧嘩するほど仲がいいとは言いますが、喧嘩する相手がいません。友達がいないということでしょうか。@It_is_Rです。 前回、StoryboardでMacのウィンドウに文字を表示しました。しかし、

コメントをどうぞ!

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