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】 GridLayout の使い方。複雑なレイアウトを表現する方法

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

WordPressのテーマを自作してみよう。テーマ開発の方法を徹底解説!

WordPressテーマの自作方法を紹介していきます。 今回はテーマ作成における知識や、ツール、ファイル構成、実際の作り方などを書いていきます。 WordPressのテーマを自作する上

Node.js

Windows10にNode.jsをインストールする方法

みなさんこんにちは。@It_is_Rです。今回は、Windows10にNode.jsをインストールする方法を紹介していきます。 また、Macを使っている場合は「MacにNode.jsをインスト

【初心者向け】webpack 4入門。一番簡単で詳しい使い方

風邪をひいてぼんやりしている@It_is_Rです。どちらにしろいつもぼんやりしてますが。 さて、今回はWebpack4について紹介していきたいと思います。 この記事では、jsファイルをビルドす

Android StudioをMacにインストールする方法

Android Studioを使って、Androidアプリ開発を行っていきましょう! 今回は Android Studioをインストールする手順を解説します。 Android Studio

Bootstrap 4 を読み込む為の方法を徹底解説。パッケージマネージャーなど。

今回は Bootstrap 4 の使い方です。It_is_Rです。 では詳しくみていきましょう。 Bootstrap とは Bootstrap は Webサイトを制作するときに使う、

おみくじゲームを作るべ!

JavaScriptでおみくじを作ろう! 小学生からのプログラミング入門

さて、今日も楽しく、プログラミングを学んでいきましょう!今回はなんと、プログラミングでおみくじゲームを作ってみます。 そして今回から、Scratch(スクラッチ)より、少しレベルアップして、J

【Android Studio】TextView を使ってテキストを変更、追加する方法。

TextViewの文字列を変更するより、これまでの人生を変更したい@It_is_Rです。 Android Studioを使ったアプリ開発講座6回目です。 今回はアプリに表示されたテキストを変更

wordpress

WordPress – デフォルトで用意されたショートコード一覧と使い方。

昔は WordPress の画面が真っ白になって、頭も真っ白になったこともありました。@It_is_Rです。 WordPress では、プラグインを使ったりしない限り、投稿記事のなかで php

画像を表示するよ

JavaScriptで画像を表示してみよう! 小学生からのプログラミング入門

みなさんこんにちは。今日もプログラミングの勉強をはじめていきましょう。 前回、「JavaScriptで今月の残り日数を計算してみよう! 小学生からのプログラミング入門」では、JavaScrip

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

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