Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

Dropbox、GitHubからWindows Azure Webサイトにデプロイしてみる

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2014/03/28 14:00

 Windows Azure Webサイト(以降、Webサイト)では、オンラインストレージのDropboxや、リポジトリ管理WebサービスであるGitHubからのデプロイなど多様な連携をサポートしています。本稿では、これらを利用した連携方法について解説します。

対象読者

 今回の対象読者は下記のとおりです。

  • クラウドサービスに興味のある方
  • Windows Azureに関する基本的な知識

必要な環境

  • Windows Azureサブスクリプション
  • Dropbox、GitHubアカウント

Windows Azure Webサイトとは

 Windows Azureとはマイクロソフト社が提供するクラウドサービスで、多様なサービスが提供されています。中でもWebサイトは、Webアプリのホスティングに特化し簡単な操作でサービスを利用できることが特徴です。

 Webサイトには、無料、共有、標準の3つのプランが用意されており、制限付きながら無料でWebサイトを公開することもできます。プラン別の詳細は下表を参照してください。

表:Webサイトのプラン別機能
機能/プラン 無料 共有 標準
CPU 共有 共有 占有
カスタムドメイン 利用不可 利用可能 利用可能
カスタムドメインSSL 利用不可 利用不可 利用可能(別料金)
スケールアウト 利用不可 6インスタンスまで 10インスタンスまで
容量 1GB 1GB 10GB
データ転送 165MB/日 標準料金適用 標準料金適用
ステージングの利用 利用不可 利用不可 利用可能
備考 CPU制限あり(60分) CPU制限あり(240分) インスタンスサイズ選択可能

 さてWebサイトでは、ASP.NETアプリをはじめ、PHP、Node.jsおよびPythonなどの多くの開発環境をサポートしていますが、中でも注目すべきは、Webサービスとの多様な連携方法です。WebサイトではWebサービスからの多様なデプロイ(*1)方法が用意されています。Visual StudioやWebMatrixからの直接発行はもちろん、FTP/Git/Dropbox/GitHub/Visual Studio Online/Bitbucket/CodePlexなど多くの連携方法が網羅されています。

*1

 配置、配備とも言いますが、コンテンツをWebサイトへ公開する操作を言います。

 下表に、連携サービスとその概要をまとめました。

表:連携方法の概要
連携サービス 概要
FTP Webサイトが提供するFTPサーバーに接続してコンテンツをデプロイ
Visual Studio
Online
旧Team Foundation Service。
Visual Studio Onlineが提供するリポジトリと連携してデプロイ
ローカルGit Webサイト自身がホストするGitリポジトリにプッシュすることでコンテンツをデプロイ
GitHub GitHubが提供するGitリポジトリと連携してコンテンツをデプロイ
Dropbox Dropboxの連携フォルダーにコンテンツを同期してコンテンツをデプロイ
Bitbucket Bitbucketが提供するGit、Mercurialリポジトリと連携してコンテンツをデプロイ
CodePlex MSが提供するCodePlex(OSSをホストするWebサイト)と連携してコンテンツをデプロイ
外部リポジトリ 任意のGit、Mercurialリポジトリと連携してデプロイ。
ただし、インターネット上からアクセス可能な場所に公開されている必要がある

 お気づきかと思いますが、ざっくりと分類すれば、ソフトウェア開発者向けのリポジトリサービス(Visual Studio Online/GitHub/Bitbucket/CodePlex)との連携と、それ以外(FTP/Dropbox)に分けることができます。

 連携するリポジトリWebサービスは、使い慣れた物や利用目的にあったものを選択すればよいでしょう。例えばGitならばGitHubだけでなくVisual Studio OnlineやBitbucketでもサポートされており、どれを選択してもその部分に差異はありません。一方、FTPやDropboxではカジュアルに利用でき、非開発者をターゲットにしている側面があります。

 以上のことから、本稿では代表的な利用例として、GitHubとDropboxの2つについて取り上げることにします。

