【フロントエンド初心者向け】Node.jsとExpressでローカルサーバを起動してみよう - 実践編

フロントエンド 開発環境

こんにちは、ユアサです。
今回は前回紹介したNode.jsとExpressを使用して、実際に簡易サーバーを作成していきます。
↓前回の記事はこちら
tech.arms-soft.co.jp

Node.jsとnpmの準備

まずはNode.jsをインストールします。Node.jsの公式ページから各OSのインストーラーをダウンロードします。インストーラーは画面の指示に従いながら設定していきます。

nodejs.org

またmacであればパッケージ管理システム「Homebrew」を使用した方法でもインストールができます。以下コマンドでHomebrewを準備します。

$ /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

Node.jsのインストールから複数のバージョンを管理・切り替えできる「nodebrew」をインストールし、Node.jsをインストールします。

$ brew install nodebrew
$ nodebrew install-binary latest
$ nodebrew use v7.1.0

これでHomebrewを使用してNode.jsをインストールすることができました。またnpmもNode.jsインストール時に自動的にインストールされます。

Experssをインストールする

まずExpressをインストールするためのフォルダを作成して、ターミナルからコマンドで作成したフォルダの階層まで移動します。
その後、npmのpackage.jsonを作成します。

$ npm init -y

作成されたらExpressのインストールに入っていきます！Express公式ページTOPに表記されているコマンドでインストールできます。
expressjs.com

$ npm install express --save

単純なコマンドだけなので簡単ですね。インストール後にpackage.json内を見てみましょう。成功していると以下のようにExpressのバージョン表記がされています。

作成したHTMLファイルを読み込んで表示させる

ここまででExpressの準備が終わりましたので、いよいよHTMLファイルを表示させていきます。
HTMLファイルの階層ですが、今回はpublicフォルダを作成しその中に作成します。僕の場合はメインとなるindex.html、その同階層にother1.htmlとsubフォルダを作成し、subフォルダ内にother2.htmlを作成しました。以下の通りになりました。

簡単な内容ではありますが、HTMLファイルは以下の通りにコーディングしました。index.html以外の各ファイルもaタグの遷移先が違うだけで同じような作りにしました。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>TOPページ</title>
  </head>
  <body>
    <div>
      <a href="/other1.html">other1</a>
      <a href="/sub/other2.html">other2</a>
    </div>
  </body>
</html>

続いてローカルサーバを立ち上げるための処理をjsファイルに書いていきます。
Express公式ページのQ&Aページで表記されていますが、

特定のファイルがある場合は、res.sendFile() 関数を使用します。 ディレクトリーから多数の資産を提供する場合は、express.static() ミドルウェア関数を使用します。

少々分かりづらい説明ですが、特定のファイル一つのみ表示させたい場合はjsファイル内でres.sendFile()関数を使用し、表示させたいファイルが複数ある場合はexpress.static()ミドルウェア関数というものを使用するということだそうです。今回表示させようとしているページはindex.html、other1.html、other2.htmlの3つになるのでexpress.static()を使用します。
Express公式ページでコーディングの例がアナウンスされているので、このやり方に沿って書いていきます。
expressjs.com
jsファイルはpublicディレクトリと同階層に作成します。

const express = require("express");
const app = express();

app.use(express.static("public"));

app.listen(3000, () => {
  console.log("start");
});

一応jsファイル内の説明をしておくと、
1. 変数expressにexpressを読み込む
2. 変数appにexpress実行できる形として生成（インスタンスの生成）
3. app.use(express.static(“public”))で、expressに提供したい静的ファイルのディレクトリを指定
4. app.listen()で指定したポート番号でサーバを起動
といった流れになります。（app.listen()内のconsole.logはサーバが立ち上がったか念の為確認用のメッセージとして入れました）
今回app.listen()で指定されたポート番号（今回は3000）は他の値でも問題ありませんが、ウェルノウンポート番号と呼ばれる0〜1023の番号はファイルをサーバーに送信するために使うFTPやサーバーにログインする際に使うSSHなどの機能に使用されている場合があるので、これらは原則使用不可です。一般的に3000が使用され、他機能に影響を与える可能性が低いとされています。

ではターミナルからコマンドを入力して起動してみます。

$ node app.js

これで起動できました。ではlocalhostの表示も確認します。http://localhost:3000で表示させてみます。

ブラウザで表示できました！想定通り、リンク先もそれぞれother1.htmlとother2.htmlに遷移しました。
またこのサーバーを終了させるには、再度ターミナルからControl+Cのコマンドで終了できます。

まとめ

前回と今回の二週でNode.jsとExpressを使った簡易サーバーを作成してみました。
Express公式ページを見ると設定次第で他にもできることがありそうなので、より改修していくのも面白そうですね。
最後まで読んでいただきありがとうございました（^人^）
次回のブログ記事の更新は8月24日（水）になります。