HEROKUでNodeアプリをデプロイしてみよう!開発したアプリを公開する!

NodeアプリをHEROKUで公開
  • URLをコピーしました!

今まで作成していたNodeアプリを実際にHEROKUで公開していきます。
公開することにより、誰でもアプリを使うことができるようになるので、ぜひ公開してみてください。

学習に使った本はこちら!

著:掌田津耶乃
¥2,851 (2024/03/26 11:32時点 | Amazon調べ)
クマじい

Amazon Kindle Unlimited でもNode.jsの本はいっぱいあるんじゃ!!

  • 技術書をたくさん読みたい!
  • 色々な技術を学びたい!
初回30日間無料体験があるので、どのような参考書があるか確認してみよう!

Kindle Unlimitedで技術書を読むならタブレットがあるとさらに便利ですよ!
10インチあるとより見やすいと思いますが、7インチでも十分見やすくなります!

もし、まだNodoのアプリは作ってないよと言う方は、過去の記事を是非参考にしてみてください!
上から順番に進めていくといいとおもいますが、ここは分かるよと言う方は知らない場所から進めてもらえればいいと思います!

公開したいアプリがある方は、ぜひ参考にして公開してみてください!

こんな方に見て欲しい内容です!
  • HEROKUでアプリケーションを公開したい!
  • 無料でアプケーションを公開してみたい!
  • 簡単にアプリケーションを公開したい!
  • Nodeのアプリケーションを公開したい!
目次

なぜHEROKUに公開するのか!

クマじい

HEROKUってなんじゃ?

HEROKUは、過去の記事を読んでくれている方ならご存知だと思いますが、コンテナベースのクラウド形PaaSです。
アプリケーションのデプロイ環境やデータベースを無料で使うことができます。

なぜHEROKUなのか、AWSとかGCPじゃダメなのと言う方もいるかもしれませんが、
結論AWSでもGCPでも問題ありません。

AWSは、無料期間がありますが基本的には有料ですし、デプロイ環境を作るだけで多少なりとも学習コストがかかります。
その点、HEROKUであれば無料で簡単にデプロイできるというメリットがあり、今回はHEROKUにデプロイすることにしています。

もし、HEROKUにまだ会員登録していない方は、こちらを参考に会員登録してみてください!
記事はデータベース環境の構築も含まれていますが、デプロイするだけなら会員登録だけで問題ないです!

HEROKUに新規アプリを作成する。

デプロイするには、まずHEROKUに新規アプリを作成しなければいけません。HEROKUでは、アプリと言っていますがサーバみたいな単位に捉えるといいと思います。

アプリの作成は、HEROKUの管理画面からやっていきます!
下の画面の右上「New>Create new app」を選択します!

HEROKU 
Jump to Fa•ærites. Apps. Pipelines. Spaces.. 
Personal C 
Q 71ter apps and pipelines 
postgres•sample 
ntati 
heroku•20 
New 
• United States 
twku m 
Blogs 
re ms of 
Cook i" 
o 
C' 2021

遷移した画面でApp nameとChoose a regionを入力してください!
どちらも任意で問題ないです。

「Create app」を押してアプリを作成したら完了です!

HEROKUにデプロイしよう!

先ほど作成したアプリにデプロイしていきます。
デプロイ方法は、簡単でGITでプッシュするだけでデプロイができます。

もしGITをダウンロードしていない方は、こちらからダウンロードしておいてください!

先ほど、アプリを作成した後の画面で、下のような項目があったと思います。
基本的にはこの手順に沿ってデプロイしていけば大丈夫です!

HEROKU CLIをインストールする!

まず、Heroku CLIをインストールしていきます。

Heroku CLIは、こちらからインストールできます!
この画面からご自身の環境にあったHeroku CLIをダウンロードしてください!

Download and install 
O 
The Heroku CLI requires Git the popular version control system. It you dont already have Git 
installed. complete the following before installing the CLE 
• Git installation 
• First-time Git setup 
macOS 
S brew tap heroku/br•ew brew install heroku 
•Q Ubuntu 16+ 
Windows 
Download the appropriate 
installer for your Windows 
installation: 
64-bit installer 
32-bit installer 
S sudo snap install 
Run the following from your terminal: 
- -classic heroku 
Snap is available Other Linui OSS as

ダウンロードしたら、実行してインストールしていきます!
基本的には、デフォルトで進めていきます!

3 
~ qe 一

インストールできれば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」以外のキーを入力したら下のような画面に遷移すると思います!

HEROKU 
Log in to the Heroku CLI 
Log In 
Herokuisa company 
Terms of Service Privacy Cookies 
C 2021 S&sforce.com

先ほどアプリを作成したアカウントでログインしてもらって、下の画面まで進めることができればOKです!

HEROKU 
Logged In 
You can close this page and return your CLI It 
should now be h•gged im 
'—Eroku is a company 
Terms of Service Privacy Cookies 
2021 Saksforce.com

ここまでできると、コマンドプロンプトで下のようなメッセージが出ていると思います!
これが出ていればログイン完了です!

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アプリ名].git

HEROKUのリポジトリにプッシュする!

ここからは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 -> master

HEROKUの管理画面を確認しよう!

本当にデプロイできたか、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操作さえ知っていればデプロイできます。

学習に使った本はこちら!

著:掌田津耶乃
¥2,851 (2024/03/26 11:32時点 | Amazon調べ)
クマじい

Amazon Kindle Unlimited でもNode.jsの本はいっぱいあるんじゃ!!

  • 技術書をたくさん読みたい!
  • 色々な技術を学びたい!
初回30日間無料体験があるので、どのような参考書があるか確認してみよう!

Kindle Unlimitedで技術書を読むならタブレットがあるとさらに便利ですよ!
10インチあるとより見やすいと思いますが、7インチでも十分見やすくなります!

今回は、GITについては詳しく説明していないので、GITがわからないよ。。。と言う方は、ぜひ調べてみてください!

また、HEROKUだけでなくAWSなどにもデプロイを挑戦してみるのもいいかもしれませんね!

NodeアプリをHEROKUで公開

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

東京在住で20代のエンジニアです。
特に特技があるわけではありませんが、誰もが楽しくプログラミングができたらいいと思い、「teech lab.」を開設いたしました。

Enjoy Diaryという、ガジェットや雑貨を紹介しているブログもあります!
ぜひ、みてください!!

目次