Windows Azure無料評価版を利用する

 さて、Windows AzureでWebサイトを利用するために、1か月の無料評価版が利用できます。すべての機能を利用でき、なおかつ約20,500円分までの課金分が無償で利用できます。

 Windows Azureサブスクリプションを契約するには、マイクロソフトアカウント(旧Live ID)が必要です。お持ちでない場合は、「Microsoftアカウント登録手続き」からアカウントを作成してください。

 マイクロソフトアカウントを取得した後に、「Windows Azureサブスクリプション申し込みStep by Step」を参考に、サブスクリプションを申し込んでください。特に課金枠を外す操作をしなければ、無償枠をオーバーして課金されることもないため、心配することはないでしょう。

Webサイトを作成する

 Webサイトの作成は、管理ポータルからほんの数クリックの操作と数十秒の時間で作成できます。作成については、以前の「Windows Azure Webサイトで利用するNode.js」のWebサイト作成部分を参考にしてください。

Dropboxと連携する

 それでは、早速Dropboxとの連携を設定してみましょう。前提条件としてDropboxアカウントをお持ちで、Windowsクライアントをインストール済みであることが必要です。アカウントをお持ちでない方は、「Dropboxページ」から設定を行ってください。

連携の設定

 それでは、連携の設定を始めましょう。はじめに、作成したWebサイトを管理ポータルから開くと、図1の画面が表示されます。ソース管理の統合メニューから[ソース管理のデプロイ設定]をクリックします。

図1:ソース管理のデプロイ設定画面
図1:ソース管理のデプロイ設定画面

 ソースコードの位置ダイアログが表示されるので、[Dropbox]を選択して右矢印ボタンをクリックします(図2)。

図2:ソースコードの位置選択画面
図2:ソースコードの位置選択画面

 Dropboxの認証サイトが表示されたら、お手持ちのアカウントでサインインしてください。サインインが完了すると、Dropboxから連携用フォルダーの作成要求が行われます(図3)。[許可]ボタンをクリックして、作成要求を許可します。

図3:フォルダー作成の許可画面
図3:フォルダー作成の許可画面

 認証が成功すると、発行の設定画面になります(図4)。上の[フォルダー名]コンボボックスで、<新しいフォルダー>を選択し、下の[フォルダー名]テキストボックスに任意のフォルダー名を入れます。Webサイト名と同じで問題ないでしょう。[デプロイのロールバックの有効化]をチェックしておくと、管理ポータル上でロールバック操作を行えるようになるため何かあったときに便利です。最後に完了ボタンをクリックします。

図4:発行の設定画面
図4:発行の設定画面

 以下の画面が表示されれば設定完了です。また、Dropboxの同期フォルダーである、「Dropboxフォルダー\アプリ\Azure\フォルダー名」が作成されているか確認してください(図5)。

図5:デプロイ画面
図5:デプロイ画面

コンテンツのデプロイ

 コンテンツのデプロイはとても簡単です。DropboxのWebサイト連携フォルダーにコンテンツをコピーし、管理ポータル側で同期するだけです。ここでは、Web上で無償公開されているテンプレートを展開してみました(図6)。展開後、Dropboxとの同期が完了するまで少し待ちます。

図6:Dropboxフォルダーへの展開
図6:Dropboxフォルダーへの展開

 次に、Webサイトの管理ポータルに戻り、[デプロイ]画面を開きます。同期ボタンが表示されるので、クリックしてWebサイトへコンテンツをデプロイします(図4)。この動作によりDropboxに格納されていたコンテンツがWebサイトに反映されます。デプロイが成功するとデプロイ履歴が画面に表示されます(図7)。

図7:デプロイ履歴画面
図7:デプロイ履歴画面

 同期完了後、[参照]ボタンを押すと該当Webサイトにジャンプします。展開したWebコンテンツが正しく表示されているでしょう。

 DropboxとWebサイトを連携する最大のメリットは、簡単さだと思います。特にデザイナーなどの非開発者にとっては、バージョンコントロールシステムを扱うのは難しいかもしれませんが、Dropboxなら簡単に扱うことができるでしょう。また、Dropbox自身にもフォルダーを共有する機能があるため、これらを利用して複数人での共同作業を行ってみても、おもしろいかもしれません。他にもちょっとした自己学習用などにも利用してみてください。

