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