Expressの続きです。前回はローカル環境のMAMPのMySQLMySQLに対してFetch APIのデータを使ってCRUD処理しました。今回からはクラウドのPaaS環境であるHerokuにNode.js環境を作って行きたく。今回はローカル環境にHeroku CLI環境を作ってHerokuにデプロイするまで。それではいきましょう！
【目次】
- 前回のおさらい
- Heroku CLIをインストール
- Herokuにログインする
- アプリを準備する
- Heroku上にアプリを作成
- アプリのファイルをHerokuにデプロイ
- ファイルを修正してデプロイしてみる
- 最後に
※参考：前回記事
【Express】Fetch APIとMySQLを連携してフォームからデータベースにCRUDする - クモのようにコツコツと
※参考：Node.js / Expressを習得するためにやったことまとめ
qiita.com
前回のおさらい
ローカル環境のMAMPのMySQLに対してFetch APIのデータを使ってCRUD処理をした。
※参考：【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
英語で「何かキーを打って」みたいなメッセージが出るので何か打つと…
ブラウザが開いてログイン画面
ログインする
成功！
アプリを準備する
ここからは下記の内容を元に進める。
※参考：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
ローカル環境にファイル一式が作成された！
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
開いてみても現時点では内容は無いよう。。
この画面は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とは
今自分が作業している場所を示すポインタ
ふむふむ、作業している場所を強制的に指定してくれるわけか。
ブラウザでアプリを開くコマンド。
heroku open
おお、なんかすごいのでた！！
ファイルを修正してデプロイしてみる
このページに表示されてるファイル部分を探そう。
「Views/pages」フォルダの中にejsファイルがある。
「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連携） - クモのようにコツコツと
アプリをブラウザで見てみると…
やた！コテコテのタイトルになった！！！w
※参考：https://aqueous-mountain-80366.herokuapp.com
最後に
ということでHeroku上にNode.js環境をデプロイしてブラウザに表示することに成功しました！
次は、HerokuでpostgreSQLを設定して、接続、CRUD処理に入って行きたく思います。ただ、HerokuでのNode.js環境はまだいろいろ不慣れなため、段階的に少しずつ進めていくことになるかもしれません。
それではまた！
※参考：Node.js / Expressを習得するためにやったことまとめ
qiita.com