GitHubと連携する

 GitHubとは、Gitリポジトリを共有するためのWebサービスです。Webサイトでは、GitHubとも連携することができます。前提条件として、あらかじめGitHubのアカウントおよび、連携用のリポジトリを1つ作成しておく必要があります。GitHubのアカウントは、「GitHubページ」から登録できます。

リポジトリの作成

 リポジトリの作成は、GitHubポータル画面から行います。[New Repository]ボタンをクリックします。[Repository Name]に作成したいリポジトリ名を入力し、[Create Repository]ボタンをクリックすれば完了です(図8)。プライベートリポジトリを利用すると有料となってしまうので、ここではパブリックリポジトリを作成しています。

図8:リポジトリの作成画面
図8:リポジトリの作成画面

連携の設定

 Webサイトを新規作成し、Dropboxと同様の手順で[ソース管理のデプロイ設定]をクリックします。ソースコードの位置ダイアログが表示されるので、[GitHub]を選択して右矢印ボタンをクリックします(図9)。

図9:ソースコードの位置設定画面
図9:ソースコードの位置設定画面

 GitHubの認証画面が表示されたら、お手持ちのアカウントで認証してください。認証が成功するとデプロイするリポジトリの選択画面が表示されます(図10)。

 [リポジトリ名]には連携するリポジトリをコンボボックスから選択します。[デプロイする分岐]は、デプロイをフックするブランチ名を指定します。例えば、ここで指定したブランチに変更がプッシュされるとWebサイトは自動でコンテンツのデプロイを行います。既定ではmasterとなっていますが、任意の名前を指定できます。最後に完了ボタンをクリックします。設定が完了すると、リポジトリにコンテンツがあればデプロイが実行されます。

図10:デプロイするリポジトリの選択画面
図10:デプロイするリポジトリの選択画面

コンテンツのデプロイ

 あらかじめGitHubのリモートリポジトリをクローンしてローカルにリポジトリを作成し、必要な修正とコミットを行っておきます。

 コンテンツのデプロイは、GitHubの連携リポジトリに指定したブランチ名で対してプッシュ操作を行うと同時に実行されます。プッシュ操作の例はリスト2のとおりです。

 Gitのリポジトリ操作については、拙著のWindowsユーザー向けGit入門『Gitでリモートリポジトリを操作する』を参考にしてください。

プッシュ操作の例
$ git push origin master
Counting objects: 11, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (6/6), done.
Writing objects: 100% (6/6), 481 bytes | 0 bytes/s, done.
Total 6 (delta 5), reused 0 (delta 0)
To https://github.com/statemachines/WebSiteSample.git
   c533ddf..0ddd49a  master -> master

 Dropboxの連携と違い、該当ブランチ名でGitHubにプッシュした時点でWebサイトに自動的に公開されてしまいます。ここでは、簡単に説明するため「master」ブランチを使用しましたが、デプロイ専用のブランチを用意して運用したほうが、問題は少ないと思います。

 GitHubのようなリポジトリとWebサイト連携するメリットは、アジャイル的な開発スタイルと相性が良いことでしょう。このような反復型開発では、比較的短い間隔で開発、テスト、リリースを繰り返します。これらを継続的に行うにはそれなりの仕組み作りやツールの補助が必要です。Webサイトのリポジトリ連携を利用することで、リモートリポジトリへのプッシュ操作とともにサービスを提供できるのは大きなメリットかと思います。

まとめ

 本稿ではDropboxとGitHubの連携方法を解説しましたが、簡単に連携できることがご理解いただけたでしょうか。バージョンコントロールシステムであるGitやGitHubとの連携は、開発者にはうれしい機能ですが、開発者ではない方にとっては、やや敷居が高いかもしれません。そのような場合は、Dropboxを利用すると大変便利で楽に操作できるでしょう。状況に応じた連携方法で、Webサイトをエンジョイしてください。

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • WINGSプロジェクト statemachine(statemachine)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XMLD...

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5