Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Herokuで簡単なWeb APIを作る

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入門

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment