便利！簡単な開発サーバの構築方法(フロントエンドエンジニア向け)

課題を持った人

フロントエンドの開発をしています。ちょっとしたコードをローカル環境で試してみたいのですが、大がかりな開発環境を作るほどでもありません。簡易的な開発サーバはありませんか？

筆者

簡易的な開発サーバは色々とありますが、僕の場合は、以下の2つを使うことが多いです。

■http-server
Node.jsをPCにインストールする必要があります。Node.jsのインストール後にnpmからhttp-serverをインストールすることで使えるようになります。

■Live Server
Visual Studio Codeの拡張機能です。ソースコードを保存すると、ブラウザを自動的に更新(ホットリロード)する機能がついていて便利です。

上記2つの開発サーバのインストールから使い方までをご説明します。

http-serverのインストール〜使い方

http-serverを使用するには、Node.jsのインストールが必要です。Node.jsのインストールが済んでいない場合は、Node.js公式サイトからインストールをお願いいたします。

Node.jsをインストールするとnpm(Node Package Manager)というパッケージ管理システムを使うことができるようになります。npmがインストールされたかターミナルで下記のコマンドを入力して確認してみましょう。

$ npm -v

$ npm -v

“6.5.0”のようなバージョン情報が表示されればnpmはインストールされています。

では、npmを使ってhttp-serverをインストールしていきましょう。下記のコマンドをターミナルに入力してエンターキーを押します。このコマンドは「npmを使ってhttp-serverをグローバル環境にインストールしてね」という意味です。

$ npm install http-server -g

1	$ npm install http-server -g

すこし待つとhttp-serverのインストールが完了します。

早速、http-serverを実行してみましょう。ブラウザで開きたいファイルのディレクトリにcdコマンドで移動してください。移動したら、下記のコマンドを実行します。※http-serverは実行時に開いていたディレクトリがドキュメントルートと認識されます。

$ http-server

1	$ http-server

下記のような文字が表示されればhttp-serverの起動は成功しています。

ここに表示されているhttp://127.0.0.1:8080が開発サーバのIPアドレスとポート番号になります。ブラウザでhttp://127.0.0.1:8080を入力して実行するとWebページが表示されます。

Live Serverを使用するには、Visual Studio Code(VSCode)のインストールが必要です。VSCodeのインストールが済んでいない場合は、VSCode公式サイトからインストールをお願いいたします。

VSCodeを起動して、Live Serverのインストールを進めていきましょう。

VSCodeのサイドメニューで、下記の順に操作してLive Serverをインストールします。インストールは数秒で完了します。これでLive Serverを使う準備が整いました。

Live Serverの立ち上げテストをしてみましょう。まず、ブラウザに表示したいHTMLファイルをVSCodeで開きます。次に、VSCode下部のステータスバーに表示される「Go Live」という文字をクリックします。ブラウザが起動してWebページが表示されれば成功です。

筆者

プログラミングの学習時やシンプルなランディングページ作成時などに、今回ご紹介した簡易的な開発サーバは役に立つと思いますので使ってみてください。