2018年3月 7日 (水)

ブログ移転のお知らせ

「Express(node.js)とMySQLを使用したREST APIサービスをAzureに展開してみる」シリーズの途中なんですが、思い立って@NiftyのココログからWordPressに移行することにしました。
(クラウドのWordPress専用サービスです)

移転先は「https://black-techmemo.net」です。(ついでに独自ドメイン+https化も行いました)

移転先には今までの投稿内容は全て移行していますが、ココログは当面このままの状態にしておきます。

サイト移転しただけで、内容などについては今まで通りですので、今後ともよろしくお願いします。<(_ _)>

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年12月31日 (日)

2017年のふりかえり

今年は勉強会にあまりお邪魔できていないなーという感じになってしまいました。
自分みたいなスキル不足な人間は、まずInputしないと。
Mobile Center改めApp CenterとVSTSは当面統合されることはなさそうなので、現時点の機能を整理して逆にどう使い分けるか/連携させるかを考えるのもいいかも。
あと、本業のお客さんからもクラウドの話が出るようになったので、そろそろ基礎知識を(遅

では、皆様よいお年を&来年もよろしくお願いします。<(_ _)>

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年7月30日 (日)

TFS/VSTSのビルドタスク作成:拡張機能のアンインストール/おまけ情報

「TFS/VSTSのビルドタスク作成:拡張機能インストーラーの作成/展開」の続きです。

 通常、機能を変更した場合はバージョン番号を変更して再インストールすればOKですが、お試しで動かしてみた後など、クリーンな状態にしたいときは拡張機能をアンインストールする必要があります。ストアアイコンから「拡張機能の管理」を選択し、管理画面の一覧で3点リーダーメニューから「アンインストール」を選択します。
015

 アンインストールの理由を選択し(ここでは「この拡張機能のビルドを支援し、テストのみを行った」でよいかと)、「アンインストールの続行」をクリックします。
016

 インストール時と同様、「ローカルの拡張機能の参照」-「拡張機能の管理」で管理画面に移動し、拡張機能一覧の3点リーダーメニューから「削除」を選択します。
017
 確認メッセージが表示されるので、「OK」をクリックします。
018


☆おまけ
〇vss-extension.jsonやtask.jsonの設定内容がおかしいと、インストール時にエラーが発生し、その後一覧には表示されないが、再度インストールしようとすると「Already installed」と怒られることがあります。名前やバージョン番号を変えればインストールはできますが、TFSのDB(SQL Server)から管理情報を削除することでも対応可能です。
 拡張機能のインストール情報は、Tfs_ConfigurationデータベースにあるGallery.tbl_Extensionテーブルに格納されています。このテーブルに対して、「delete from [Tfs_Configuration].[Gallery].[tbl_Extension] where ExtensionName='[vss-extension.jsonの"id"に設定した名称]'」を実行して情報を削除すれば、再度インストールができます。
 ※Undocumentで、かつサポートに確認した内容ではありませんので、自己責任で。

〇拡張機能を同一バージョン番号で再インストールしたときは、エージェントに展開されている拡張機能(タスク)のフォルダを削除したほうがよさそうです。
 (エージョエントにキャッシュされた状態なので、サーバから再インストールした内容がダウンロードされないことがあります)
 タスクの展開先は「(エージェントのインストールフォルダ)\_work\_tasks」フォルダに、task.jsonのnameに指定したタスク名称で始まるサブフォルダになります。


visualstudio.comのドキュメント「Add a Build Task」にはVSS.SDK.jsのインストールが記載されてなくて、しかもnpmのvss-sdkパッケージは古くてvss-web-extensionパッケージにしないといけないとか、実はGitHubに別ライブラリがあって、しかもサンプル/ドキュメントが充実してるとか、task.jsonとvss-extension.jsonとで整合性を合わせないといけない項目が明記されていないとか、TFSのビルドエージェントで使われるNodeのバージョン問題(固定化されるので最新化できない)とかで結構引っ掛かったので、これでいろいろ整理できてよかったです。
(本当に作りたいのはこれから・・・)

«TFS/VSTSのビルドタスク作成:拡張機能インストーラーの作成/展開