クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

【Express】Heroku CLIを使ってNode.js環境をHeroku上にデプロイする

Expressの続きです。前回はローカル環境のMAMPのMySQLMySQLに対してFetch APIのデータを使ってCRUD処理しました。今回からはクラウドのPaaS環境であるHerokuにNode.js環境を作って行きたく。今回はローカル環境にHeroku CLI環境を作ってHerokuにデプロイするまで。それではいきましょう!

【目次】

※参考:前回記事
【Express】Fetch APIとMySQLを連携してフォームからデータベースにCRUDする - クモのようにコツコツと

※参考:Node.js / Expressを習得するためにやったことまとめ
qiita.com

前回のおさらい

ローカル環境のMAMPのMySQLに対してFetch APIのデータを使ってCRUD処理をした。 f:id:idr_zz:20200914064813j:plain

※参考:【Express】Fetch APIとMySQLを連携してフォームからデータベースにCRUDする - クモのようにコツコツと

次はクラウド環境のDBに接続してみたい。HerokuにはMySQLと同じRDBであるpostgreSQLが用意されており、SQL文で操作できるはずなので、それと接続してCRUD処理を体験したい。

Herokuは以前、PHPやLaravelで体験をしている。

PHPの時は黒い画面(ターミナル)に慣れてない頃でSourceTreeを使ってGitHub経由でデプロイした。

※参考:ローカル→Sourcetree→GitHub→Herokuに同期する方法(黒い画面不要!) - クモのようにコツコツと

LaravelはHeroku CLIからHerokuに直接デプロイしているが、まだコマンドに慣れてなくて苦戦した覚えがある。

※参考:LaravelをMAMP環境からHerokuにデプロイするためにやったこと調べたこと - クモのようにコツコツと

今は以前よりはGitやコマンドに慣れてはいるが、PHP環境ではなくNode.js環境という意味では今回も初体験になる。

Heroku CLIをインストール

Herokuのチュートリアルって英語なんだよなーと思ったら、なんと!日本語に翻訳されたページも用意されていた!!(URLに「ja」を付けると日本語になる!)

※参考:Heroku スターターガイド (Node.js) | Heroku Dev Center

まずはHeroku CLIをインストール。こちらの内容を参考に進めてみる。

※参考:Heroku スターターガイド (Node.js) | Heroku Dev Center

Homebrewのbrew installコマンドを使う方法にて。

brew install heroku/brew/heroku

HomebrewについてはLalavelの記事を参照。

※参考:LaravelをMAMP環境からHerokuにデプロイするためにやったこと調べたこと - クモのようにコツコツと

Heroku CLIはローカルからHerokuにアクセスするためのツール。

Heroku Command Line Interface (CLI) を使用すると、Heroku アプリをターミナルから直接、簡単に作成および管理できます。Heroku CLI は、Heroku を利用する際に必要なツールです。

※参考:Heroku CLI | Heroku Dev Center

Herokuにログインする

次にHerokuにログインするコマンド。

heroku login

英語で「何かキーを打って」みたいなメッセージが出るので何か打つと…

ブラウザが開いてログイン画面 f:id:idr_zz:20200922161233j:plain

ログインする f:id:idr_zz:20200922161236j:plain

成功! f:id:idr_zz:20200922161240j:plain

アプリを準備する

ここからは下記の内容を元に進める。

※参考:Heroku スターターガイド (Node.js) | Heroku Dev Center

GitHub上にHerokuが用意しているNode.jsのサンプルのリポジトリがある。これを使いたい。

※参考:GitHub - heroku/node-js-getting-started: Getting Started with Node on Heroku

まず、cdコマンドでアプリを保存したいフォルダに移動する。

cd (ファイルのパス)/フォルダ名

git cloneでGitHub上からローカルにクローンする。

git clone https://github.com/heroku/node-js-getting-started.git

ローカル環境にファイル一式が作成された! f:id:idr_zz:20200922161604j:plain

package.jsonを見るとEJSとExpressがインポートされていることがわかる。

  "dependencies": {
    "ejs": "^2.5.6",
    "express": "^4.15.2"
  },

やはりサーバサイド作業にExpressは欠かせないんだな。EJSはHTMLテンプレートを作るためのミドルウェアだな。

