フロントエンドシェアこんにちは、エンジニアののびすけです。先日はAWSユーザーに向けて「AzureでもAWSと同じようなことができるよ!」という記事を書きました。AWSを選ぶWeb制作者へ!「EC2でWebサーバーを立てる」をAzureでやってみた2016.09.21今日は、そんなAzureの人気サービスのひとつ「WebApps」を紹介します。Apps」とはAzureが提供するPaaSです。Websitesと呼ばれていました。Appsではインフラ側の設定を自分でやらなくても、サーバーサイドプログラムを動作させることができます。デプロイや自動スケールの設定などもできるため、Web制作で必要になる機能の大半をカバーできます。世の中のWebサイトの8割はPaaSで運用可能だという話もあります。Engineなどと同等のものと考えられます。Service」という言葉をよく目にします。AppsなどのPaaSや、LogicAppといったBaaSなどを含めたサービス群の総称です。Serviceの一部に当たります。Studio開発者向けのプランを無料枠で登録すると、Azureが1年間にわたり毎月2550円分使えます。こちらで登録する方がお得です。Appsでアプリケーションを立ち上げるまずはポータルにログインして下さい。Serviceを選択します。追加を選択しましょう。Appsを選択します。Appsの説明が表示されるので、作成を選択します。アプリケーションの情報を入力します。アプリ名:任意のアプリ名を入力サブスクリプション:複数ある場合は選択(基本的には操作しなくて大丈夫)リソースグループ:新規もしくは既存のリソースグループを選択プラン/場所:ロケーション設定(デフォルトで東日本になっているのでそのままに)しばらくたつとアプリケーションが作成されます。ここでURLを確認しましょう。僕のはこのようなURLになりました。https://n0bisuke.azurewebsites.net/デフォルトでSSLが使えるのも嬉しいですね。ブラウザでアクセスするとページが表示されました。このように、5分もかからずにWebアプリケーション立ち上げができました。AppsにGitHub経由でNode.jsアプリケーションをデプロイするこのままだと空のページですので、アプリケーションの立ち上げをしてみます。Appsにデプロイしてみます。手元のMacで作業します。僕の環境は以下の通りです。v6.7.0Node.jsは2016年9月28日にv6.7.0になったばかりですね。initをして、Node.jsアプリケーションの基本となるpackage.jsonを作成します。"ISC"}次にWebフレームワークで有名なexpressをインストールしましょう。expressapp.jsを作成しコードを記述します。World')});app.listen(PORT);作成したらnodeコマンドでアプリケーションを立ち上げましょう。Worldと表示されます。GitHubにあげてみるgit管理しないファイルを指定する.gitignoreを作ります。installする際に作成されるnode_modulesフォルダはgit管理しないのが一般的です。node_modulesこのあたりはgitの使い方になるので割愛しますが、先ほど作ったNode.jsアプリケーションをリモートリポジトリ(今回はGitHub)にアップロードしています。masterこれでこちらのリポジトリを作りました。更新があった際にはGitHubにPushしていきます。Appsアプリケーションにデプロイの設定をしていきます。Serviceから先ほど作ったアプリ名を選択します。GitHubを選択します。BitbucketやDropboxなど別のリポジトリも選択可能です。applicationを選択しましょう。アカウントが連携されたらプロジェクトの選択からデプロイするリポジトリを選択します。僕の場合は先ほど作ったリポジトリを選択しました。あとはブランチが自動的にMasterが選択されるので、問題ない場合はOKを選択しましょう。Appsが連携されました。Apps側と同期されます。デプロイオプションから同期のログを確認することができます。Apps上で動作していることが確認できます。Appsを使っています。Appsとの連携も簡単なBitbucketを使っています。BitbucketにPushすることでステージング環境にプログラムが反映されます。アーキテクチャはもう少し使ってるものはありますが、また別の機会で紹介できればと思います。AppsにBasic認証をかける方法を紹介します。Appsでは.htaccessが使えません。次の方法でBasic認証をかけることができます。この方法は静的サイトのみを利用している際に有効です。Appsで運用しているサイトにベーシック認証をかける方法が参考になりました。nabehiro/HttpAuthModuleリポジトリをcloneしておきます。git@github.com:nabehiro/HttpAuthModule.gitcloneしたら、HttpAuthModule/PHPResourcesフォルダ内のHttpAuthModule.dllとWeb.configをコピーしましょう。プロジェクトのルートにbinディレクトリを新規に作成します。作成したbinディレクトリ内に先ほどのHttpAuthModule.dllを設置し、Web.configをプロジェクトのルートに設置しましょう。設置ができたらHttpAuthModuleフォルダは使わないため削除しましょう。Web.configを編集します。</system.webServer></configuration>デフォルトでhoge:hogepass;foo:foopass;の部分がユーザー名:hogeパスワード:hogepassとユーザー名:fooパスワード:foopassでログインできる表記になっています。ユーザー名:n0bisukeパスワード:sugawara例えば、このユーザー名とパスワードでログインできるようにhoge:hogepass;foo:foopass;をn0bisuke:sugawaraに変更してみます。編集が完了したら再度GitHubにpushしましょう。AppsのURLにアクセスしてみるとBasic認証がかかっていることが確認できます。先ほど設定したユーザー名とパスワードでログインできることも確認しましょう。web.configブランチにありますので参考にして下さい。Node.jsでBasic認証をかけるNode.jsでもBasic認証をかけることができます。サーバーサイドのプログラムを利用する場合はこちらの方が楽かもしれません。モジュールを追加します。basic-auth-connectapp.jsを以下のように変更します。'sugawara'));の部分でユーザー名とパスワードを設定しています。ブラウザからアクセスしてみると認証がかかっていることを確認できます。nodeブランチにありますので参考にして下さい。Appsはかなり使い勝手がよく、手軽にサーバーサイドのアプリケーションをホスティングすることができます。Apps`も有力候補だなと僕は思っています。Appsの表層的な部分しかまだ使えてないですが、スケーリングやデータ接続をはじめとしたもっと複雑な機能も使えるので、よほどのことがない限りは大体のWebサービス制作に対応できると思います。Apps上でもっと複雑なアプリケーション作成にチャレンジしていく予定です。POSTLIGへの自由なメッセージお待ちしています頂いたご意見への回答は行っておりません。