Yuta Watanabe's Blog

開発周りと、その他諸々

Web アプリ/サービスの開発環境をローカル/クラウド両方同時に整える - Part.3 ローカルのエディタから直接クラウドを利用して Web に公開

Microsoft Azure

こんにちは。

マイクロソフトの渡辺です。

Web 制作や開発の現場では、ローカルで動作しているものを、何等かの形で Web 上に公開し、チームメンバーやお客様にご覧いただく機会があるものです。今、手元で動いている物を、簡単に Web 上に公開したい！という方、WebMatrix と Microsoft Azure で実現することができます。

「 Web アプリ/サービスの開発環境をローカル/クラウド両方同時に整える - Part.1 WebMatrix で Web サイトを作成 」では、さくっと Web 開発の環境を整え、「 Web アプリ/サービスの開発環境をローカル/クラウド両方同時に整える - Part.2 jQuery Mobile でスマホ向けサイト制作 」では Windows マシン上でモバイルデバイス向けのサイトを制作し iPhone シミュレータで表示してみました。そして今回はクラウドを活用してエディタから直接、Web 上に公開してみたいと思います。

数秒で Web サイトを公開できる Microsoft Azure Web サイト

まず始めに、今回クラウド環境として利用する Microsoft Azure Web サイトについて簡単にご紹介します。

Microsoft Azure Web サイトは、HTML/CSS/JavaScript で制作された Web サイトをはじめ、PHP や Node.js, Python, Java, .NET で開発された Web アプリケーションを、簡単に展開することができるクラウドサービスです。WordPress や Joomla 等の CMS を利用して Web サイトを作成することもできます。

f:id:yuwata:20140908164753p:plain

Microsoft Azure Web サイトへのアップロードには、FTP や Git 等、既に皆様が使い慣れてなれている一般的な方法で行うことができます。

また、これまで利用してきた WebMatrix には標準で Microsoft Azure との連携機能が組み込まれており、今回はそれを使って作成した Web サイトを Web 上に公開してみます。

※ Microsoft Azure へのサインアップが必要です。初めてご利用になる方は、1か月間無料評価版をご利用ください

※ Microsoft Azure Web サイトは、マルチテナント環境で、最大10個まで、無料でご利用いただくことができます ( 料金詳細はこちら )

WebMatrix から直接 Azure に接続して Web サイトを公開

それでは、さっそく WebMatrix から直接 Azure に接続して Web サイトを公開してみましょう。

Web サイト/アプリケーションの公開は、公開ボタンを押して開始します。

f:id:yuwata:20140908170651p:plain

サイトの発行方法を聞かれるので、" Windows Azure を開始する " を選択して進みます。

f:id:yuwata:20140908170758p:plain

すると、Microsoft Azure へサイイインを促されますので、ログインします。
※初めてご利用になられる方は、こちらから無償評価版にサインアップしてご利用ください

f:id:yuwata:20140908171139p:plain

ログインが完了すると、" サイトの新規作成 " と " 既存のサイトに発行 " を選択できるようになります。" サイトの新規作成 " を選択して進みます。

f:id:yuwata:20140908171158p:plain

 

 サイト名とサブスクリプション、場所を指定して " OK " を押しましょう。

f:id:yuwata:20140908171308p:plain

最後に、変更・追加されたファイルが確認表示されますので、続行で進みます。今回は新規に作成していますが、既存のサイトを更新する際は、この画面から発行を進めます。

f:id:yuwata:20140908171347p:plain

すると、Microsoft Azure Web サイトの作成とファイルのアップロードが進み、完了するとメッセージと URL が表示されるので開いてみます。

f:id:yuwata:20140908171532p:plain

下図のようにブラウザで Web サイトが公開されていることを確認できます。URL が localhost ではなく、先に指定したドメインになっています。あとは、様々なデバイスにアクセスしてみたり、チームのメンバーやお客様にこの URL を共有すれば、アクセスしていただくことができます。

f:id:yuwata:20140908171553p:plain

以上、今回は WebMatrix から Azure に接続し Web サイトを公開してみました。

も含め、Web アプリ/サービスの開発環境をローカルに準備し、簡単にクラウド上に公開する仕組みを整える流れをご理解いただけたかと思います。

次回は、Web アプリ/サービスの開発環境を、クラウド上にも整えてみたいと思います。