11
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-10-28

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"を選択。
※ここが忘れがちになるので注意が必要です。

11
15
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
11
15

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?