ここではExpressフレームワークを使ったWeb APIサーバの実装方法について説明します。今回、最終的に作成するシステムには必要ありません。しかし、ReactからのHTTPリクエストがサーバでどのように受け取られているのかを確認するための方法として、Expressフレームワークを使ったWeb APIサーバを作成しました。
Expressフレームワークとは、Node.jsが世の中に出てきた当初から開発されているフレームワークです。かつては、Node.jsでWeb系のアプリケーションを作成する上では欠かせないフレームワークでした。しかし、サーバレスアーキテクチャが流行っている昨今、少しずつ利用は減りつつあるかもしれません。
作成手順
ここでは、次のような手順でWeb APIサーバを実装しました。
- express-generatorのインストール
- expressプロジェクトの生成
- Web APIの作成
express-generatorのインストールとプロジェクトの生成
今回はexpress-generatorというツールを使って、基本となるプロジェクトを生成させました。まず、ターミナルで次のコマンドを実行して、express-generatorをインストールします。
|
1 |
# npm i -g express-generator |
問題なくインストールできると、次のコマンドでプロジェクトを生成することができます。
|
1 |
# express api-server |
ここで、api-serverとはプロジェクト名になり、api-serverという名前のフォルダが作成され、このフォルダの中にサーバとして必要なファイルが生成されます。その後、次のコマンドを実行して、サーバを起動します。
|
1 2 3 |
# cd api-server # npm i # npm start |
Webブラウザを起動し、http://localhost:3000へアクセスすると、次のような画面が表示されると、正しく生成できています。
Web APIの作成
ここでは、http://localhost:3000/api/sampleにHTTP GETでアクセスすると、successと文字列を返すAPIを作成します。routes/index.jsを次のように変更します。
|
1 2 3 4 5 6 7 8 |
var express = require('express'); var router = express.Router(); router.get('/api/sample', function(req, res, next) { res.json('success'); }); module.exports = router; |
npm start を一旦終了させ、もう一度実行し、Webブラウザで http://localhost:3000/api/sample にアクセスして、次のように表示されると正しく実装できています。
このままでも良いですが、同じPC上でReactを実行するとポート番号が衝突するため、bin/www ファイルの15行目あたりにある記述を次のように変更して、利用するポート番号を3000から8000に変更しておきます。
|
1 |
var port = normalizePort(process.env.PORT || '8000'); |
一応、サーバを再起動し、Webブラウザで http://localhost:8000/api/sample にアクセスして、同じように表示されることを確認しておきます。
今回作成したコードはこちらにアップロードしました。