JavaScript
Git
Node.js
GitHub
Heroku

HerokuとGitHub連携でWebサイトを公開する方法(Node.js可能)

Heroku(へロック)はPaaS(Platform as a Service)と呼ばれるサービスで、

アプリケーションを実行するプラットフォームです。

レンタルサーバーとは少し違いますが、進化系だと考えてみて下さい。

特徴

- (ある一定のトラフィックまで)無料で利用可能  ※突然有料版に切り替わることはないらしいです

  →個人利用で試したい場合でしたら無料で問題ないかと思います。

- Node.jsが動く

  →Node.jsが動く手頃な価格のレンタルサーバーって実はあまりありません

- git文化

  →gitでコミットすることで簡単にサービスを作成できたり、公開まですることができます。

- GitHub連携可能

今回はGitHub連携して、Herokuを使い方法を説明します。

ところで、なぜ連携する?

Herokuのgitを使って、サイト公開することは可能ですが、

ソース管理などの観点から考えると、GitHubでソースを管理し、

Herokuで公開の方が利便性が高いと考えるからです。

次からは、先ず、GitHubアカウント、設定に始まり、

Herokuのアカウント作成、最後に連携までの流れを説明いたします。


GitHub

1) アカウントの作成(既に作成済みの場合はスキップ)

https://github.com/

にアクセスし、アカウントを作成してください。

詳細はググればすぐにわかるかと思います。

2)リポジトリを作成し、アップするファイルをコミット

ブランチはmasterを想定。


Heroku

1) アカウントの作成(既に作成済みの場合はスキップ)

https://jp.heroku.com/

2) Heroku CLIのインストール(既に済の場合はスキップ)

https://devcenter.heroku.com/articles/heroku-cli

これをインストールすることでコマンド入力が可能になります。

3) Herokuにログインし、作成。

ターミナルで以下を実行。


ターミナル

heroku login


アカウントIDとパスワードを聞かれるので入力する。

成功するとログインできる。


ターミナル

heroku create


herokuアプリを作成する。自動に生成されたドメインが返って来るので、

そのURLでサイトを公開できます。

herokuはここまででOK。後はGitHubと連携します。


HerokuとGitHub連携

1) Herokuサイトにアクセスし、作成したherokuアプリをクリック。

Deployタブをクリックし、

Deployment method欄:GitHub

を選択する。

2) これでGitHub連携は完了。

GitHub側でコミットするだけでHeroku側にデータが渡り、サイト更新されます。

2-2) もし、Heroku側でエラーになった場合は、

Settingsタブをクリックし、

Buildpacks欄を選択してください。

こちらの設定は自動で反映される場合もありますが、されない場合もあります。

されてない場合は設定する必要があります。

Node.jsの場合は"Node.js"を選択。

※ここが忘れがちになるので注意が必要です。