注意
記載途中です。内容に大幅な変更もあると思います。
(私自身完全に理解できていない状態での記事作成になるため。)
はじめに
HTMLやJavascript、C#もしくはjavaは分かるけど、サーバーをどう構築すれば良いか分からないレベルの人なら参考になると思います。
(恐らくSES事業を経験してると、そのレベルにはなると思います。)
具体的には、docker、AWS、Heroku、node.js、Nginxの辺りが完全に理解できていないレベルの人です。
Gitが分からない人は、ソースツリーを使用して、コミットプッシュマージクローンプルリク辺りを理解するところから始める方が良いと思います。とりあえず、下記サイトを参考にどうぞ。
実施内容
Herokuに登録
まずはHerokuが無料でDB使えるということが分かったので、下記サイトを参考にしつつHerokuに会員登録しました。
【HEROKUとは】これを読めばOK!デプロイの仕方まで徹底解説
Node.jsインストール、Atomインストール
Herokuに登録後、Node.jsが必要そうだったので、下記サイトを参考にインストールしました。また、Node.jsの編集にAtomが必要なので、Atomインストールしてない人は、このタイミングで一緒にインストールしましょう。
RestAPIを知る
恐らくここが1番重要な内容だと思います。私はHTTPサーバーを作る理由が謎だったので、RestAPIの存在を知ったとき、体に電流が走りました。
Webアプリ初心者は、何を作れば良いか分からなかったらRestAPIを作れば良いと思います。RestAPIは下記サイトが参考になると思います。
ちなみに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を作るための学習
以下のサイトが非常に参考になりました。
2. GitHubと連携
以下のサイトが参考になりました。
heroku 初級編 - GitHub から deploy してみよう -
Step 4: HerokuとGitHubを連携させて自動デプロイ環境を作ろう！
3. nodemanについて
Node.jsの学習をするにあたって、出てきたnodemanが何なのかは以下のサイトで理解できました。恐らくGitHubとの連携の次に疑問になるワードだと思います。
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”が出力されるとき
いくつか疑問が出てきたので、単語も調べました。
require('path')について
pathって何だろうと思って調べた結果、以下のサイトが引っかかった。
webpack.config.jsで思ったpath.resolveって何のためにあるの？process.env.PORTについて
どうやらこれに関しては、以下のサイトを見ると、ポート番号指定ということが判明した。
Node.js Expressフレームワークの「ポート指定部分」に注力してみた
Heroku Postgresをインストール
一旦ここで切ります。一日では全て理解できませんでした。現時点で意見がある方がいれば参考意見を頂ければ嬉しいです。