Azure

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テンプレート)を作成します。(つづく)