こんにちは、現役エンジニアの inno_tech です。
Node.js(express)で開発したWebアプリケーションをインターネット上に公開する方法をお探しでしょうか？
せっかく作ったアプリケーションを色んな人に見てもらいたいよね!
本記事は、Ubuntu 20.04LTS上で開発したNode.jsアプリケーション(express / DBなし)で説明します。
Herokuとは？
HerokuはSalesforce社が提供する製品の一つで、PaaS(Platform as a Service)と呼ばれるクラウドサービスの一種です。
ユーザー側メリットは、Herokuが提供するプラットフォーム(軽量Linuxコンテナ dyno)上で、Webアプリケーションをビルドし、全世界に公開することが無料で実現できることです(ただし無料版では一部制限あり)。
開発者向けにHeroku CLIというツールが提供されており、開発者は非常に簡単にWebアプリケーションをHeroku上にデプロイできる点もおすすめです。
個人開発者にとって無料で使えるのは本当にありがたい!
Herokuサービスの特徴や無料枠に関する情報は、公式HPをご覧ください。無料枠の主な制限は「稼動時間」と「アプリケーション数」です。
自作WebアプリケーションをHerokuに公開する手順
必要なステップは5段階です。この流れに沿って詳細の説明を進めます。
- Herokuアカウントの作成
- UbuntuにHeroku CLIをインストール
- 自作WebアプリケーションとHerokuの関連付け
- Node.js用ビルド設定
- デプロイ
まずは Herokuアカウントを作成し、Webアプリケーションを公開する準備を進めましょう。
Herokuアカウントの作成
まずは Herokuのトップページにアクセスし、新規登録 をクリックします。
氏名、メールアドレス等のアカウント情報を入力し、無料アカウント作成 をクリックします。
すると登録メールアドレスにメールが届くので、メールに記載された認証用のURLにアクセスします。
最後に、パスワードの設定をします。
ログインページが開くことを確認できれば、アカウント作成は完了です。
次に、Ubuntu(Linux) でHeroku CLIツールを利用するためのセットアップを行います。
Ubuntu側の準備
ターミナルからsnapコマンドで Heroku Command Line Interface (Heroku CLI) をインストールします。
(ちなみに、npmによるインストールもサポートされています。参考⇒ 公式HP)
sudo snap install heroku --classic
# heroku v7.60.1 from Heroku✓ installedHeroku CLIをインストールすると herokuコマンドが使えるようになるよ。
次に、Heroku CLIを使って Herokuサービスへのログイン認証を行います。
# ログインコマンド
heroku login
# 以下のように表示されるので<Enter>を押下
› Warning: Our terms of service have changed:
› https://dashboard.heroku.com/terms-of-service
heroku: Press any key to open up the browser to login or q to exit: 自動的にブラウザが起動し、下にある画像のようなログイン画面が開くので、画面に沿って進めます。
メールアドレス、パスワードは事前に作成したHerokuアカウントを使用してください。
ログインが成功すれば、下の画像のように表示されます。
ターミナルに戻るとログイン成功というメッセージが表示されています。
Logging in... done
Logged in as [Heroku アカウント名]以上でUbuntu上でHerokuを使う準備が整いました。次に自作Node.jsアプリケーションをHerokuに関連付ける設定をします。
自作WebアプリケーションとHerokuの関連付け
もしGitが使えていないという方はこちらの記事を参考にGitを導入してください。
リポジトリとHerokuを関連付ける
ターミナルからheroku createコマンドを実行し、Heroku上にアプリケーションを作成します。
# 自作アプリのディレクトリまで移動
cd [Project Dir]
# heroku関連付け. [application_name]は自作アプリ名を入力
heroku create [application_name]
Creating ⬢ [application_name]... done
https://[application_name].herokuapp.com/ | https://git.heroku.com/[application_name].gitWebブラウザでHerokuにログインすると、先ほど設定したアプリケーションが追加されています。
git remote -vを実行すると、GitHub(origin)とは別にherokuというリモートリポジトリが追加されています。
# リモートリポジトリの設定を確認
git remote -v
heroku https://git.heroku.com/[heroku_app_name].git (fetch)
heroku https://git.heroku.com/[heroku_app_name].git (push)
origin git@github.com:[user]/[repository_name].git (fetch)
origin git@github.com:[user]/[repository_name].git (push)以上で、自作WebアプリケーションとHerokuが関連付けられました。次は Heroku上でnode.jsをビルドするための設定を行います。
Node.js用ビルド設定
Heroku | ビルド設定を追加
Webブラウザから先ほど追加したアプリを開き、Settingsタブを開きます。Add buildpack というボタンをクリックします。
buildpackの一覧から nodejsを選択し、Save changesをクリックします。
自作アプリ | buildpack設定を確認
続いてUbuntuのターミナルに戻り、buildpack設定が正しく設定されたかを確認します。
# プロジェクトがあるディレクトリに移動
cd [Project Dir]
# buildpacks設定確認
heroku buildpacks
=== [application_name] Buildpack URL
heroku/nodejsNode.js用のbuildpackが設定できました。さらに、自作アプリをHeroku上でビルドするための設定を行います。
自作アプリ | package.jsonに設定を追加
Herokuのデフォルト設定では、Node.jsアプリはnpm startというコマンドで実行されます。したがってpackage.jsonのscriptsに”start”コマンドが必要です。
app.jsがエントリーポイントの場合、"start": "node app.js",のように設定します。また、Node.jsのバージョンを指定したい場合は、engines にバージョンを指定します。
{
"name": "node_sample",
"version": "1.0.0",
"engines": {
"node": "16.14.2"
},
"description": "sample application.",
"main": "app.js",
"scripts": {
"start": "node app.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
～～ 以下省略 ～～
}お疲れ様でした! いよいよデプロイします！
いよいよデプロイ
最後にHerokuのリポジトリにソースコードをpushすればデプロイ完了です。
package.jsonが存在するディレクトリによってデプロイの方法が変わるのでそれぞれ説明します。
プロジェクトのルートディレクトリにpackage.jsonがある場合
heroku createで関連付けしたディレクトリ内にpackage.jsonがある場合、herokuのmainブランチを指定してpushします。
# デプロイ(ルートディレクトリにpackage.jsonが必要)
cd Project_root
git push heroku main
# 以下のようなメッセージならデプロイ成功!
…
remote: -----> Build succeeded!
remote: ! This app may not specify any way to start a node processプロジェクトのルートディレクトリにpackage.jsonがない場合
プロジェクトの構成によっては、package.jsonがルートディレクトリにない場合があります。例えば、以下のようなケースです。
Project_root/
├── App
│ ├── node_modules
│ ├── public
│ ├── controllers
│ ├── routes
│ ├── views
│ ├── package.json # Appディレクトリ内に存在
│ └── app.js
└── 他のディレクトリこの場合はgit subtree pushコマンドでpackage.jsonがあるディレクトリを指定します。
# ルートディレクトリにpackage.jsonがない場合
cd Project_root
# package.jsonのあるディレクトリを指定
# git subtree push --prefix [package.jsonがあるディレクトリ]/ heroku main
git subtree push --prefix App/ heroku main以上でデプロイが完了です。全世界のユーザーがあなたのWebアプリを使えるようになりました。
デプロイしたWebアプリのURL確認方法
デプロイしたWebアプリのアクセスURLは、WebブラウザでHerokuにログインし、対象のアプリケーションのSettingsタブ > Domains から確認できます。
独自ドメインの設定もできるみたいだね。
以上で自作Webアプリケーションを公開できました。Webアプリケーションの起動、停止はWebブラウザ経由でいつでも行えます。
まとめ
今回のまとめです。
- Webアプリケーションの公開にはHerokuがおすすめ
- Heroku CLIツールを利用してHerokuとプロジェクトを関連付けする
- git push でHeroku上にデプロイ
日々のデスクワークで肩こりや首こりにお悩みではないでしょうか？ 1つの解決方法としてマッサージガンという器具がおすすめです。Amazonで2000件以上の口コミを得たおすすめのマッサージ器具が気になる方はこちら。
参考になったでしょうか。
ほかにも役立つ情報が他のページにもあるかもしれません。
ご覧になるかはあなた次第です!
この記事がイイねと思ったら、Twitterフォロー か にほんブログ村のどちらかしてくれたら嬉しいよ!
コメント / ご要望