a2 Tech blog

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

Azure App ServiceにiPhoneからgithub経由でデプロイする

f:id:ninna2:20170410203916p:plain:w360

過去の記事でAzure App Service(Web Apps)にiPhoneからDropboxを経由してデプロイしてみました。私のiPhone環境にWorking Copyを導入してGitHubと連携できるようになったので、Web AppsにGitHubからデプロイするように変更したい思います。やっぱり、ソースコード管理からデプロイがいいですよね。Azure PortalはWebベースで、GitHubもコーディングはローカルですが、管理自体はWebなので、iPhoneじゃなくて普通のPCでも同じ手順になります。

過去記事は下記です。

ninna2.hatenablog.com

(準備)Web Appsの作成

デプロイするためには、もちろんデプロイ先のWeb Appsが必要ですので、Azure App ServiceからWeb Appsで構築しておいてください。過去記事に書いてあるのでそちらを参照してもらえれば幸いです。とはいえ難しくないのでAzure Portalからサッと作っておいてください。

(準備)アプリケーションの作成

デプロイ先の器が出来たので、次に器に盛る物、つまりアプリ〜ションを作成はしておきましょう。デプロイ出来ればなんでも良いのですが、単純なHTMLとかだと単に静的ファイルを置いて終わりになってしまって面白くないので、node.jsでやっていきたいと思います。

GitHubソースコードの管理を行う必要があるので、適当に作成してPushして置いてください。今回はmasterからデプロイしますが、ブランチの選択はできますので、必ずしもmasterでなくても大丈夫です。

参考までに、私がサンプルで作成したものです。index.jsとpackage.jsonの2ファイルからなる最小構成です。過去記事でも載せてきたソースです。

index.jsは、"/“で受け取ったレスポンスとして"Hello GitHub!!"と返してるだけです。

var express = require('express');
var app = express();

app.set('port', (process.env.PORT || 5000));

app.get('/', function(request, response) {
  console.log("Hello World");
  response.writeHead(200, {'Content-Type': 'text/plain'});
  response.end('Hello GitHub!!\n');
});

app.listen(app.get('port'), function() {
  console.log('HellowWorld app is running on port', app.get('port'));
});

package.jsonはnodeのバージョン指定とexpress のバージョン指定をしてるだけですね。

{
  "name": "node-helloworld",
  "version": "0.0.1",
  "description": "helloworld Node.js app using Express 4",
  "engines": {
    "node": "6.9.4",
    "npm": "2.1.x"
  },
  "main": "index.js",
  "scripts": {
    "start": "node index.js"
  },
  "dependencies": {
    "express": "4.13.3"
  }
}

上記の2ファイルをGitHubにPushしてアプリケーションの準備が完了です。iOSからGitHubと連携するにはお金かかりますがWorking Copyが便利ですので使ってみてください。使い方は下記に記載してます。

ninna2.hatenablog.com

デプロイオプションの変更

さて、本題です。デプロイ対象のWeb Appsのデプロイオプションを開きます。すでに何かしらのデプロイ方法(Dropboxとか)と紐付いている場合は、切断してください。セットアップを選択して、新しくデプロイ方法を設定していきます。

展開元のソース管理から、GitHubを選択します。

承認など聞かれた場合は必要情報を入力して認証します。自分のGitHubの一覧が見えたら、その中から今回のデプロイ対象のプロジェクトブランチを選択します。これでほぼ完了です。

GitHubがデプロイオプションの画面に出てきたらオッケーです。

デプロイ

デプロイ手順は“同期”と押すだけです。そうするとデプロイを開始してくれます。node.jsの場合は外部モジュール(expressなど)の取得と、App Service内部で使っているiisnodeの設定ファイルや、web.configまで生成してくれます。

動作確認

最後に動作確認です。Web Appsの概要からURLをポチッとしてちゃんと動いているか確認します。

動いていますね。めでたしめでたし。

さらっと記事にしておこうと思ったのですが、意外と長くなりました。DropboxでもGitHubでもソースコードの取得先だけの問題なので、手順は変わらないですね。オンプレでここまで自動でやろうと思うとかなり気合を入れてやらないといけないところをクラウドだと本当に簡単にできますね。