VSTS

2018年3月 2日 (金)

Express(node.js)とMySQLを使用したREST APIサービスをAzureに展開してみる:最初に作るビルド定義

小ネタで小休止です。w

Azureでいろいろするときに、自分は最初にとあるビルド定義を作成します。
それは「Azureのリソースグループを削除する」ビルド定義です。
Azureでいろいろリソースを作成した状態で寝落ちとかしてしまうと、いつの間にか財布の中身が・・・となってしまいます。
そこで、リソースグループを削除するビルド定義を深夜に自動で実行することで、安心して寝落ちできる環境ができます。(;´∀`)
033
034
(毎日深夜2時に「RG-ManageIPAddress」を削除します)

次は、リリース定義にMySQLのファイアウォール設定を変更するタスクを追加してみます。

Express(node.js)とMySQLを使用したREST APIサービスをAzureに展開してみる:リリース

リリース定義作成 その2のつづきです。

リリースは、定義作成画面だと右上、リリース定義一覧だと定義名の右側の「・・・」をクリックすると出てくるメニュー、またはリリース一覧(右側)の上にある「+ Release」をクリックします。
025
026

「Create Release」と「Create Draft Release」の2つが出てきますので、「Create Release」を選択します。

027
Pipelineのところで展開先の環境名(「MySQL in Azure」)をクリックし、「Create」をクリックします。

リリース一覧が表示されるので、最新のリリース(ここでは「Release-2」)のところの「・・・」をクリックし、「Open」または「Open in new tab」をクリックします。
028
まだリリースは実行されていません(真ん中あたりにある「Deployment status」が'NOT DEPLOYED')ので、「Deploy」をクリックしたあと、「MySQL in Azure」をクリックします。
029
デプロイ内容の確認画面が表示されるので、「Deploy」をクリックすると、デプロイが実行されます。。
実行中のログは「Logs」タブをクリックすると表示されます。
030

Stepがオールグリーンになれば、デプロイは正常に終了していて、Azureにリソースが作成されているはずです。
031
032

ようやく、AzureのリソースをVSTSから展開する基礎部分ができました。(長い・・・)

次は小ネタで、最初に作成しておいたほうがいいビルド定義についてです。

Express(node.js)とMySQLを使用したREST APIサービスをAzureに展開してみる:リリース定義作成 その2

リリース定義作成 その1のつづきです。

リリース定義のタスク設定画面からです。

017
・Template
 ARMテンプレートファイルを指定します。右側の「・・・」をクリックすると、ファイル選択画面が表示されるので、「template.json」を指定します。
018
・Template parameters
 ARMテンプレートのパラメータファイルを指定します。ファイル選択方法はTemplateと同じで、「parameters.json」を指定します。
・Override template parameters
 この項目でTemplate parametersで指定したパラメータの内容から変更することができます。
 parameters.jsonで直接指定してもいいのですが、管理者ユーザ名やパスワードなどを(コードが参照できる人は)誰でも見れるのはセキュリティ的に問題もあるので、ここではチームプロジェクト内で定義できる変数(Variables)を使って設定した人以外には値が見れない状態にしたいと思います。
 「Variables」をクリックして、変数の定義画面に移ります。ここに直接変数を定義してもいいのですが、もう少し頑張って目的別の変数グループを作成して、そこに変数を作成します。
019
 左側の「Variable groups」をクリックしたあと、「Manage variable group」をクリックします。
020
 右上の「Variable group」をクリックします。(既に完成形の変数グループが見えてますが(;´∀`))
021
 「Variable group name」に変数グループ名を入力します。実際の変数は下側の「Variables」にある「+ Add」をクリックして追加します。
 変数入力行の一番右側にある鍵マークをクリックすると、入力した変数の値(Value)がマスクされ、二度と見ることはできなくなります。(入力した本人でもダメです)
 今回は2つの変数グループを作成します。
