Azure App Service の Git 活用 (さまざまなシナリオ)


こんにちは。

今後のハンズオンのために、Azure App Service の Web App (旧 Azure WebSite) における git 利用のいくつかのパターンをメモしておきます。(既に Azure を使いこなしている方は読み飛ばしてください。)
ハンズオンの中でさまざまな形で利用しますので、具体的手順を (あとから) 確認する際などに ご参照ください。

 

Local 編集と Azure Web App への発行

ローカル (Sublime Text 等) でコード作成をおこない、Azure Web App (Azure WebSite) に Publish するオーソドックスな方法です。
1 人で開発をおこなっている場合や、小さなコードなどを試しに Azure Web App (Azure WebSite) に配置して動かしてみたい場合などに使えます。

Azure Portal で Azure Web App を作成したら [Set up continuous deployment] というブレード (下図) が表示されるので、これをクリックします。

表示される画面で [Choose source] を選択すると、下図のリポジトリーの選択画面が表示されるので [Local Git Repository] を選択します。

設定を完了して、[Settings] – [Properties] を選択すると、Azure Web App に Git の URL が設定されているのが確認できます。
この URL をコピーします。

この URL を使って、ローカル環境 (Sublime Text, Git Bash など) から git clone や git push をおこなえます。(Local Repository と組み合わせた開発が可能です。)

// clone from Azure Web App
git clone https://tsmatsuz_en@tsmatsuz-test02.scm.azurewebsites.net:443/tsmatsuz-test01.git

// edit using sublime, etc...
//

// push changes to Azure Web App
cd tsmatsuz-test01
git commit -a -m "bug fix"
git push -u origin master

npm や composer などを使った追加パッケージの登録など、配置で必要な作業は deploy.sh に記述しておくと良いでしょう。

 

既存の Repository (Github など) のソースコードの配置

Github など外部 Repository に配置済の自身のプロジェクトのソースや、オープンソースなどのソースコードをダウンロードして、Azure Web App (Azure WebSite) で使用できます。
ソースコードが大きくなってきた場合には、Github など (外部 Repository) で管理し、必要に応じ、この方法で配置すると良いでしょう。

この場合は、[Set up continuous deployment] で [External Repository] (下図) を選択し、必要な情報 (Repository の URL, Branch など) を設定すれば OK です。

なお、後述する Azure の App Service Editor を使用する場合には、App Service Editor から [Clone from a git url] (下図) をクリックして clone しても構いません。

 

既存のRepository (Github など) との動的連携

チームのソース管理の Repository として Github などを使用しながら、最新のソースを Azure Web App (Azure WebSite) に反映 (同期) できます。
これにより、開発に関与する他のメンバーは、Repository に commit された最新の状態 (動作) を常に Azure Web App (Azure WebSite) で確認できます。

この設定をおこなうには、上記の [Set up continuous deployment] で [Github] を選択して必要な設定をおこないます。(後述の通り Github の project に必要な設定を書き込むため、Github の認可情報の設定なども必要です。)

選択した project のソースコードが Azure Web App に反映されます。
試しに、ソースコードの変更をおこなって Github に push しなおすと、変更された内容が Azure Web App に反映されるのが確認できます。

内部では Github の Webhook という仕組みが使われています。(この設定は、project の [setting] から確認できます。)

 

Azure Web App におけるコード編集と Repository 連携

Azure の App Service Editor を使用すると Azure Web App (Azure WebSite) 自体をコード作成 (編集) をおこなう開発環境として利用し、Git を使って Remote Repository と連携できます。

Azure Web App でコード編集をするには「App Service Editor で PHP アプリ開発」で解説した手順で App Service Editor の Extension を有効にします。(下図参照)

App Service Editor のエディターを表示し、Navigation (左) の [Git] アイコン  をクリックすると、下図の Git ツールが表示されます。[Initialize git repository] をクリックすると App Service Editor (Azure Web App) 上の Git 環境が初期化 (git init) できます。

git が有効になるとソースの変更箇所も App Service Editor でビジュアルに確認できます。
ソースの変更が完了したら commit をおこなってください。(上図の Git ツールで commit できます。)

commit が完了したら、App Service Editor の Console を表示し (Shift-Ctrl-c)、他の Repository (Github など) に push できます。

// set github repository to origin
git remote add origin https://github.com/tsmatsuz/testphp.git
// push source to github
git push -u origin master

 

※ 変更履歴

2015/03/26  Azure WebSite から Azure Web App に名称変更

2016/07/19  Visual Studio Online (Monaco) から App Service Editor に名称変更

 

Comments (0)

Skip to main content