コンテンツにスキップ

Node.jsでシンプルなWebアプリを作ってみる 第1回

ExpressはNode.jsのWebアプリフレームワーク。Node.jsでWebサーバを実装するならExpressでしょう。

ここでは、簡単画面サンプルを作ってみる。最終的にはNode.jsでFXを分析するWebアプリを作りたい。そのための技術要素のノウハウを少しずつためていく。

第1段としては以下の構成

  • expressでhtmlを表示

これだけでは寂しいが、少しずつ積み重ねていく。

これから使っていくプロジェクトをセットアップする

TypeScriptで始めるNode.jsの手順で、

  • Node.js
  • TypeScript

の環境を整える。

このプロジェクトをこれから数回のサンプルで使っていく。

Expressをセットアップ

Expressが動くようにexpressと型定義をインストールする。

$ npm i express @types/express

Webサーバを立ち上げる

Expressにある「Hello World の例」を動かして、Webサーバを動かしてみる。

「src/index.md」を以下のように記述する。

  • '/'のGETを受け取ったら'Hello World.'を返す
  • 3,000ポートを待ち受ける
import express from "express"

const app = express();

app.get('/', (req: express.Request, res: express.Response) => {
    res.send('Hello World.')
})

app.listen(3000, () => {
    console.log('Example app listening on port 3000!');
})

実行して動かしてみる

下記を実行してindex.tsを動かす。

$ npx ts-node src/index.ts

ブラウザで、http://localhost:3000へアクセスする。 すると、'Hello World.'と表示されるはずだ。

タバコ休憩

ここまでで、

  • expressでプロセス立ち上げて
  • 特定ポートを待ち受けて
  • 固定の文字を返す

までできた!!

HTMLを作る

静的コンテンツの例としてシンプルなHTMLを作る。 画面などの静的コンテンツは「console」にする。

ただの文字列を表示するサンプルとして「console/sample.html」を作成する。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Sample</title>
</head>
<body>
    <h1>Hello World.</h1>
</body>
</html>

静的コンテンツだけ公開する

さっき作った「console/sample.html」を公開するようにアプリケーションに登録する。 ソースの待受をコメントアウトして、代わりに「/console」を静的コンテンツ提供用として登録する。

以下のようになる。

import express from "express"

const app = express();

/*
app.get('/', (req: express.Request, res: express.Response) => {
    res.send('Hello World.')
})
*/

app.use('/console', express.static('console'));

app.listen(3000, () => {
    console.log('Example app listening on port 3000!');
})

再起動してアクセスする

$ npx ts-node src/index.ts

再起動して、http://localhost:3000/console/sample.htmlにアクセスするとhtmlが表示される。


最終更新日: 2020年4月26日