Go to Qiita Advent Calendar 2024 Top
LoginSignup
47
34

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@TakuTaku04(たく たく)

裸の窓使いがHerokuにNodeでRestAPIで「こんにちは」するまで

Posted at

裸なのでクレカは使いません。
裸ですがWindows 10 PCとネット環境とメルアドとNode.jsの少しの知識はあります。
インストール手順は注意点だけもしくは関連リンクだします。
Herokuの概念やdynoの話は極力しません。とにかくRest APIが作れるまで突進します。

Herokuでなにがしたいか

無料でオリジナルRest APIの構築です。私の場合LINE BOT開発に必要だったため。
Herokuは環境構築してgit pushすると勝手に環境デプロイしてくれます。それがうれしいです。

手順

  1. Node.jsのインストール
  2. gitのインストール
  3. Herokuのアカウント作成(要メルアド)
  4. Heroku Command Line Interface (CLI)のインストール(cmdからherokuコマンドを打つのに必要)
  5. アプリケーション作成
  6. Rest API開発

[手順1]Node.jsのインストール

早速人の記事に頼る。
windows10にNode.jsをインストールする

[手順2]gitのインストール

また人の記事に頼る。
自分用 Git For Windowsのインストール手順

[手順3]Herokuのアカウント作成(要メルアド)

以下からアカウントを作成します。
https://signup.heroku.com/jp

必須以外は任意です(当たり前)。
主な開発言語はNode.jsにしときましょう。

登録したメルアドに、Confirm your account on Herokuがきます。クリックしましょう。

image.png

パスワード設定画面にとんで、設定すればアカウント作成成功です。
ちなみにパスワード要件は記号必須でめんどいです。

[手順4]Heroku Command Line Interface (CLI)のインストール(cmdからherokuコマンドを打つのに必要)

公式が各開発言語向けに説明をしてくれています。Node.js用の説明は以下です。この中のSet-upのなかでCLIインストールリンクがあります。
https://devcenter.heroku.com/articles/getting-started-with-nodejs#set-up

インストールして上記にあるheroku loginまでしておいてください。

ちなみにこのガイド、かなり有益なので一読しておくことをお勧めします。
それなりに章があって英語でダルかったので、私はSet-upだけやって、詰まってから戻りました。それでもできる。
でも、トータルの時間は最初に一読した方が絶対に短いです。なぜならHerokuの概念とできることが頭に入るから。

[手順5]アプリケーション作成

ぶっちゃけ前述の公式の説明に従って作成していけば問題なく作れます。
でも英語サイトとか一秒でも早く離れたい人もいるでしょう。上記herkou loginの後の手順を記載します。

Herokuサンプルをcloneする

まずHerokuが用意してくれているサンプルをgit cloneします。既に自分のデプロイしたいアプリがあるなら必要ないですが、裸の人はこのサンプルを拾ってきて改変した方が圧倒的に楽です。(expressとかがすでに規定されているため)

コマンドプロンプト
$ git clone https://github.com/heroku/node-js-getting-started.git
$ cd node-js-getting-started

サンプルを俺のHerokuにデプロイする

前述のサンプルをそのままHerokuに上げます。
Herokuは、heroku createコマンドによりアプリ用のgitのリモートリポジトリ(Herokuのgitサーバ内)を作成してくれます。そのリモートリポジトリにpushすることで、自動でデプロイされ、アプリケーションに反映される仕組みです。かなり楽です。でもHerokuがつぶれたらそのgitサーバもなくなると思うので気を付けましょう。

以下手順(実は公式からそのまま引用)。ちゃんと前述のサンプルディレクトリ(node-js-getting-started)にcdしてること！

コマンドプロンプト
// ここでリモートリポジトリが作成され、クローンしたサンプルと結びつきます
$ heroku create
Creating sharp-rain-871... done, stack is heroku-18
http://sharp-rain-871.herokuapp.com/ | https://git.heroku.com/sharp-rain-871.git
Git remote heroku added
// 上記の「sharp-rain-871」というのがアプリ名になります。「sharp-rain-871」が公式のサンプルの例で、herokuが自動で付けます。ランダムな自然言語と数値の組み合わせっぽい。

// pushするときはherokuとmasterにpushする作法です。
$ git push heroku master
Counting objects: 488, done.
－－－なんかいろいろでて－－－
remote: Verifying deploy... done.
To https://git.heroku.com/nameless-savannah-4829.git
 * [new branch]      master -> master

