Microsoft Azure WebAppsとBitbucketを使って Gitデプロイ環境を構築してみた話。

Pocket

azuregit_ttl
これまではAzureへのアップロード(デプロイ)にはFTPを利用してきましたが、Gitを使うこともできます。
結構「AzureってGit使えないの?」と聞かれることがあるので、手順をまとめておきます!
私自身、コマンドに馴れていないのもあるので、今回は「SourceTree」「Bitbucket」を使いました。
一度設定してしまえば、基本的にはSourceTreeでPushをするだけでAzure側にデプロイできるようになるので、馴れればFTP操作よりラクかなとw

まずは「Git」について

Gitはコマンドで使うこともできますが、コマンドに不慣れな場合はGUIツールを使った方が馴染みやすいかなと個人的には思ってます。
GUIツールは色々ありますが、AzureにはBitbuketを使ってデプロイすることができるので、Bitbuketを提供しているAtlassian社のSourceTreeがいいかなと。

上記のツールについての設定などについては今回割愛します~。

Bitbucketを使ってGitデプロイ環境を構築してみる

今回は「BitbucketにPushした内容をステージング(DEMO)環境に反映」させるようにします。

azuregit01
作業者がHTMLファイルを修正した場合、どのような手順でAzure側に反映されるかの図解はこんな感じ。
直接本番環境にデプロイすることもモチロン可能なのですが、この形にしておけば万が一間違った内容がPushされてしまっても、本番環境に反映されてしまうことを防げるのでよいのかなと思います。

事前にBitbucketとSourceTreeの準備をしておく

Azure側で「継続的なデプロイ(Bitbucket)」の設定をする前に、Bitbucketのアカウントがない場合はアカウントの作成とリモートリポジトリを作成し、SourceTreeの設定などしておくと後々作業がスムーズです。

「継続的なデプロイ(Bitbucket)」の設定手順

今回はステージング環境に「継続的なデプロイ(Bitbucket)」を設定します。
(新規でWebアプリを作成しても、元々あるWebアプリでもどちらでも設定可能)

azuregit02
[設定]→[継続的なデプロイ]をクリック

azuregit03
[Bitbucket]をクリック

azuregit04
azuregit05
はじめて設定する場合、Bitbucketの承認が必要になります。

azuregit06
承認すると、Bitbucketのアカウント名が表示されます。
[プロジェクトの選択]をクリックすると、Bitbucketアカウントで管理しているリモートリポジトリが表示されます。
連携したいリモートリポジトリを選びます。(今回は「AzureGit_test」というリモートリポジトリを使用)

azuregit07
[ブランチの選択]をクリック。
「master」以外のブランチがある場合、そちらを選ぶこともできます。
ここまで設定できたら、[継続的なデプロイ]の下にあるOKボタンをクリック。
設定は以上で終わり。
「SourceTreeでPush」すると、Pushした内容がAzureのステージングに反映されるようになります。

キチンと反映されるか確認してみる

では本当に「SourceTreeでPushしただけでAzure側に反映」されるのか確認してみます。

azuregit08
ステージング環境なのでURL名は「-stg」になっています。
青枠で囲んでいる2箇所の変更をします。
ちなみにテストで使っているページですが、これはDreamweaver2015でBootstrapを使った場合にデフォルトで生成されるページ。
Dreamweaverもかなり便利になりましたw

azuregit09
HTMLファイルを修正しSourceTreeでコミット、Pushします。
(ブランド名の変更、ヘッダーのsearch部分の削除)

azuregit010
Pushした内容がキチンと反映されています。

azuregit011
Azure側ではどうなっているか見てみます。
Azure側では、最後にPushした内容(コミットメッセージ)が表示されています。

FTPとGit、両方のデプロイ設定をした場合は?

Gitに馴れていない人がチームにいる場合、今までどおりFTPでデプロイしたいということもあるかと思ったので「FTPでのデプロイとGitでのデプロイが共存できるのか」を試してみました。

結果:FTPでデプロイした内容が無かったことになる。

今回構築した環境を例にして図解してみるとこんな状態になってます。
azuregit012
Gitを使う場合はGitで統一しておいた方が安全かと思います…。

最後に

今回のステージングを使うこの構成は、昨年オルターブースさんで行われた「Azureもくもく会」で小島さんにお聞きしたものです。
実際にどういう感じになるのか試してみたくてなかなかできず…やっと試せましたw

Gitは1人で作業するときはあまり重要性を感じないのですけど、チームで作業する場合は使った方がいいなと。
(誰が作業したとか明確にわかるしデータの先祖返りも防げ、誰かの作業が終わるのを待つ必要もないので)
とはいえ、私もまだまだ不慣れなところあるので、もっとしっかり使いこなせるように頑張ろうと思います。

こちらの書籍を参考にしました

Gitが、おもしろいほどわかる基本の使い方33

Pocket

コメントを残す

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>