022
023
 (一部おかしい空白部分がありますが、今後追加するネタを隠してますのでご容赦を(;´Д`))

 「ForAzureRelease」はAzureに関する内容を、「MySQL」は(Azureでもオンプレミスでも共通になりそうな)MySQLに関する内容を定義します。

 作成したら、Variable groupの設定画面に戻ります。
 「Link variable group」をクリックすると、どの変数グループを使用する(リンクする)かを指定する画面になります。
024
 リンクする変数グループと、値が有効になる範囲(scope)を指定します。scopeに「Environments」を指定したときは、リソースを展開する環境も併せて指定します。
 「ForAzureRelease」のscopeはEnvironments、「MySQL」のscopeはReleaseとしてリンクします。
 Variablesが設定できたら、Tasksに戻ります。

 ようやく、この「Override template parameters」に指定する内容についてです。
 基本的には「-[テンプレートパラメータ名] [値]」という形式を繰り返します。
 今回はMySQLのサーバ名/MySQLの管理者ユーザ名/MySQL管理者ユーザのパスワードを指定します。
 なお、パスワードはSecureStringで指定する必要があるので、「(ConvertTo-SecureString」でSecureString化してます。

それ以外の項目についてはデフォルトのままで問題ありません。

ようやくリリース定義が作成できましたので、実際にリリースしてみます。(つづく)

Express(node.js)とMySQLを使用したREST APIサービスをAzureに展開してみる:リリース定義作成 その1

前回のつづきです。

リリース定義のテンプレート一覧から選択したいのですが、なぜか単純にAzureのリソースを展開するだけのテンプレートがないので「Empty process」をクリックします。
009

リリース先の環境名を入力します。認識しやすくするだけですので、分かりやすければ何でも構いません。
010

ちょっと薄めの「Add artifact」をクリックして、リリースするファイルの元ネタの格納場所などを指定します。
011
・Source type
 チームプロジェクトのGitを参照するので「Git」を指定します。
・Project
 自身のチームプロジェクトを指定します。
・Source
 コードのリポジトリを指定しますが、VSTSのチームプロジェクト内のリポジトリがデフォルトで表示されるのでそのままです。
・Default branch
 今のところブランチを切って作業することはないのでmasterを指定します。
・Default version
 「Latest from default branch」にしておきます。→Default branchで指定したブランチの最新版が対象になります。
 他には「Specific commit from default branch」→Default branchで指定したブランチの特定コミットが対象
 「Specify at the time of release creation」→リリースを発行するときに指定する
 があります。
・Source alias
 今まで入力してきた元ネタ情報の別名を入力します。リリースする際に認識しやすくするだけですので、デフォルトのままでも構いません。
 ここでは「Direct reference to Git」に変更してみました。

他の項目はデフォルトのままにしておきます。
入力したら、「Add」ボタンをクリックします。すると、入力前に「Add artiface」だったところが、Source aliasに入力した内容に変わります。

ここで、リリース定義名(「New Release Definition」のところ)も変えておきましょう。

「Tasks」をクリックすると、タスク定義画面に移ります。
Agent phaseの右側にある「+」をクリックすると、タスク一覧が表示されるので、Deployタブから「Azure Resource Group Deployment」を追加します。
012

左側に「Azure Resource Group Deployment」タスクが追加されたので、タスク部分をクリックして詳細を入力します。
013
・Display name
 個別に変更しなくても、他の項目を反映した内容にしてくれます。
・Azure subscription
 展開先のサブスクリプションを指定します。最初はVSTSのチームプロジェクトとAzureのサブスクリプションは紐づけられていないので、Service Endpointの定義を作成する必要があるのですが、そのためにはAzureのリソースグループを事前に作成しないといけません。
014
015

 Azureのリソースグループを作成したら、項目の上にある「Manage」をクリックしてService Endpointを追加します。
016
 Service Endpointを作成したら、リリース定義のタスク詳細画面に戻します。この状態で、コンボボックスから作成したService Endpointを選択します。
・Action
 「Create or update resource group」にします。
・Resource group
 先ほど作成したリソースグループが選択できるはずです。
・Location
 リソースグループを作成するリージョンを指定します。

ちょっと長いので、分割します

Express(node.js)とMySQLを使用したREST APIサービスをAzureに展開してみる:ARMテンプレート作成

前回のつづきです。

Azureのリソースを作成するには、画面からポチポチする方法と、Azure Resource Manager(ARM)を使用して、テンプレートファイルからドンと一発で展開する方法があります。
せっかくVSTSを使うので、ここはARMを使って自動化してみます。

頑張って0からテンプレートファイルを作成するのはあまりにも酷なので、まずはAzureのポータルサイトからポチポチして環境を作成して、その環境からテンプレートファイルを生成することにします。
(画面定義をXAMLで直接記述するのではなくて、デザイナーで部品を張り付けて、後でコードを微調整するのと似てます)
作成するのは
・リソースグループ:RG-ManageIPAddress
・Web Appサービス:manageipaddress
 サービスプランとApplication InsightsサービスはAppサービスを作成するときに合わせて作成できます
・Azure Database for MySQL:addressdb
です。
0021

リソースグループ設定のメニューから「Automation スクリプト」をクリックすると、テンプレートファイルが表示されます。
エラーメッセージが表示されますが、気にせずに「ダウンロード」をクリックすると、テンプレートファイルなどを含むZIPファイルがダウンロードできます。
ZIPを解凍するとこんなファイルが展開されます。
0031
これらのファイルをenvironment\ARMフォルダにコピーして、VSTSにPushします。
(環境設定のファイルでも、変更の都度リポジトリに登録して、いつでも戻せるようにしたほうが気兼ねなく変更できますよ)

本来はこれまでなんですが、今回Azure Database for MySQLをがプレビュー版のためと思われますが、MySQLに関する定義が一切出力されていません(;´Д`)
一瞬困ったなぁと思ったのですが、リソース作成時のテンプレートファイルもダウンロードできるので、そこからMySQL分を取得して、最初に取得したテンプレートファイルに追加します。

リソースグループ設定のメニューから「デプロイ」をクリックすると、今までのリソース変更履歴が表示されますので、「Microsoft.MySQLServer.n・・・」の行をクリック後、「テンプレートの表示」をクリックします。
0041
テンプレートファイルの表示画面で「ダウンロード」をクリックし、ZIPファイルのダウンロードとZIP解凍をします。

次に、MySQL用のparameters.jsonとtemplate.jsonの内容を元々のファイルにマージしてあげます。
〇parameters.json
一旦、"parameters"オブジェクト部分の内容をそのまま追加。そのあと、基本的に変更しない(と思う)キーの値を追加。
"serverName": {"value": (サーバ名)},
"location": {"value": "japanwest"},
"skuName": {"value": "MYSQLB50"},
"skuTier": {"value": "Basic"},
"skuCapacityDTU": {"value": 50},
"skuFamily": {"value": "SkuFamily"},
"skuSizeMB": {"value": 51200},
"version": {"value": "5.7"}

〇template.json
"parameters"オブジェクト部分と"resources"オブジェクト部分の内容をそのまま追加。

※後でどこか(GitHub?)にファイル上げときます。

編集したファイルは忘れずにVSTSにPushします。

次はリリース定義を作成します。(つづく)

Express(node.js)とMySQLを使用したREST APIサービスをAzureに展開してみる:概要

ある意味定常運転となっていますが、またもや更新間隔が空いてしまいました。<>
今回の内容は、自身のお勉強も兼ねて、今までほぼ触ったことのないWeb系システム(というと大げさですが)のデプロイについて、「最初の1歩」という位置づけでまとめてみました。

今回の環境概要ですが、「TypeScript+ReactでIPアドレスの管理台帳みたいなものの画面だけ開発してみようと思ったが、勢いあまってDBをMySQLに、クライアントのインターフェイスをREST APIに、さらにサーバをAzure Web Appsに構築してしまえ」という感じです。
〇開発環境
・Visual Studio Code(VSCode)
・Visual Studio Team Services(VSTS)
 コードリポジトリはGit
・TypeScript
・React
・Node.js
 サーバ側:Express
 クライアント側:react-bootstrap-table/axios
〇サーバ環境
・Azure Web App + MySQL
 最終的には純粋なWeb Appの機能だけで十分なんですが、元々Web App + MySQLでDBまでまとめてしまおうと思ってたので、リソースの種類は+MySQLのままにしています。
・Azure Database for MySQL ※プレビュー

ここからは、VSTSを使ってサーバ環境のデプロイ定義を作成するところについてまとめていきます。
今回のプロジェクトで作成したフォルダの構成はこんな感じです。
001
・client:クライアント側(ブラウザ)のプログラム
・environment:環境構築用の定義ファイルやスクリプト
 ・ARM:Azure Resource Managerのテンプレートなど
 ・Data:MySQLに流し込む初期データ
 ・MySQL:MySQL用の定義情報
・server:サーバ側のプログラム

VSTSにチームプロジェクトを作成して、これらのファイルをリポジトリに登録しますが、environment配下のファイルはこれから作成するので空で問題ありません。

次に、AzureのリソースをVSTSから展開するための定義ファイル(ARMテンプレート)を作成します。(つづく)

2017年11月18日 (土)

VSTSがEast Asiaで稼働&リージョン変更してみました

また更新間隔が開いてしまいました・・・(;´Д`)

気を取り直して、11/10にVSTSの稼働リージョンとしてEast Asia(香港)が追加されたというアナウンスがありました。
001
(リンク先はこちら

詳細はリンク先のブログを参照していただきたいのですが、今から新しくアカウントを作成する人はEast Asiaにサイトが作成されますが、既に作成している場合はサポートにお願いして移動する必要があります。
※新規作成時のサイトは、作成するアカウントのプロファイルにある「国/地域」に一番近いリージョンで作成されます。

まぁ「物は試し」ということで、自分のサイトを移してみました。
まず、移動前はこちら。
002
「North Central US」で稼働していました。

最初に、VSTSのサイトから「サポート」-「VSTS」を選択してサポートページに移動します。
003
サポートページの下側に「お問い合わせ」枠があるので、その中から「Techinical Support」をクリックします。
004
サポートオプションを聞かれるので、金欠な自分は無償の「Basic Support」を選択しました。
005
(ここから英語で頑張らないといけません・・・)
サポートインシデントの入力画面に移るので、各項目を選択していきます。
006
自分は以下の内容で申請してみました。
・Probrem type:Service Issue
・Category:Team Services performance
項目を選択したら、「Start request」をクリックします。
次にインシデントの詳細情報を入力する画面に移るので、頑張って入力します。
007
008
基本的には素直に入力or選択します。「Telephone number~」は電話番号の先頭を'0'から'81'にしています。携帯番号でも通ります。

「Continue」をクリックすると次画面に移ります。
009
010
・Incident title
 翻訳サイト様のお力を借りると「I want to move the site to East Asia」といった感じです。
・What is your Visual Studio Team Services URL
 サイトのURLを入力します。前画面で入力したメールアドレス(アカウント)がオーナーの場合にはすんなり手続きできますが、そうでない場合は面倒かもしれません。
・Problem Description
 自分はIncident titleと同じ内容にしました。
・What is the exact text of any error messages~
 エラーではないので「No message」にしました。
後は「I accept the Agreement for Microsoft Services.」のチェックボックスをONにして「Submit」をクリックすると、サポートに送信されます。

すると、サポートから(恐怖の英語)メールが届きます。
概要としては、
・申請者がサイトオーナーであることが確認できたので、移動することができる
・移動元リージョン/移動先リージョン/サイトを移動できる日付・時間帯/移動したい理由を返信してくれれば、実際にサイトを移動する。 ※サイト移動に約5時間かかる!!
といった感じです。
※細かな条件・制約も記載されていますので、実際に移動する際はメール内容をちゃんと確認してください。

先ほどの質問事項に対する回答をメールで返信すると、サポートから「やってやるぜ!!」(超意訳&とある声で脳内再生)メールが届きますので、サイトが移動するまで待ちます。

月曜にインシデントを上げたのですが、土曜にサイトが移動していました。(おそらく金曜の深夜に移動)
011

なんとなくですが、画面遷移とかは早くなったような気がします。
(ビルドとかはまだ動かしていません(;^ω^))

機能は全く変わらないので、「少しでも早いほうがいい」という方は是非どうぞ。

2017年1月 3日 (火)

MacやXcodeを知らないやつが始めるXamarinアプリ開発 - 目次1

Xamarinアプリ開発(iOS)でのVSTS+Xamarin Test Cloud+HockeyApp関連についての目次です。
・前準備:http://blackssi.cocolog-nifty.com/blog/2016/11/macxcodexamarin.html
・証明書発行 その1:http://blackssi.cocolog-nifty.com/blog/2016/11/macxcodexamar-1.html
・証明書発行 その1.1:http://blackssi.cocolog-nifty.com/blog/2016/12/macxcodexamarin.html
・証明書発行 その2:http://blackssi.cocolog-nifty.com/blog/2016/11/macxcodexamar-2.html
・証明書発行 その3:http://blackssi.cocolog-nifty.com/blog/2016/11/macxcodexamar-3.html
・開発ツールインストール:http://blackssi.cocolog-nifty.com/blog/2016/11/macxcodexamar-4.html
・VSTSエージェント環境作成:http://blackssi.cocolog-nifty.com/blog/2016/11/macxcodexamar-5.html
・VSTSビルド定義作成:http://blackssi.cocolog-nifty.com/blog/2016/12/macxcodexamar-1.html
・HockeyAppとは:http://blackssi.cocolog-nifty.com/blog/2016/12/macxcodexamar-2.html
・VSTSとHockeyAppの連携:http://blackssi.cocolog-nifty.com/blog/2017/01/macxcodexamarin.html
・HockeyAppからのアプリ展開:http://blackssi.cocolog-nifty.com/blog/2017/01/macxcodexamar-1.html
・HockeyApp SDKの使い方:http://blackssi.cocolog-nifty.com/blog/2017/01/macxcodexamar-2.html
・VSTSとXamarin Test Cloudの連携 その1:http://blackssi.cocolog-nifty.com/blog/2017/01/macxcodexamar-3.html
・VSTSとXamarin Test Cloudの連携 その2:http://blackssi.cocolog-nifty.com/blog/2017/01/macxcodexamar-4.html

MacやXcodeを知らないやつが始めるXamarinアプリ開発 - VSTSとXamarin Test Cloudの連携 その2

VSTSのビルド時にXamarin Test CloudでのUIテストを実行させるには、Xamarin Test Cloudタスクを追加します。
001_3

今回設定した項目は以下の通りです。
002_3
・App File
 Copy Toタスクの後であれば、"$(Build.ArtifactStagingDirectory)/**/*.ipa"で問題ありません。
・Team API Key
 その1(http://blackssi.cocolog-nifty.com/blog/2017/01/macxcodexamar-3.html)でテストデバイス設定時にコマンドラインが表示されてたと思います。
 →mono packages/Xamarin.UITest.[version]/tools/test-cloud.exe
     submit yourAppFile.ipa [~(1)~]
     --devices [~(2)~] --series "master" --locale "ja_JP"
     --user [~(3)~]
     --assembly-dir pathToTestDllFolder
 Team API Keyは[~(1)~]の内容を設定します。ベタで指定しても動作しますが、一応キー情報ですので、Variableにシークレット状態で登録した変数を使用してます。
・User Email
 先ほどのコマンドラインの[~(3)~]の内容を設定します。こちらもシークレット状態にしています。
・Devices
 先ほどのコマンドラインの[~(2)~]の内容を設定します。こちらもシークレット状態にしています。
・Test Assembly Directory
 "$(Build.SourcesDirectory)/[UIテストのプロジェクト名]/bin/Debug"で問題ないはずです。
・System Language
 "Japanese (Japan)"を選択します。

あとは、ビルドを実行すれば、Xamarin Test Cloudでテストが実行されますが、アプリ転送と実機の空き待ちで時間が多少かかります。
003_3

長々と書いてみましたが、Xamarinアプリを開発するにあたって、「Xamarin Test Cloud/HockeyAppってたまに聞くけど何者?」とか「VSTSと連携できるの?」といった疑問を持たれてる方には、ざっくりとしたイメージはつかんでいただけるかなと思います。

さて、続いては、「Connect(); // 2016」で発表された「Visual Studio Mobile Center」についてまとめてみます。
基礎は「VSTS+Xamarin Test Cloud+HockeyApp」ですので、今回の一連の内容を見ていただいても損はないと思います。

2017年1月 1日 (日)

MacやXcodeを知らないやつが始めるXamarinアプリ開発 - VSTSとHockeyAppの連携

VSTSとHockeyAppを連携させるためには、以下の3つの作業が必要です。
・HockeyAppでアクセス用Tokenを生成
・VSTSでHockeyAppアクセス用のサービスエンドポイント作成
・VSTSのビルド定義にHockeyAppタスクを追加

最初にHockeyAppアクセス用Tokenを生成します。
HockeyAppのサイトで、右上のアイコン部分をクリックし、「Account Settings」をクリックします。
001

右側のメニューにある「API Tokens」をクリックすると、Tokenの生成画面になります。
002
・App
 Tokenの対象とするアプリを選択します。"All Apps"を選択すると、すべてのアプリで使用できるTokenになります。
・Rights
 権限を選択します(選択肢はFull Access/Upload & Release/Upload Only/Read Onlyの4種類)。
 今回は実機転送まで行うので"Full Access"か"Upload & Release"を選択します。
・Name
 管理用の名称を入力します。
入力後、「Create」ボタンをクリックすると、下側の「Active API Tokens」に生成したTokenが追加されます。

次にHockeyAppにアクセスするためのサービスエンドポイントを追加します。
VSTSのサイトで、Settingsアイコン(歯車っぽいアイコン)から「Services」を選択します。
003

画面左側にある「New Service Endpoint」から「HockeyApp」をクリックします。
004_2

接続情報を入力する画面になるので、VSTS管理用の接続名(「Connection name」)と、先ほど生成したTokenを「API Token」に入力し、「OK」ボタンをクリックすると登録が完了します。
005

最後にVSTSのビルド定義にタスクを追加します。
ビルドタスクの追加画面から「Deploy」-「HockeyApp」を追加します。
006

次の項目がとりあえず設定しておく対象かなと思います(これだけ設定すれば動作します)。
007
・HockeyApp Connection
 先ほど作成したサービスエンドポイント名称を選択します。
・App ID
 HockeyAppサイトでアプリを登録したときに表示されていたApp ID(32桁の16進数)を入力します。
・Binary File Path
 テンプレートから作成したビルド定義であれば、「Copy Files to」タスクで"$(Build.ArtifactStagingDirectory)"にバイナリファイルをコピー済のはずですので、ここでは"$(Build.ArtifactStagingDirectory)/**/*.ipa"としておきます。
・Publish
 ONにしておいて、HockeyAppからユーザがアプリをダウンロードできるようにします。
・Notify Users
 ONにしておくと、HockeyAppに登録したユーザに対してアプリのダウンロード通知メールが配信されます。
・Strategy
 ビルドを実行するたびに、HockeyApp側で管理しているビルド番号をインクリメントするかどうかを指定します。

ビルド定義を保存して実行すれば、HockeyAppのサイトにアプリケーションが転送されているはずです。
(「Latest Versions」の「Last Updated」にアプリケーションが登録された(=最終ビルドが実行された)時刻が出力されます)
008

次は少し視点を変えて、テストユーザにどんな感じでがアプリを取得したり、バージョンアップ通知がくるかについてまとめます。