簡単なローカルサーバーの立ち上げ方

ローカルサーバー立ち上げたくない?

プレーンなJavaScriptにおいて、import文のようなファイル参照系の構文やWebGLは、サーバー上でないと動作しません。ローカル環境では動かないのです。

ここではVisualStudioCode(VSCode)Live Serverという拡張機能を用いたローカルサーバーの立ち上げ方について説明します。

まずはVSCodeを起動しましょう

まず、VSCodeをインストールしましょう。

ほぼすべての言語に対応し、任意の OS で動作する強力なコード エディター、Visual Studio Code を使用して、Azure で編集、デバッグ、デプロイを行います。

次にプログラムが入っているフォルダに移動、右クリックしてVSCodeを開いてください。

開きました。

VSCodeを起動したら、以下の画像を元にLive Serverという拡張機能をインストールしましょう。

以下の画像をみながら、次の指示に従ってLive Serverをインストールしてください。

(1)をクリックして、拡張機能検索バーを表示します。

(2)の検索窓にLive Serverと入力します。

(3)をクリックすると右に Live Serverが表示されるのでインストールしましょう。

インストールに成功すると、VSCode右下タブにGo Live と表示されます。

開きたいhtmlファイルを選択した後、Go Liveをクリックすればローカルサーバーが立ち上がります。

index.htmlを選択していた場合は、

勝手にブラウザが立ち上がり、URLが http://127.0.0.1:5500/index.htmlのページが表示されます。

これで、選択したページがローカルサーバー上で起動しました。

一応URLの補足をしますね。

127.0.0.1の部分はループバックアドレスといいます。このIPは、デフォルトの設定では自分自身を示します。ちなみにhttp://localhost:5500/index.htmlと入力しても同じページが開くはずです。

もし、ループバックアドレスを自分で異なるIPに設定している時は、その設定したIPが表示されているはずです。まあ、普通はその設定はしないでしょう。

5500はそのIPのドア番号に当たる部分で、ポート番号といいます。

もし5500のポート番号が使用中のときは、勝手に違うポート番号が割り当てられます。おそらく5501ポートが使用されるはず。

ローカルサーバーを閉じる時

ローカルサーバーを閉じる時は、VSCodeを閉じるか右下のPort:XXの部分をクリックすれば良いです。

ゲーム制作ギャルからひとこと

カンタンだね!

Pixi.JsのようなWebGLを用いる言語を使用する時はここから起動するよ!

シェアする

  • このエントリーをはてなブックマークに追加

フォローする