Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

RESTAPIが作れるようになるまで【Heroku,Node.js使用】

注意

記載途中です。内容に大幅な変更もあると思います。
(私自身完全に理解できていない状態での記事作成になるため。)
色々知識を得た結果、ejs(テンプレートエンジン)を使用すればWebアプリが作れることが判明したので、これはRESTAPIが作れるようになるまでに変更します。

はじめに

HTMLやJavascript、C#もしくはjavaは分かるけど、サーバーをどう構築すれば良いか分からないレベルの人なら参考になると思います。
(恐らくSES事業を経験してると、そのレベルにはなると思います。)

具体的には、docker、AWS、Heroku、node.js、Nginxの辺りが完全に理解できていないレベルの人です。

Gitが分からない人は、ソースツリーを使用して、コミットプッシュマージクローンプルリク辺りを理解するところから始める方が良いと思います。とりあえず、下記サイトを参考にどうぞ。

SourceTreeの使い方 GitHubとの連携方法

実施内容

Herokuに登録

まずはHerokuが無料でDB使えるということが分かったので、下記サイトを参考にしつつHerokuに会員登録しました。

【HEROKUとは】これを読めばOK!デプロイの仕方まで徹底解説

Node.jsインストール、Atomインストール

Herokuに登録後、Node.jsが必要そうだったので、下記サイトを参考にインストールしました。また、Node.jsの編集にAtomが必要なので、Atomインストールしてない人は、このタイミングで一緒にインストールしましょう。

Node.jsの勉強会でお手軽にWebアプリを作った話

RestAPIを知る

恐らくここが1番重要な内容だと思います。私はHTTPサーバーを作る理由が謎だったので、RestAPIの存在を知ったとき、体に電流が走りました。

Webアプリ初心者は、何を作れば良いか分からなかったらRestAPIを作れば良いと思います。RestAPIは下記サイトが参考になると思います。

RESTful APIとは何なのか

ちなみにRestAPIが何故重要なのかを説明すると、HTMLで画面作っていると、データを大量に持たせたい場面が出てくると思います。Javascriptの変数に値を直で持たせるのも1つのやり方だとは思いますが、データが増えるたびにJavascriptを書き換えるのは、HTTPサーバーに再度アップロードが必要な点で効率が悪いと感じます。そこでデータをJsonで返すRestAPIを作ってしまえば、アプリをアップロードしなおさなくてもデータを増やせると考えました。

HerokuでサンプルAPIを作成

下記サイトを参考にしました。

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

なお、こちらでは、サンプルを使用してのAPIになるので、自分専用の新たなAPIが欲しい場合は、やり方を調べる必要があります。これからの作業の意味を理解するためにも、まずは、サンプルAPIの理解をお願いします。

Gitリポジトリの作成

こちらに関しては、上記サンプル(裸の窓使いがHerokuにNodeでRestAPIで「こんにちは」するまで)と比較した結果、見つけた差異です。下記を実施しました。

Create a new Git repository
Initialize a git repository in a new or existing directory

$ cd my-project/
$ git init
$ heroku git:remote -a 新しく作成したアプリ名

Node.jsを作成

ここからは、自分でNode.jsを作成し、それをデプロイする作業かなと考えました。私はDBからデータを取得してJsonを返すRestAPIが欲しかったので、以下を実施しました。

1. Node.jsでREST APIを作るための学習

以下のサイトが非常に参考になりました。

Node.jsを利用した単純なREST APIの書き方

2. GitHubと連携

以下のサイトが参考になりました。

heroku 初級編 - GitHub から deploy してみよう -
Step 4: HerokuとGitHubを連携させて自動デプロイ環境を作ろう!

3. nodemanについて

Node.jsの学習をするにあたって、出てきたnodemanが何なのかは以下のサイトで理解できました。恐らくGitHubとの連携の次に疑問になるワードだと思います。

nodemonとは?

4. herokuのエラーログ確認

いざGithubを使用してherokuにデプロイしたアプリを開いたときに、アプリ画面に以下のコマンドが出てきました。

heroku logs --tail

これはherokuにデプロイしたアプリのログを確認するためのコマンドみたいです。これはローカルのアプリフォルダにcdしている状態で使えば確認できます。
終了するときはCtrl+cです。

5. Starting process with command `nmp start`エラーについて

herokuのエラーログ確認したタイミングで見つけたエラーです。これに関しては、index.jsのscriptsを以下のように修正して解決しました。どうやら、これを指定しないと、スタートプロセスが見つからないからエラーになるとか。

"scripts": {
  "start": "node index.js"
},

6. ”Web process failed to bind to $PORT”エラーについて

startを指定した後に再度実行したら別のエラーが発生しました。調べたら、以下のサイトが出てきました。

Herokuで”Web process failed to bind to $PORT”が出力されるとき

いくつか疑問が出てきたので、単語も調べました。

Heroku Postgresをインストール

Heroku アプリに PostgreSQL を導入する

新たにEJSに挑戦するので、いったんこの記事を中断します。現時点で意見がある方がいれば参考意見を頂ければ嬉しいです。

shirasawa
気が向いたら書きます。Unity、C#、HTML辺り。 Linux関係の記事ばっか書いてるので、↑の説明は嘘ですね。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away