【Node.js】最初にやること：ルーティング・HTMLファイルの表示

## この記事の内容

Node.jsを各OSにインストールする方法と簡単な使い方を紹介します。

- [0. Node.jsとは](#nodejsとは)
- [1. Node.jsのインストール](#1-nodejsのインストール)
- [2. Node.jsで Hello World](#2-nodejs-で-hello-world)
- [3. ルーティングとHTMLファイルの表示](#3-ルーティングとhtmlファイルの表示)

## 0. Node.jsとは

[Node.js](https://nodejs.org/ja)は、JavaScriptでサーバーサイドのアプリを作るためのプラットフォームです。
Apache・Nginx・Flask等のようにサーバー機能が備わっています。


## 1. Node.jsのインストール

Node.jsをインストールする方法は以下の2通りがあります。

**Windows、Mac、GUI操作できるLinuxにインストールする場合は ▶︎ ①**
**Linuxコマンドでインストールする場合は ▶︎ ②**

の方法でインストールします。

* **① [Node.jsの公式サイト](https://nodejs.org/ja)から**
* **② ターミナルのコマンドから**



---

### ① Node.jsの公式サイトから

以下の[Node.jsの公式サイト](https://nodejs.org/ja)にアクセスすると、アクセスしたOS環境に適したパッケージを
インストールするボタンが表示されるので、クリックしてダウンロードします。

https://nodejs.org/ja

![node.js_install_web.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3469687/894f2195-2bab-6466-f0d2-d4ef594b9dcb.jpeg)

ダウンロードしたファイルを実行して、画面に従ってインストールを完了します。

---

### ② ターミナルのコマンドから（AWS EC2）

AWS EC2 に Node.jsを導入する方法がAWS公式から案内されています。

<details><summary>EC2にNode.js導入する方法</summary><div>

１. ノードバージョンマネージャー (nvm) をインストール
`curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash`

２. nvm を有効化
`~/.nvm/nvm.sh`

３. Node.jsバージョン16.xをインストール
`nvm install 16`

４. 使用可能なNode.jsバージョンを確認
`nvm list`

５. Node.jsを有効化（セッション終了まで有効）
`
nvm use v16.20.0
`

６. Node.js,npmが使えることを確認
`node -v`
`npm -v`

ログアウトした場合、以降は5~6の手順で再度Node.jsを利用できます

</div></details>

https://docs.aws.amazon.com/ja_jp/sdk-for-javascript/v2/developer-guide/setting-up-node-on-ec2-instance.html


---
その他、Linuxにコマンドでインストールする場合、ディストリビューション（Redhat系、Debian系など）によってコマンドが異なるので、詳しくは公式ガイドをご覧ください

https://nodejs.org/en/download/package-manager




## 2. Node.js で Hello World

公式ドキュメントにある [Usage and example](https://nodejs.org/docs/latest-v16.x/api/synopsis.html) に沿って、Webページに Hello World を表示する方法を紹介します。

![documentation_v16.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3469687/f229a250-92f9-974e-0252-0ffade3ca875.jpeg)

::: note warn
ここでは AWS EC2 で使用可能なバージョンの v16.20.1 のガイドで記載します。
異なるバージョンではコードが若干違う場合があるので、以下から環境にあったバージョンのドキュメントごご参照ください。
:::

v18.x → [https://nodejs.org/dist/latest-v18.x/docs/api/synopsis.html](https://nodejs.org/dist/latest-v18.x/docs/api/synopsis.html)  
v16.x  → [https://nodejs.org/dist/latest-v16.x/docs/api/synopsis.html](https://nodejs.org/dist/latest-v16.x/docs/api/synopsis.html)

https://nodejs.org/en/docs



**1. Node.jsのバージョンを確認**

```bash
node -v
```
→ バージョン番号が表示されたら正しくインストールされています。


**2. hello-world.jsファイルを作成**

任意のディレクトリに任意のJSファイル（例：hello-world.js）を作成します

```
.
└─ hello-world.js
```

公式ドキュメントの通りコードを貼り付けます。

```js:hello-world.js
const http = require('node:http');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello, World!\n');
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});
```

**４. hello-world.jsを実行**

ターミナルから以下のように`node ファイル名.js`コマンドを実行すると、サーバーが起動されます。

```bash
node hello-world.js
```

**５. [http://127.0.0.1:3000/](http://127.0.0.1:3000/)にブラウザアクセス**

Hello, World! と書かれたページが表示されれば成功です。



## 3. ルーティングとHTMLファイルの表示

- URLによって異なるページを表示するためには、ルーティングを行うコードを記述します。（node1.js）
- HTMLファイルの内容を表示することも可能です。（node2.js）

以下のようなフォルダ構成を前提にコードを紹介します。
```
.
├─ node1.js
├─ node2.js
└─ index.html
```

---

**3-1. URLによって異なる表示をするルーティング**

```js:node1.js
const http = require("node:http");

const hostname = "127.0.0.1";
const port = 3001;

const server = http.createServer((req, res) => {
  if (req.url === "/") {
    res.statusCode = 200;
    res.setHeader("Content-Type", "text/plain");
    res.end("Hello, World! root\n");
  } else if (req.url === "/test") {
    res.statusCode = 200;
    res.setHeader("Content-Type", "text/plain");
    res.end("Hello, World! root/test\n");
  } else {
    res.statusCode = 400;
    res.setHeader("Content-Type", "text/plain");
    res.end("404 Not Found\n");
  }
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});
```

[http://127.0.0.1:3001/](http://127.0.0.1:3001/)　→ Hello, World! root
[http://127.0.0.1:3001/test](http://127.0.0.1:3001/)　→ Hello, World! root/test
[http://127.0.0.1:3001/その他](http://127.0.0.1:3001/)　→ 404 Not Found

:::note warn
Node.jsだけでルーティングを行うには、**if文**を使用して、アクセスされてパス(URL)によって表示す内容を場合分けする方法しかありません。
もっと効率的にルーティングを行うためには、[Express](https://expressjs.com/)のようなフレームワークをインポートして使用します。
:::

---

**3-2. HTMLファイルの内容を表示**

```js:node2.js
const http = require("node:http");
const fs = require("fs");

const hostname = "127.0.0.1";
const port = 3002;

const server = http.createServer((req, res) => {
  fs.readFile("index.html", (err, data) => {
    if (err) {
      res.statusCode = 500;
      res.setHeader("Content-Type", "text/plain");
      res.end("Internal Server Error\n");
    } else {
      res.statusCode = 200;
      res.setHeader("Content-Type", "text/html");
      res.end(data);
    }
  });
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});
```

[http://127.0.0.1:3002/](http://127.0.0.1:3002/)　→ index.html の内容が表示

:::note
URL毎に、用意したファイル(HTML, PHP, JS など)の内容を表示するには、上記の方法を組み合わせて実現できます
:::


## まとめ

Node.js の基本的な使用方法を紹介しました。

以下のCodeSandboxで、本記事のコードを実際に編集しながら確認できます。

https://codesandbox.io/p/sandbox/node-js-2fss4l