【Heroku入門(2)】GitHubと連携してアプリを自動デプロイしてみる

はじめに

前回はAngularのアプリをHerokuにデプロイする手順について解説しました。

 

今回はGitHubとHerokuを連携させ、

ローカル環境でソース更新してGitHubにプッシュするとHeroku上に自動デプロイさせる手順について解説します。

 

HerokuとGitHubとの連携を簡単な絵にするとこんな感じです。

 

 

 環境

  • OS:OS X 10.11 El Capitan
  • Git:2.10.1(Apple Git-78)

 

前提

以下が完了している前提で説明します。

【Heroku入門(1)】AngularアプリをHerokuへデプロイしてみる

 

HerokuとGitHubの連携

HerokuとGitHubを連携させる手順は以下です。

  1. GitHubアカウント作成
  2. GitHub上にリポジトリ作成
  3. HerokuのGitHub連携設定
  4. GitHubへアプリケーションプッシュ

1.GitHubアカウント作成

GitHubアカウント登録画面を開き、アカウント情報を入力します。

 

無料プランを選択します。

 

自動送信メールが登録したメールアドレスに届くので、

「Verify email address」リンクをクリックしてメールアドレスの検証をします。

 

件名が「Welcome to GitHub!」という自動送信メールが届いたらアカウント作成は完了です。

 

2.GitHub上にリポジトリ作成

GitHubにログインし、リポジトリを追加します。

 

リポジトリ名とリポジトリの説明を入力します。

上の画面が表示されれば、GitHubのリポジトリ作成は完了です。

 

3.HerokuのGitHub連携設定

Herokuにログインし、angular-helloherokuアプリのGitHubのタブを開きます。

 

Githubの認証を行います。

 

自動デプロイ設定を行います。

上のようにGitHubがConnectedとなれば完了です。

 

4.GitHubへアプリケーションプッシュ

ターミナルを開き、プッシュ対象のプロジェクトにカレントディレクトリを移します。

command
$ cd helloWorld
プッシュ先のリモートリポジトリを追加します。
command
git remote add origin https://github.com/○○○/helloworld.git

 

リモートリポジトリへプッシュします。

command
git push -u origin master
以上でアプリケーションのプッシュは完了です。

 

 

Herokuビルド&デプロイ確認

Herokuにログインし、

「Deploy Branch」ボタンをクリックします。

 

GitHub上のソースからビルド&デプロイが実行できます。

ビルドが完了したら、「View」をクリックしてアプリが正常に動作することを確認します。

 

 

上の画面が表示されればOKです。

※上の例ではHerokuから手動でビルドしましたが、GitHubにプッシュするとHerokuが自動でデプロイしてくれます。(プッシュ完了後、しばらく待つ必要がありますが。。。)

 

 

おわりに

今回はHerokuとGitHubを連携させて、GitHubにソースコードをプッシュすると、自動で最新バージョンのアプリをデプロイさせる手順について解説しました。

Herokuは、

Angularアプリの実行環境が無料で利用できることに加えて、Jeninsのようなビルドサーバの役割まで果たしてくれました。

 

PaaS超便利です。。。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください