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

スポンサードリンク

関連コンテンツ

オススメ記事

Android Studio

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

前回、 Android Studio のインストールが完了しました。 その続きから始めていきましょう。 今回は新規プロジェクトを作成する方法です。 新規プロジェクトの作成 それ

webpackでSass(SCSS)をCSSにコンパイルする最もシンプルな方法

webpackを使うと、JavaScriptをまとめることができて便利です。しかし、webpackにはたくさんの機能があり、パッケージをインストールすることで、様々な機能が使えるようになります。

リセットCSS は何を使う? おすすめ8選(コピペも可能!)

Web開発でブラウザごとの表示の違いをリセットしてくれる リセットCSS というものがあります。 しかし、何を使っていいのかと感じている人もいると思います。 今回はこの リセットCSS につい

GitHubのアカウントを作成する方法

Gitを使うとバージョン管理が簡単になりますが、それ以前に自分の頭の中を管理するのが大変な@It_is_Rです。 Gitの使い方をいくつかの記事に分けて紹介していきたいと思います。まず今回はG

zsh

zsh のインストール方法と、うまく起動しない時の対処法。

かっこいいものが大好きな@It_is_Rです。 そこで今回は、ターミナルをかっこよくする為の方法を、何回かの記事に分けて書いてみたいと思います。 今回、第一回目は zsh ( Z Shell

【Unity】開発したiOSゲームをiPhoneで実機テストする方法

こんにちは。現在、最新ゲーム熱意製作中の@It_is_Rです。個人での開発はとても大変で、時間がかかってしまっていますが、すこしずつ形にしていっています。 さて、今回はUnityで開発したiO

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

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

【Android Studio】TextView 文字の色やサイズ、書体を変更する方法。

サイズは大きいほど、押しがいがあります。@It_is_Rです。 スマホのボタンの話ですよ。何を考えてたんですか? Androidアプリ開発、8回目となりました。 今回はこれまでに学習した T

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

プログラミングは奥が深い。。。@It_is_Rです。 Flashがスマホから使えなくなり、多くのサイトにHTML5が使われ、WEB開発で、JavaScriptは必須といっても過言ではありません

Yarn

Yarn の使い方。インストールの方法から使い方まで解説します。

最近ドラクエにはまっている@It_is_Rです。PS1 のやつです。ドラクエⅦ。 関係ない話はさておき、今回は Yarn の使い方を解説していきたいと思います。 Yarn とは

コメントをどうぞ!(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です