// 下記コマンドでブラウザが起動し、サンプル画面が表示される
$ heroku open

以下の画面が表示されます。世界中からアクセスできる、あなたのサイトです。うれしいな。

image.png

[手順6]Rest API開発

うれしいんですけど、やりたいことはこれじゃあありません。
Rest APIが作りたいんです。htmlページじゃない！

ここからはサンプルの中身をいじっていきます。ここからが、あなたのオリジナリティの見せ所なわけです。

先ほどのnode-js-getting-startedフォルダの配下にindex.jsというファイルがあると思います1。これがnode起動時のルートファイルとなっています。

Rest APIを受け入れられるように書き換えてみましょう。
たぶんいまの中身はこんな感じですね。

index.js(サンプルのまま)
const express = require('express')
const path = require('path')
const PORT = process.env.PORT || 5000

express()
  .use(express.static(path.join(__dirname, 'public')))
  .set('views', path.join(__dirname, 'views'))
  .set('view engine', 'ejs')
  .get('/', (req, res) => res.render('pages/index'))
  .listen(PORT, () => console.log(`Listening on ${ PORT }`))

express()とかよくわからないでしょうか。はい、後で勉強しましょう。(私も最初は知らんかった)
とりあえず、getとpostのAPIを追加してみましょう。
.get('/', (req, res) => res.render('pages/index'))というところが怪しいので、古畑任三郎ばりの推理でその下に試しに追加してみましょう。

index.js(RestAPI追加)
const express = require('express')
const path = require('path')
const PORT = process.env.PORT || 5000

express()
  .use(express.static(path.join(__dirname, 'public')))
  .set('views', path.join(__dirname, 'views'))
  .set('view engine', 'ejs')
  .get('/', (req, res) => res.render('pages/index'))
  .get('/g/', (req, res) => res.json({method: "こんにちは、getさん"})) // 追加
  .post('/p/', (req, res) => res.json({method: "こんにちは、postさん"})) // 追加
  .listen(PORT, () => console.log(`Listening on ${ PORT }`))

コミットしてデプロイしましょう。

コマンドプロンプト(レスポンス省略します)
$ git add .
$ git commit -m "add api"
$ git push heroku master

これでデプロイOKです。これが楽です。
それぞれ試してみます。POSTがあるので、ここではcurlコマンドを使ってます(標準でないので使うなら要インストール)。curlでなくてもなんでもいいです。POSTできるChromeの拡張もあります。

コマンドプロンプト
$ curl -H "Content-Type: application/json" https://<heroku createのとき出てきたアプリ名>.herokuapp.com/g/
{"method":"縺薙ｓ縺ｫ縺｡縺ｯ縲“et縺輔ｓ"}
$ curl -X POST -H "Content-Type: application/json" https://<heroku createのとき出てきたアプリ名>.herokuapp.com/p/
{"method":"縺薙ｓ縺ｫ縺｡縺ｯ縲｝ost縺輔ｓ"}

やった完全に期待動作ですねなにも問題ないこれにて一件落着めでたしめでたし

・・・いやまあファイルがutf-8でコマンドプロンプトがshiftjisなんだからこう表示されるでしょそりゃ。いいじゃんもう。。。だめなの。。。わかりましたよ。。。

コマンドプロンプト
$ chcp 65001
// コンソールがクリーンされる

$ curl -H "Content-Type: application/json" https://<heroku createのとき出てきたアプリ名>.herokuapp.com/g/
{"method":"こんにちは、getさん"}
$ curl -X POST -H "Content-Type: application/json" https://<heroku createのとき出てきたアプリ名>.herokuapp.com/p/
{"method":"こんにちは、postさん"}

くぅ～疲れました！これにて完成です！

とりあえず、これでいろいろできる入り口はできました。あとはNode.jsやモジュール群を上手く使いこなして、素敵なRest APIを作って公開して無料で使わせてくださいお願いします。

  1. もしかして時代が進んでサンプルが変わり、index.jsがなくなるかもしれません。そんなときは同フォルダにあるProcfileを見てください(ProcfileはHerokuの設定ファイルです)。その中に、サーバ起動コードが書かれています。今はここにweb: node index.jsと書いており、index.jsがルートファイルであることが分かります。逆に言えばこのProcfileを書き換えれば、いろいろできるわけです。 ↩

47
34
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
47
34

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?