2016.10.18

Azure WebAppsにGitLab連携でデプロイしてみよう

のびすけ

Azure Studio

こんにちは、dotstudio代表ののびすけです。

最近Azure WebAppsを使って開発をしています。dotstudioではGitLabを利用してソースコード管理をしているのでGitLabとWebAppsを連携し自動デプロイをする方法を紹介します。

「Auto-Deploying to Azure App Services from GitLab」を参考にしましたが、調べても英語記事しかなかったので日本語記事は初めてだと思います！

今回やること

GitLabはGitHubやBitbucketのようなGitのホスティングサービスです。 GitHubとBitbucketはWebAppsが公式対応しているため簡単に設定できますが、GitLabは公式対応していないため少しやり方が特殊です。

やりたいことはこの図の通りで、作業者がGitLabにPushしたら自動的にWebAppsにデプロイされる仕組みを作ります。

事前準備

以下の内容を事前に済ませておきましょう。

WebAppsのアプリケーションを作成しておく
GitLabでリポジトリを作成しておく
GitLabに手元のマシンからPushできる状態にしておく

設定してみよう

1. WebAppsにGitLabのURLを紐付ける

WebAppsのデプロイ設定をします。

アプリのデプロイ > デプロイオプション > ソースの選択 > 外部リポジトリを選択します。

GitLabのリポジトリURLを入力しましょう。 https形式とSSH形式のどちらでも大丈夫です。

無事に設定が完了すると、メニューの 概要 > 外部リポジトリプロジェクトにリポジトリのURLが設定されます。

2. WebAppsのデプロイ用SSH公開鍵を取得する

WebAppsに外部からアクセスするためにWebAppsのSSH公開鍵を取得します。

通常WebAppsの公開URLにアクセスする場合http://アプリケーション名.azurewebsites.netというドメインにアクセスしますが、ここでは通常のURLに.scmが追加されたドメインにアクセスします。

https://アプリケーション名.scm.azurewebsites.net/api/sshkey?ensurePublicKey=1 にアクセスしてみましょう。

このssh-rsaから始まるダブルクォートで囲まれている部分が公開鍵になります。

ちなみに、アプリケーション名がn0bisukeの場合はhttps://n0bisuke.scm.azurewebsites.net/api/sshkey?ensurePublicKey=1になります。

3. GitLabの対象リポジトリにデプロイ用SSH公開鍵を設定する

先ほどのSSH公開鍵をGitLabに設定します。

https://gitlab.com/ユーザー名/リポジトリ名/deploy_keysにアクセスしましょう。リポジトリの 設定(歯車マーク) > Deploy Keysからもアクセスできます。

Titleの項目に任意の名前を入力し、Keyの項目に先ほどのSSH公開鍵を貼りましょう。

これでGitLabのリポジトリに鍵を紐付けられ、GitLabからWebAppsにデプロイすることが出来るようになります。

4. WebAppsのWebhookアドレスをGitLabに紐付ける

ここまでの作業でWebAppsとGitLabの連携は出来ているのですが、今回は作業者がGitLabにPushしたらデプロイされる仕組みにしたいため、Pushを検知するための設定をします。

WebAppsのメニューから 設定 > プロパティ > デプロイ開始のURLの項目にあるURLをコピーしましょう。

https://$アプリケーション名:パスワード@アプリケーション名.scm.azurewebsites.net/deployというURLが設定されているはずです。

GitLab側に移動し、 https://gitlab.com/ユーザー名/リポジトリ名/hooksにアクセスしましょう。リポジトリの 設定(歯車マーク) > Webhooksからもアクセスできます。

URLの項目に先ほどのWebAppsのWebHookアドレス(https://$アプリケーション名:パスワード@アプリケーション名.scm.azurewebsites.net/deploy)を貼り付けます。他の項目は特に変更せずにAdd Webhookで追加します。

これで設定は完了です。

5. 試してみる

Gitで適当にPushしてみましょう。するとWebAppsのデプロイオプションの項目で同期が確認できます。

http://アプリケーション名.azurewebsites.netにアクセスしてみるとソースコードが反映されていることが分かると思います。

お疲れ様でした！

おわりに

イメージのしやすさから「GitLabからWebAppsにデプロイ」という表現を使いましたが、実際には「WebAppsがGitLab上のソースコードをPullしている」という表現の方が正しいと思います。

GitLab側はPushがあったことをWebhookでWebAppsに声を掛けてあげて、WebApps側はGitLabから声が掛かったらPullしにいく、という流れです。

ちなみに今回はWebhookの設定でかなりハマって、「projectkudu/kudu」や「Publishing to Azure Web Apps from GitLab repository on trigger」にhttps://$mysite:[email protected]/deployがWebhookのURLだという記載があるのですが、BigRandomPasswordが謎すぎてかなり詰んでました。 WebApps側で「デプロイ開始のURL」という表現になってるのも分かりにくい気がしますね（苦笑）。

WebAppsとGitLabの仕様が変わるまではしばらくこの手順が生きるはずですので、参考になれば幸いです。