ターミナルはアプリがあるフォルダに移動する。

cd node-js-getting-started

Heroku上にアプリを作成

ここからはこちらの内容を参考に進める。

※参考:Heroku スターターガイド (Node.js) | Heroku Dev Center

Heroku上にアプリを作成するコマンド。

heroku create

「aqueous-mountain-80366」という名前のアプリが作られた!(名前が被ると作れないので自動命名にした)

Creating app... done, ⬢ aqueous-mountain-80366

この六角形(⬢)はLaravelの時に印象に残ったんだった。久しぶり。

アプリのURLはこちら

https://aqueous-mountain-80366.herokuapp.com

開いてみても現時点では内容は無いよう。。 f:id:idr_zz:20200922162014j:plain

この画面はLaravel時代も最初に遭遇したメッセージだ。

※参考:LaravelをMAMP環境からHerokuにデプロイするためにやったこと調べたこと - クモのようにコツコツと

アプリのファイルをHerokuにデプロイ

いよいよローカルからHerokuにデプロイする!

チュートリアルでは下記のコマンドを打つ、とあるがエラーになった。。

git push heroku master

こんなエラーメッセージ

error: src refspec master does not match any
error: failed to push some refs to 'https://git.heroku.com/aqueous-mountain-80366.git'

エラー:src refspecマスターが一致しません
エラー:一部の参照を「https://git.heroku.com/aqueous-mountain-80366.git」にプッシュできませんでした

いろいろな方法を調べたり試したりしたが、下記のコマンドを打ったらうまくいった!

git push heroku HEAD:master

※参考:私はプッシュしてエラーを取得したい:src refspec masterは一致しません

masterの頭に追記した「HEAD:」、これは一体なんざんしょ?

HEADとは
今自分が作業している場所を示すポインタ

※参考:GitのHEADとは何者なのか - Qiita

ふむふむ、作業している場所を強制的に指定してくれるわけか。

ブラウザでアプリを開くコマンド。

heroku open

おお、なんかすごいのでた!! f:id:idr_zz:20200922163007j:plain

ファイルを修正してデプロイしてみる

このページに表示されてるファイル部分を探そう。

「Views/pages」フォルダの中にejsファイルがある。 f:id:idr_zz:20200922163233j:plain

「index.ejs」の中にそれらしきテキストを発見!

<div class="jumbotron text-center">
  <div class="container">
    <!-- 中略 -->
    <h1>Getting Started on Heroku with Node.js</h1>
    <p>This is a sample Node application deployed to Heroku. It's a reasonably simple app - but a good foundation for understanding how to get the most out of the Heroku platform.</p>
    <!-- 中略 -->
  </div>
</div>

h1タグをコテコテの日本語にしてみるw

<div class="jumbotron text-center">
  <div class="container">
    <!-- 中略 -->
    <h1>のおど・じぇいえすでへろくを使い始める</h1>
    <p>This is a sample Node application deployed to Heroku. It's a reasonably simple app - but a good foundation for understanding how to get the most out of the Heroku platform.</p>
    <!-- 中略 -->
  </div>
</div>

ローカルの履歴に変更内容を追加

git add .

ローカルリポジトリでコミットを作成

git commit -m "タイトルを日本語化"

リモートリポジトリにコミットをプッシュ!先ほどと同様、「HEAD:」付きにて。

git push heroku HEAD:master

デプロイは成功した!

なお、Gitの基本コマンドについてはこちらを参照

※参考:【GitHub】Gitコマンド事始め(ローカルにクローン→GitHubにプッシュ→GitHub Pages連携) - クモのようにコツコツと

アプリをブラウザで見てみると… f:id:idr_zz:20200922163851j:plain やた!コテコテのタイトルになった!!!w

※参考:https://aqueous-mountain-80366.herokuapp.com

最後に

ということでHeroku上にNode.js環境をデプロイしてブラウザに表示することに成功しました!

次は、HerokuでpostgreSQLを設定して、接続、CRUD処理に入って行きたく思います。ただ、HerokuでのNode.js環境はまだいろいろ不慣れなため、段階的に少しずつ進めていくことになるかもしれません。

それではまた!


※参考:Node.js / Expressを習得するためにやったことまとめ
qiita.com