仕事帰りの奥さんを喫茶店で待っていた。

表参道の喫茶店である。

Mac Book Proを持ち込み、ｶﾀｶﾀｶｯﾀｰﾝ!とカッコよく作業をしていた。

ターミナルの黒色背景に緑文字は、僕ってかっこいい！という自己陶酔に浸るにはぴったりの環境だ。

$ mkdir hoge 
$ touch hoge.txt

やっぱり、hoge〜はいらないやと

$ rm -r *

と、やった直後に気がついた。

作業ディレクトリを変更していた。

結果、意図するものと異なるものを消してしまい、ここ１週間あまり作業していたソースやらなんやらが消失してしまった。

ファイルはローカルにしか存在しておらず、githubにもあげていなかった。

雑といわれがちな自分だけれども、表参道・喫茶店・MacBookPro + Terminalという組み合わせが、いつも以上の悲劇を呼んでしまった。

このことから、今更ではあるのだけれども、成果物をリモート上で管理していく習慣をつけていこうと思う。
(そもそもrm -r * なんてやらないほうがいいのだけれども)

そこで今回は、試しにHerokuを用いて作業物を管理してみたいと思うので、それをするにあたっての作業記録を書いていく。

ちなみに消えてしまったものは、以下の「Node.jsを始めてみよう」を参考にいろいろ試していたものだった。

わかりやすくて、すごい読みやすい内容なので自分みたいにNode.jsを始めたばかりの方にはおすすめしたい。僕は、こういうものを書けるようになりたい。

今回のHerokuを使う、というのものこれをきっかけに使ってみることにした。

github.com

作成したサイト

以下のように、HerokuにWebサイトをデプロイして、CSS練習用のページをつくってみた。

CSS練習用のTOPページ

あれ、Githubでソース管理して、ローカルで確認すればいいんじゃないの？っていう心の声は押さえましょう。

Herokuを使いたいんだよね！そうだよね！

まだ触ったばかりですが、githubにあげたタイミングでHerokuにもあげていこうかと思います。
(そもそもgithubにあげてなかったのが問題ですが)

Herokuをつかってみる

今回、sample_basic_cssというディレクトリ配下に、以下のnode.jsのプロジェクトを作成したので、こちらをHerokuにデプロイしていきます。

sample_baisc_css配下

.
├── app.js
├── bin
├── node_modules
├── package-lock.json
├── package.json
├── public
├── routes
└── views

アカウント作成

Herokuにアクセスして、新規にアカウントを作成します。
今回のように、データベースとかまったくつかわないシンプルなサイトであれば、クレジットカードとかの情報も不要でした。

www.heroku.com

Heroku CLIをインストールする

Herokuのサイト上からも、アプリケーションの作成やらなんやらできるみたいですが、CLIツールもあるので、こちらをインストールします。

MacOSであればHomebrewでつっこんじゃいましょう。

$ brew install heroku

Windowsであれば、インストーラーがあるみたいです。
devcenter.heroku.com

デプロイの準備

HerokuへのデプロイはGitを使って行います。
sample_baisc_cssはGithubで管理していたので、さくっといけました。

Procfileの作成

Herokuにデプロイする際に必要なファイルとのこと。
エントリーポイントがわかるように必要なのかな。

Procfile

web: node ./bin/www

sample_baisc_css配下

.
├── Procfile  //追加
├── app.js
├── bin
├── node_modules
├── package-lock.json
├── package.json
├── public
├── routes
└── views

Herokuでアプリケーション作成

「heroku create <アプリケーション名>」で空のアプリケーションを作成します。
作成されると、アプリケーションのURLとgitのリポジトリのURLが表示されます。

$ heroku create sample-basic-css
Creating ⬢ sample-basic-css... done
https://sample-basic-css.herokuapp.com/ | https://git.heroku.com/sample-basic-css.git

リモートのリポジトリもherokuという名前で作成されていますね。

$ git remote -v
heroku  https://git.heroku.com/sample-basic-css.git (fetch)
heroku  https://git.heroku.com/sample-basic-css.git (push)
origin  https://github.com/Ryomasao/sample_basic_css.git (fetch)
origin  https://github.com/Ryomasao/sample_basic_css.git (push)

あとは、githubにpushするのと同じ要領で