Heroku で Node.js を始める方法

Heroku では Python, Ruby, Go など様々な言語を用いてウェブアプリを開発することができますが、今回は Node.js での開発をスタートする方法を紹介したいと思います。

スポンサーリンク

開発環境の構築

今回は macOS で進めていきます。Windows の場合は、公式ページからダウンロードしてください。

まず、パソコンに Heroku の開発用パッケージをインストールします。

インストールが終了したら、メールアドレスとパスワードで Heroku にログインします。

Node.js, npm, Git を利用するので、インストールされているか確認します。

サンプルアプリのインストール

パソコン上にチュートリアルとして用意されているアプリをダウンロードして展開します。

アプリの構成

どのようなファイルによってアプリが構成されているかを簡単に確認します。

Procfile

プロセスタイプは web です。デプロイ時に実行するコマンドを書きます。

package.json

アプリの基本情報や依存するパッケージなどを記述します。

npm init でプロジェクトを初期化でき、package.json が生成されます。--yes オプションですべてデフォルト値で生成します。

ディレクトリ

  • public: CSS と画像
  • views: ejs (Embbed JavaScript)

index.js

アプリ本体のファイルです。Express がサーバの機能を提供しています。

ローカルサーバでの起動

ローカルで起動すると Procfile に従ってコマンドが実行され、サンプルのアプリであれば http://localhost:5000 で開くことができます。

Heroku へのデプロイ

heroku create では自動的に名前が付けられますが、--name オプションで既存のアプリと被りのない名前を付けることができます。

各コマンド

ログの確認

アプリのスケーリング

現在動作している dyno を調べることができます。dyno はコアのような概念で、無料プランではひと月 1000 dyno 時間まで利用できます。

最後に

サンプルアプリは Express というウェブアプリケーションフレームワークを利用しており、これによってルーティングなどが機能しています。また、UI として HTML ではなく ejs が用いられているようです。

Vue では webpack-dev-server (webpack-serve) が開発用サーバとして使われることが多く、開発中は Express を考えなくてもなんとかなりますが、本番環境にデプロイするときは webpack-dev-server が使えないので、そこら辺を考える必要があります。

スポンサーリンク