今まで作成していたNodeアプリを実際にHEROKUで公開していきます。
公開することにより、誰でもアプリを使うことができるようになるので、ぜひ公開してみてください。
学習に使った本はこちら！
ポチップ
ポチップ
クマじいAmazon Kindle Unlimited でもNode.jsの本はいっぱいあるんじゃ！！
もし、まだNodoのアプリは作ってないよと言う方は、過去の記事を是非参考にしてみてください！
上から順番に進めていくといいとおもいますが、ここは分かるよと言う方は知らない場所から進めてもらえればいいと思います！
公開したいアプリがある方は、ぜひ参考にして公開してみてください！
- HEROKUでアプリケーションを公開したい！
- 無料でアプケーションを公開してみたい！
- 簡単にアプリケーションを公開したい！
- Nodeのアプリケーションを公開したい！
なぜHEROKUに公開するのか！
クマじいHEROKUってなんじゃ？
HEROKUは、過去の記事を読んでくれている方ならご存知だと思いますが、コンテナベースのクラウド形PaaSです。
アプリケーションのデプロイ環境やデータベースを無料で使うことができます。
なぜHEROKUなのか、AWSとかGCPじゃダメなのと言う方もいるかもしれませんが、
結論AWSでもGCPでも問題ありません。
AWSは、無料期間がありますが基本的には有料ですし、デプロイ環境を作るだけで多少なりとも学習コストがかかります。
その点、HEROKUであれば無料で簡単にデプロイできるというメリットがあり、今回はHEROKUにデプロイすることにしています。
もし、HEROKUにまだ会員登録していない方は、こちらを参考に会員登録してみてください！
記事はデータベース環境の構築も含まれていますが、デプロイするだけなら会員登録だけで問題ないです！
HEROKUに新規アプリを作成する。
デプロイするには、まずHEROKUに新規アプリを作成しなければいけません。HEROKUでは、アプリと言っていますがサーバみたいな単位に捉えるといいと思います。
アプリの作成は、HEROKUの管理画面からやっていきます！
下の画面の右上「New>Create new app」を選択します！
遷移した画面でApp nameとChoose a regionを入力してください！
どちらも任意で問題ないです。
「Create app」を押してアプリを作成したら完了です！
HEROKUにデプロイしよう！
先ほど作成したアプリにデプロイしていきます。
デプロイ方法は、簡単でGITでプッシュするだけでデプロイができます。
もしGITをダウンロードしていない方は、こちらからダウンロードしておいてください！
先ほど、アプリを作成した後の画面で、下のような項目があったと思います。
基本的にはこの手順に沿ってデプロイしていけば大丈夫です！
HEROKU CLIをインストールする！
まず、Heroku CLIをインストールしていきます。
Heroku CLIは、こちらからインストールできます！
この画面からご自身の環境にあったHeroku CLIをダウンロードしてください！
ダウンロードしたら、実行してインストールしていきます！
基本的には、デフォルトで進めていきます！
インストールできればOKです！
コマンドプロンプトからHEROKUにログインする。
では、Heroku CLIを使ってHerokuにコマンドプロンプトからログインしてみましょう！
コマンドは、「heroku login」です！
C:\Users\*****\Documents\sample>heroku login
heroku: Press any key to open up the browser to login or q to exit: こんな感じになると思いますが、「q」以外のキーを入力したら下のような画面に遷移すると思います！
先ほどアプリを作成したアカウントでログインしてもらって、下の画面まで進めることができればOKです！
ここまでできると、コマンドプロンプトで下のようなメッセージが出ていると思います！
これが出ていればログイン完了です！
C:\Users\*****\Documents\sample>heroku login
heroku: Press any key to open up the browser to login or q to exit:
Opening browser to https://cli-auth.heroku.com/auth/cli/browser/...
Logging in... done
Logged in as *****@******GITをアプリに導入する。
続いて、GITを作成したアプリに導入していきます。
デプロイしたいアプリのディレクトリで「git init」を実行します。
「Initialized empty Git repository in」が出ればOKです！
PS C:\Users\*****\Documents\sample> git init
Initialized empty Git repository in C:/Users/*****/Documents/sample/.git/GIT remoteを登録する
HEROKUのリポジトリを登録します。
「heroku git:remote -a node-backend-application」を実行してもらえれば大丈夫です！
C:\Users\*****\Documents\sample> heroku git:remote -a [HEROKUアプリ名]
set git remote heroku to https://git.heroku.com/[HEROKUアプリ名].gitHEROKUのリポジトリにプッシュする！
ここからはGITの使い方ですが、今回はGITの使い方は省略します。
この手順でデプロイはできるので、GIT操作が気になる方は各自で調べてみてください！
まずは、ローカルリポジトリの対象ファイルをステージングします。
下記のようなメッセージが大量に出てくると重います。
C:\Users\*****\Documents\sample>git add .
・・・
warning: LF will be replaced by CRLF in views/layout.jade.
The file will have its original line endings in your working directory「warning: LF will be replaced by CRLF in」は、GITが改行を勝手にCRLFに変換しようとしているらしいです。
気になる方は、「git config –global core.autoCRLF false」を設定しておいてください。
ステージングにあげたファイルをコミットします。
こんな感じで、create mode ….がファイル数分出力されると思います。
C:\Users\*****\Documents\sample>git commit -am "make node-application"
・・・
create mode 100644 routes/memo.js
create mode 100644 views/error.jade
create mode 100644 views/index.jade
create mode 100644 views/layout.jade最後にコミットしたファイルをプッシュしましょう！
「https://[HEROKUアプリ名].herokuapp.com/ deployed to Heroku」が出ていればデプロイは完了しているはずです！
C:\Users\*****\Documents\sample> git push heroku master
・・・
remote: https://[HEROKUアプリ名].herokuapp.com/ deployed to Heroku
remote:
remote: Verifying deploy... done.
To https://git.heroku.com/[HEROKUアプリ名].git
* [new branch] master -> masterHEROKUの管理画面を確認しよう！
本当にデプロイできたか、HEROKUの画面を確認してみましょう！
赤枠がついている場所のように、「Build succeeded」「Deployed」になっていれば成功です！
HEROKUにデプロイしたアプリの動作確認をしよう！
では、実際にデプロイしたアプリが本当に動作するか確認しておきましょう！
HEROKUにデプロイした場合、URIは「https://[HEROKUアプリ名].herokuapp.com/…」になっています。
こんな感じでデータを取得できると思います。
コードを更新した場合の手順も確認しておこう！
コードを更新した場合の手順も確認しておきます！
実際には、今までの手順と変わらないですが念のためです！
コードを更新する！
前回作成したmemo APIのURLにバージョンを追記しようと思います！
app.jsのマーカーを引いている場所を追加してください！（過去を見ていない方は、任意に更新してみてください！）
app.js
var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var memoRouter = require('./routes/memo'); // add
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
app.use(logger('dev'));
app.use(express.json()); // jsonオブジェクトとして認識する
app.use(express.urlencoded({ extended: false })); // application/x-www-form-urlencodedを識別できるようにする。（trueにすることで階層構造（a[b]=c）を認識する）
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.use('/api/V1/memo', memoRouter); // add
// catch 404 and forward to error handler
app.use(function(req, res, next) {
next(createError(404));
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;HEROKUのリポジトリにプッシュする
基本的には、先ほど説明した手順と変わりはないです。
修正したファイルをステージングにあげる。今回はapp.jsですね！
C:\Users\*****\Documents\sample> git add app.js
warning: LF will be replaced by CRLF in app.js.
The file will have its original line endings in your working directoryステージングに上がっているファイルをコミットする。
コミットメッセージは、簡単にしてますが現場などによってルールがあったりすると思うので、この辺は任意にしてもらうのがいいと思います！
C:\Users\*****\Documents\sample> git commit -m "update app.js URIにバージョンを追加"
[master ce397b7] update app.js URIにバージョンを追加
1 file changed, 1 insertion(+), 1 deletion(-) ここまでできたら、プッシュします！
C:\Users\*****\Documents\sample> git push heroku master
・・・
remote: https://[HEROKUアプリ名].herokuapp.com/ deployed to Heroku
remote:
remote: Verifying deploy... done.
To https://git.heroku.com/[HEROKUアプリ名].git
8b3a60d..ce397b7 master -> master確認してみよう！
HEROKUの管理画面を確認するのは省略します。
先ほどと同様のURIを呼び出してみてください！
URIにバージョン情報を追加しているのでもちろんエラーになると思います！
では、先ほど更新したURIを呼び出してみましょう！
ちゃんと更新できていれば、新しいURIでデータが取得できるはずです！
これで、デプロイが完了です！
環境構築が要らないので、簡単にデプロイができたのではないでしょうか！！
まとめ
今回は、無料でデプロイ環境が使えるHEROKUにNodeとExpressで実装したRest APIをデプロイしてみました。
HEROKUのデプロイは、自動化されておりGIT操作さえ知っていればデプロイできます。
学習に使った本はこちら！
ポチップ
ポチップ
クマじいAmazon Kindle Unlimited でもNode.jsの本はいっぱいあるんじゃ！！
今回は、GITについては詳しく説明していないので、GITがわからないよ。。。と言う方は、ぜひ調べてみてください！
また、HEROKUだけでなくAWSなどにもデプロイを挑戦してみるのもいいかもしれませんね！
