HerokuでExpressアプリを作る---基本設定

この記事の内容

HerokuでExpressを作るための方法、この記事では基本的な設定を説明する

• 環境整備
• 静的(HTTP)サーバー
• APIサーバー : リソースとアクセスログの監視

までを実例を挙げて紹介する

環境整備

herokuへの登録とherokuのCLIツール群のインストール¹は割愛する。

yarnとgitの初期化

$ yarn init
%% 様々な入力
$ yarn add express
$ git init
$ echo "/node_modules/" > .gitignore

このようにgitとyarnを初期化しておき、最低限のモジュールの追加と.gitignoreの設定をしておく

エントリーポイント(index.js)

index.js

const path=require('path');
const express=require('express');
const app=express();

// ポートはheroku用の環境変数とローカル用の手動を設定しておく
app.set('port', process.env.PORT || 5050);
// '/public/'以下を静的ファイルの置き場所に指定
app.use(express.static(path.join(__dirname, 'public')));

app.listen(app.get('port'), ()=>{ console.log("Node app is running at localhost:" + app.get('port')); });

これでpublic/index.htmlにHello Worldを置いておくとindex.jsを起動させておいてブラウザでアクセスすると表示される。

起動ファイルProcfile

herokuではデプロイされるとProcfileを読み起動する。

Procfile

web: node index

とするとデプロイと同時にnode indexが走ってサーバーが起動する。

herokuにアプリを作って起動

$ heroku login
%% E-mailアドレスを入れる
%% パスワードを入れる
$ heroku create $APPNAME %% APPNAMEが作られる
$ git add .
$ git commit -a -m 'Commit All Files'
$ git push heroku master

でデプロイされ起動する。

APIサーバーとして使う

httpサーバーだけならExpressを使う必要も何ないのでAPI(JSON)サーバーとして使ってみる。
適当なJSONデータを用意して帰すだけならほぼhttpサーバーと変わらないので動的にデータを作ってみる。

リソースを見る

メモリ使用量とcpu使用量を監視する、それぞれprocess.memoryUsageやprocess.cpuUsageを使う。
src/log/usage.jsに本体をsrc/log.jsにモジュールを書く

src/log.js

const usage=require('./log/usage');
const access=require('./log/access');

const log={
    usage: usage,
    access: access,
}

module.exports=log;

src/log/usage.js

onst histories=[];
const min=1;

setInterval(()=>{ histories.push({ date: new Date(), memory: process.memoryUsage(), cpu: process.cpuUsage() }) }, 1000*60*min);

const usage={
    get: ()=>{ return histories; },
}

module.exports=usage;

として1分ごとのメモリ使用量とcpu使用量をログにためておく

アクセスログ

リソースの使用量の他にアクセスログもとっておく、

src/log/access.js

const log=[];

const access={
    add: (req, res, next)=>{
        log.push({ date: new Date(), method: req.method, path: req.path,
                   ip: req.ip,
                   proxyIP: req.ips,
                   userAgent: req.headers['user-agent'] });

        next();
    },

    get: ()=>{ return log; }
}

module.exports=access;

IPアドレスはreq.ipにProxyを使った場合のIPアドレスはreq.ipsに配列として記録されている²。
headers[user-agent]³にはユーザーエージェント(多分、クライアントと同じもの)が文字列として入っている。
addはExpressのミドルウェアにセットして使うためにRequestとResponse、それと次に送るための関数nextを引数として受け、処理が終わるとnextを呼ぶ。

エントリーポイントの変更

以上のAPIを使えるようにエントリーポイントindex.jsに以下を追加する。

index.js

app.use(log.access.add); // accessログに記録するためのミドルウェア

// JSON形式でリソースログを返すAPI
app.get('/log/usage', (req, res)=>{ res.send(log.usage.get()) }); 
// JSON形式でアクセスログを返すAPI
app.get('/log/access', (req, res)=>{ res.send(log.access.get()) }); 

とすることでアクセスすればJSON形式として値を返す。

あとがき

これでhttpサーバーとして使いつつAPIサーバー(動的にJSON形式データを返すサーバー)として使える設定が一応できた。
実際にはHTML,CSSやクライアント側JS、サーバー側もきちんと整備する必要がある(こんな重要な情報がダダ漏れのサーバーはありえないが練習用として使った)。

1. Ubuntuではaptにある、他のLinuxディストリビューションやMacも同様だろう ↩

2. (参考)expressモジュールによるHTTPサーバ（３）クライアントに関する情報の取得 ↩

3. (参考)node.jsでuser agentからできるだけ詳しい情報を得る、文字列解析はしない。 ↩