読者です 読者をやめる 読者になる 読者になる

a2 Tech blog

試したこと・調べたこと・感じたことを発信するITエンジニアの日記です。仕事とは直接関係ないけど興味あることを模索していきます。

Azure App ServiceにiPhoneからDropbox経由でデプロイ

f:id:ninna2:20170409134753j:plain:w360

以前の投稿でherokuを使ってアプリケーションを動かしましたが、Azureでも同様のことがもちろん出来るので試してみました。もちろんiPhoneだけで。

iPhoneとAzureでもアプリケーションの簡単な動作確認程度であれば出来ます。

Herokuでやってみた記事は下記です。

ninna2.hatenablog.com

必要なもの

iPhoneがあればなんでもできる!?必要なものを挙げておきます。キーボードはあれば便利。エディタは使い慣れたものでもOKです。

  • iPhone6(開発端末⁉︎)
  • MS製 Universal Mobile Keyboard(Bluetoothキーボード)
  • Textastic(エディタ)
  • Dropbox
  • Aruze

Azure 無料アカウントの登録

細かい説明はMicrosoftの公式サイトを見て下さい、なのですが簡単に実施した手順を記載しておきますので参考にして下さい。難しい手続きは一切不要です。

azure.microsoft.com

事前準備としては、Microsoftのアカウントが事前に必要です。Azureのページを開くと"無料で始める"って書いてあるのでそこから登録して行きましょう。

基本情報の入力を求められるので入力します。

f:id:ninna2:20170409004830p:plain:w360

確認コードの送信先に電話番号を入力して、SMSで受け取ったコードを入力して認証します。

f:id:ninna2:20170409004834p:plain:w360

クレジットカード情報の入力が必要なようなので入力します。クレジットカードの登録がいるんですね。入力は必要だけれどカードの有効化をしないと限りは課金はされないらしいです。少しだけ親切ですね。AWSなどはそんなこと関係無く課金されますし。

f:id:ninna2:20170409004838p:plain:w360

契約内容に合意してサインアップ完了です。

f:id:ninna2:20170409004842p:plain:w360

Azureポータルが開けば準備完了です。長くなりましたが、これでAzureユーザーです。

f:id:ninna2:20170409004846p:plain:w360

App Serviceについて

AWSとかAzureって、たくさんの機能が提供されていてどの機能を使っていいのかわかりにくい面があるのかなと思っています。変化のスピードも早く、少し見ないうちにUIが大幅に変わっていたりしますし・・・現時点での情報を記載しますが、古くなっている可能性があるので最新情報は適時公式サイトを見て下さいね。

今回は、Microsoft Azureが提供しているPaaSのプラットフォームのApp Serviceを使います。App Serviceにもいくつかのパターンがありますが、Web Appsを使っていきます。Web AppsはWebサイトとWebアプリケーションをホストするためのアプリの種類です。 他に、Mobile Apps、API Apps、Logic Appsといったパターンがあります。

無料でお試しユーザーを作成すると¥20,500の無料クレジットが1ヶ月間だけ付くようです。1か月に最大で14台までの仮想マシン、40個までのSQLデータベース、または8TBまでのストレージをプロビジョニング出来るらしいですが、正直使い始め1ヶ月でそこまで試せる気がしませんね。App Serviceも10Appsまで1GBまでの容量であれば無料で使えるので、試しに使って見る分には十分な無料枠だと思います。

Web Appsのセットアップ

さっそく、App Serviceを利用してPaaS環境を利用していきましょう。

まず、Azure PortalでApp Serviceを選択します。アカウント登録直後だと、"表示するApp Serviceがありません"と出るので、追加していきましょう。

f:id:ninna2:20170409004850p:plain:w360

追加を選択すると、App Serviceのタイプを選ぶ画面になるので、今回はWeb Appsを選びます。

f:id:ninna2:20170409004853p:plain:w360

アプリケーション名、サブスクリプションなどの入力を求められるので、適当に入力します。App Serviceプランは変更します。

f:id:ninna2:20170409004857p:plain:w360

Japan East、Freeプラン(F1)でApp Serviceプランを作成しました。

f:id:ninna2:20170409004901p:plain:w360

入力完了したのでWeb Appsを作成します。

f:id:ninna2:20170409004905p:plain:w360

作成するとすぐにデプロイが始まるのでしばらく待ちます。サーバの構築を頑張って裏で行ってくれているんですね。といってもあっという間に終わるんですけど。

f:id:ninna2:20170409004909p:plain:w360

App Serviceに追加されました。これでPaaSの準備は完了です。

f:id:ninna2:20170409004913p:plain:w360

Web appsとDropboxとの連携

Web appsのセットアップが完了したので、アプリケーションをデプロイして動かしていきたいと思います。iPhoneで気軽にやってみるというのが大切なので、githubなどの小難しいのはまず避けて、Dropboxと連携させて見たいと思います。

セットアップしたWeb Appsを選択し、デプロイオプションを開きます。ソースの選択でどこからデプロイするのか設定できます。

f:id:ninna2:20170409004819p:plain:w360

色々選択肢が出てきますが、今回は"Dropbox"を選択します。

f:id:ninna2:20170409004822p:plain:w360

Dropboxのアプリケーションからの利用の承諾などが出ますので適切に入力して下さい。完了するとDropbox上に今回のアプリケーションのデプロイ用にディレクトリが作成されます。Textasticで確認して見ました。アプリ-Azure配下に出来てますね。

f:id:ninna2:20170409004826p:plain:w360

アプリケーションのデプロイ

アプリケーションといっても静的HTML(HelloWorld)です。まずは設定があっているか確認しないといけないですから。

index.htmlをローカル上かiCloud上のどこでもいいので作成します。載せるまでもないですが、一応下記ようなコードを用意しました。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Welcome</title>
</head>
<body>
    <p>Hello World!!</p>
</body>
</html>

Dropboxに作成したファイルをアップロードします。TextasticはDropboxに対してファイルをアップロード出来るので便利です。

f:id:ninna2:20170409004757p:plain:w360

ファイルのアップロードが完了したらWeb appsのデプロイオプションから、ソース管理(Dropbox)と同期します。

f:id:ninna2:20170409004801p:plain:w360

f:id:ninna2:20170409004807p:plain:w360

同期が正常に完了したら、アプリケーションがちゃんと動いているかを確認するためにサイトにアクセスして見ましょう。サイトのURLは、Web Appsの概要に載っているのでそのリンクからサイトの表示ができます。

f:id:ninna2:20170409004811p:plain:w360

f:id:ninna2:20170409004815p:plain:w360

ちゃんと表示されました。

AzureでもPaaS環境を手軽に立ち上げて、簡単な動作確認ができることがわかりました。今回はただのHTMLだったので、次回はNode.jsあたりで試して見たいと思います。

参考にしていただければ幸いです。