Help us understand the problem. What is going on with this article?

Azure Web AppをGitで継続的デプロイする

Azure Web AppとGitの連携がナイスだったので。
後日、GitHubとの連携について追記します。
追記しました(2016/02/18)

前提条件、環境

  • Mac OS X El Capitan
  • Git

Azure登録

未登録の場合はこちらのサイトから登録します。

スクリーンショット 2016-02-17 4.58.14.png

上記のActivateリンクをクリックします。
登録のためにはクレジットカード情報が必要になるので注意。

これで毎月3,000円の利用枠が無償でもらえます。
課金設定を変更しなければ上限に達した時点で自動ストップします。

Express Web App作成

AzureポータルにアクセスしWeb Appを作成します。
スクリーンショット 2016-02-17 5.08.02.png

今回はExpressフレームワークが事前インストールされているExpress Web Appを選択します。

スクリーンショット 2016-02-17 5.21.29.png

  1. 作成ボタンクリック
  2. App Serviceの名前入力
  3. リソースグループを選択
  4. App Serviceプラン選択(無料使用ならF1 Free)
  5. 作成ボタンクリックでFinish

スクリーンショット 2016-02-18 5.33.48.png
Web Appのメインタイルの参照ボタンをクリックし
Web Appが作成されていることを確認します。

ローカルGitリポジトリと連携

Express Web Appをリモートリポジトリとし、ローカルリポジトリにクローンします。
ローカルで修正後、リモートにPushするだけで自動的にデプロイが完了します。

カガクの力ってすごい。

継続的なデプロイ

ローカルGitリポジトリと連携するので
設定 -> 継続的なデプロイ -> ローカルGitリポジトリを選択します。
スクリーンショット 2016-02-17 5.28.55.png

デプロイ資格情報

設定 -> デプロイ資格情報に移動し
Gitでデプロイするためのユーザー名/パスワードを設定する必要があります。
スクリーンショット 2016-02-17 5.31.59.png

ローカルGitリポジトリ作成

Web AppのメインタイルにあるGit クローン URLをコピーします。
ローカルマシンの任意の場所で以下のコマンドを実行します。

Terminal
git clone [git-clone-url]

git cloneした際にデプロイ資格情報で設定したパスワードが求められます。

Web Appにデプロイ

本当に連携しているのかindex.jadeを書き換えて確認してみましょう。

views/index.jade
extends layout

block content
  h1= title
  p Welcome to #{title}
  p ローカルGitリポジトリと連携したよ!!

編集後ターミナルから

Terminal
git add .
git commit -m "First Commit"
git push -u origin master

git push完了後、Web AppのURLにアクセス
スクリーンショット 2016-02-18 5.39.12.png

ホラ簡単

自動認証化

いちいちパスワード入力を求められるのは非常に苦痛なので
パスワード保存を設定します。

Terminal
git config --global credential.helper osxkeychain

これを設定しておけば次回からパスワード入力する必要はありません。

GitHubと連携

Azure Web AppはローカルGitリポジトリだけではなくGitHubとも連携が可能です。

リモートリポジトリ変更

現在Azureをリモートリポジトリとしていますが、それをGitHubに向き先を変えます。

まずはGitHub上でWeb Appと同名のリポジトリを新規作成します。

次はローカルマシンで以下のコマンドをたたいてください。

Terminal
git remote set-url origin git@github.com:ユーザ名/リポジトリ名.git
git push -u origin master

GitHubに再度アクセスして、Pushされていることを確認してみましょう。

継続的なデプロイ

Azure上でローカルGitリポジトリとの接続を切断します。
スクリーンショット 2016-02-18 6.01.08.png

接続が切断できれば、今度はGitHubと再接続します。
「プロジェクトの選択」で先ほど作成したリポジトリを選択してください。

以上で準備は完了です!!

Web Appにデプロイ

現在の状態でソースを変更すると、以下のフローで自動的にデプロイが行われます。

ローカルGitリポジトリ
   ↓
(ソース変更)
   ↓
GitHubリポジトリ
   ↓
(自動認証)
(自動デプロイ)
   ↓
Azure Web App

実際にソースを変更してみましょう。

views/index.jade
extends layout

block content
  h1= title
  p Welcome to #{title}
  p ローカルGitリポジトリと連携したよ!!
  p GitHubと連携しました!!
Terminal
git add .
git commit -m "GitHub"
git push -u origin master

Web Appを参照してみると、、、、
スクリーンショット 2016-02-18 6.14.43.png

カガクの力ってすごい!!

以上です。

参考サイト

Azure $25 monthly
Azure App Service での GIT による継続的なデプロイ
git を https 経由で使うときのパスワードを保存する

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away