9sako6/easy_web_api_on_heroku.md

## easy_web_api_on_heroku.md

      
    Raw
  

              easy_web_api_on_heroku.md
            
          
    Herokuで簡単なWeb APIを作る

まずは以下の単純なWeb APIを作ります。
$ curl https://enigmatic-garden-50659.herokuapp.com/
Hello World!
Set up

まずは適当なプロジェクト用ディレクトリを作り、
そこでnpm initを実行して質問に答えながらpackage.jsonを作ります。
$ npm init
{
  "name": "hoge",
  "version": "1.0.0",
  "description": "sample web api",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "9sako6",
  "license": "MIT"
}
次に、Express.jsをインストールします。
$ npm install express --save
インストール後のpackage.jsonはこのようになります。
{
  "name": "hoge",
  "version": "1.0.0",
  "description": "sample web api",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "9sako6",
  "license": "MIT",
  "dependencies": {
    "express": "^4.16.4"
  }
}
index.js

index.jsを作ります。
const express = require('express');
const app = express();

app.set('port', (process.env.PORT || 3000));

app.get('/', function(request, response) {
  response.send('Hello World!\n');
});

app.listen(app.get('port'), function() {
  console.log("Node app is running at localhost:" + app.get('port'));
});
ローカルで動作確認をします。
$ node index.js
Node app is running at localhost:3000
http://localhost:3000にアクセスし、Hello World!が表示されていればうまくいっています。
もしくは、curlで動作確認をします。
$ curl http://localhost:3000
Hello World!
Herokuへデプロイ

まずは現在のディレクトリをGitリポジトリにします。
$ git init
.gitignoreを作ります。
node_modules
.DS_Store
続いて、Procfileを作ります。
web: node index.js
これでもろもろの設定は終わりで、
最終的なディレクトリ構成は以下のようになります。
.
├── Procfile
├── index.js
├── node_modules/
├── package-lock.json
└── package.json
デプロイしていきます。まずはHerokuにログインしておきます。
$ heroku login
そもそもHerokuアカウントを持っていない人はHeroku初心者がHello, Herokuをしてみるなどを参考にして作ります。
herokuコマンドが使えない場合はGetting Started on Heroku with Node.jsを参考にHeroku CLIをインストールしておきます。
$ git add .
$ git commit -m "deploy"
$ heroku create
$ git push heroku master
$ heroku open
heroku createの時点でデプロイ先のURLが表示されるのでメモっておきます。
忘れた場合は以下のようにしてURLを確認します。
$ heroku apps
=== username Apps
enigmatic-garden-50659 # なんかそれっぽいやつ
limitless-river-16445

$ heroku info --app enigmatic-garden-50659
=== enigmatic-garden-50659
Auto Cert Mgmt: false
Dynos:          web: 1
Git URL:        https://git.heroku.com/enigmatic-garden-50659.git
Owner:          username
Region:         us
Repo Size:      8 KB
Slug Size:      18 MB
Stack:          heroku-18
Web URL:        https://enigmatic-garden-50659.herokuapp.com/
デプロイ先のURLにcurlしてみて、Web APIの完成を喜びます。
$ curl https://enigmatic-garden-50659.herokuapp.com/
Hello World!
ルーティング

次はindex.jsを色々書き換えて遊びます。まずはルーティングをいじってみます。

ルーティングとは、アプリケーションが特定のエンドポイントに対するクライアント要求に応答する方法として、URI (またはパス) と特定の HTTP要求メソッド (GET、POSTなど)を決定することです。
各ルートには、1つ以上のハンドラー関数があり、それらはルートが一致したときに実行されます。
基本的なルーティング

Express.jsにおいて、ルート定義は次のようにして行います。
app.METHOD(PATH, HANDLER)
appはexpressのインスタンス、METHODはHTTP要求メソッド、PATHは、サーバー上のパス、
HANDLERは、ルートが一致したときに実行される関数です。
試しに、先ほど作ったindex.jsに新しいルート定義を追加してみます。
const express = require('express');
const app = express();

app.set('port', (process.env.PORT || 3000));

app.get('/', function(request, response) {
  response.send('Hello World!\n');
});

app.get('/jp', function(request, response) {
  response.send('こんにちは\n');
});

app.listen(app.get('port'), function() {
  console.log("Node app is running at localhost:" + app.get('port'));
});
これは以下のように動作します。
$ curl http://localhost:3000/jp
こんにちは
クエリ

次はクエリを取得します。
先ほど追加したルート定義のハンドラー関数を以下のように書き換えます。
app.get('/jp', function(request, response) {
  const name = request.query.name || 'Name';
  response.send(`こんにちは ${name}\n`);
});
これは以下のように動作します。先ほどまでと違って、URLを"で括っている点に注意します。
$ curl "http://localhost:3000/jp?name=9sako6"
こんにちは 9sako6
CORS

オリジン間リソース共有 (CORS, Cross-Origin Resource Sharing)を可能にします。
ブラウザは「同一オリジンポリシー」という仕組みを設け、異なるオリジンのリソースへのアクセスに制約をかけています。CORSは、この制約を一部解除し、異なるオリジン間でリソースを共有するための仕組みです。
CROSにより、任意のフロントエンドのJavaScriptコードから自作APIにリクエストできるようになります。
const express = require('express');
const app = express();

app.set('port', (process.env.PORT || 3000));

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", '*');
  res.header("Access-Control-Allow-Credentials", true);
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
  res.header("Access-Control-Allow-Headers", 'Origin,X-Requested-With,Content-Type,Accept,content-type,application/json');
  next();
});

app.get('/', function(request, response) {
  response.send('Hello World!\n');
});

app.get('/jp', function(request, response) {
  response.send('こんにちは\n');
});

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

Node.js(Express) 事始め ＆ Heroku へデプロイまでのメモ - Qiita
CORS(Cross-Origin Resource Sharing) - とほほのWWW入門