はじめに

こんにちは。インキュベーションセンターDevOpsチームの車田です。

2019年にキャリア採用でTISへ入社しました。
自社サービスのDevOpsを担当しているMicrosoftのAzure認定技術者( DP-100: Azure Data Scientist Associate 、 AI-100: Azure AI Engineer Associate )です。
こちらの記事では、Azure上でのDevOpsおよび、AIOps、MLOpsを実現する方法や、自社サービスの運用にて知り得た活用ノウハウを、連載記事として公開する予定です。

今回は、はじめてAzureに触れて頂く方でも、簡単にIaCやDevOpsを感じて頂けるように、Terraformを利用したウェブ開発環境の構築手順を紹介します。

本記事を実施する上での要件

ローカルマシンに導入が必要なソフトウェア（本記事ではmacOS Big Sur バージョン 11.3.1を使用して執筆しています）

・ Node v12.16
・ Java 11(AdoptOpenJDK HotSpot)
・ Maven 3.6
・ Docker 19.03, Docker Compose 1.26
・ tfenv：2.2.2
・ terraform：0.15.4
・ azure-cli：2.23.0

サンプルアプリケーションについて

本記事ではサンプルアプリケーションとして以下のコンテンツのリソースを使用します。
・ SPA + REST API構成のチャットサービス コード例
・ NablarchアプリをAzureで動かした事例の紹介
システム構成はNablarchアプリをAzureで動かした事例の紹介のシステム構成 と同様です。
対象ブラウザはGoogle Chromeのみとしています。

本記事でTerraform化した範囲

本記事では NablarchアプリをAzureで動かした事例の紹介 で構築する一部の手順をTerraformで自動化しています。

事前準備

Azure環境の準備

Azureの環境を構築するために、サブスクリプションを用意してください。
Azureのアカウントが無い場合は、アカウントを作成 してください。

本手順では、全てのAzureリソースを「東日本(japaneast)」リージョンに作成しています。

Terraform実行環境の準備

  • Terraformのインストール

ローカルマシンに、Homebrewでtfenvをインストールします。

$ brew install tfenv

続いてTerraformのインストールを行います。ここではバージョン0.15.4を指定しています。

$ tfenv install 0.15.4
Installing Terraform v0.15.4

次にインストールしたTerraformのバージョンv0.15.4の使用を宣言します。

$ tfenv list
  0.15.4
No default set. Set with 'tfenv use <version>'
$ tfenv use 0.15.4
Switching default version to v0.15.4
Switching completed
  • Azure CLIのインストール

Install Azure CLI on macOS の手順に従い、ローカルマシンにAzure CLIをインストールします。

  • Azure CLIでAzureにログイン

続いてAzure環境の準備で作成したAzureのアカウントでログインします。

$ az login

メインブラウザにAzureの認証画面が表示されるので、作成したAzureのアカウントでログインします。
無事にログインできるとターミナルにログインしたアカウント情報が以下の通り表示されます。
※以下の例では一部マスキングしています。＜サブスクリプション名＞に使用するサブスクリプション名が表示されます。

{
"environmentName": "AzureCloud",
"homeTenantId": "57eeedf5-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
"id": "8c4bb9b7-xxxx-xxxx-xxxx-xxxxxxxxxxxx"",
"isDefault": true,
"managedByTenants": [],
"name": ＜サブスクリプション名＞",
"state": "Enabled",
"tenantId": "57eeedf5-xxxx-xxxx-xxxx-xxxxxxxxxxxx"",
"user": {
"name": "terraform@xxxxxxxxx.onmicrosoft.com",
"type": "user"
}
}
  • サブスクリプション、テナント情報の確認

これから作成するAzure上のリソースの作成先を間違えないように、サブスクリプションとテナント情報を念の為に再確認します。

$ az account show --query "{subscriptionId:id, tenantId:tenantId}"
{
"subscriptionId": "8c4bb9b7-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
"tenantId": "57eeedf5-xxxx-xxxx-xxxx-xxxxxxxxxxxx"
}

Terraform実行ファイルのダウンロード

今回使用するTerraformコードはGitHub より取得いただけます。

（注意）
事前に必ず terraform/init.tfvars の「prefix」の値（例”examplechat210604″）を変更してからTerraformを実行してください。

### Azure上に作成する各リソースの先頭の文字列を指定します。
prefix="examplechat210604"

### リソースを作成するロケーションを指定します。
location="japaneast"

### PostgreSQLの管理ユーザー名を指定します。
dbadmin="chatadmin"

### PostgreSQLの管理ユーザーのパスワードを指定します。
dbpassword="-Y=T-w!#MMfm@Y4%"

Azureリソースの作成

事前準備が整いましたので、 本記事でTerraform化した範囲 の内容にもとづいて、Azureリソースの作成を進めていきます。

Terraformを実行する

  • Terraform　init

ターミナルで「terraform init」と入力してワークスペースを初期化します。
「Terraform has been successfully initialized!」と表示されれば成功です。

$ terraform init
・・・（省略）
Terraform has been successfully initialized!
・・・（省略）
  • Terraform　Plan

次にターミナルで「terraform plan -var-file init.tfvars」と入力して
main.tf ファイルに記載された情報を元に、どのようなAzureリソースが 作成/修正/削除 されるかを確認します。
実行時に terraform/init.tfvars ファイルを読み込みます。
「if you run “terraform apply” now.」と表示されれば成功です。

$ terraform plan -var-file init.tfvars
Terraform used the selected providers to generate the following execution plan.
Resource actions are indicated with the following symbols:
・・・（省略）
Note: You didn't use the -out option to save this plan, so Terraform can't
guarantee to take exactly these actions if you run "terraform apply" now.
  • Terraform　apply

次にターミナルで「terraform apply -var-file init.tfvars」と入力して
main.tf ファイルに記載された情報を元に、Azureリソースの 作成/修正が行われます。
実行時に terraform/init.tfvars ファイルを読み込みます。
おおよそ10分程度で作成が完了して「Outputs:」以下に作成したAzureリソースの情報が表示されます。

$ terraform apply -var-file init.tfvars
・・・（省略）
Outputs:
azure_container_registry_domain = "examplechat210604cr.azurecr.io"
azure_container_registry_name = "examplechat210604cr"
azure_postgresql_server = "examplechat210604pg"
azure_redis_cache = "examplechat210604rd"

（注意）
「Outputs:」以下に出力される情報は、この後の アプリケーションのDockerイメージを作成する
以降の手順で使用しますので、メモや付箋などに控えておくと良いでしょう。

  • Azureポータルで生成されたリソースを確認する。

ここまでの手順で、以下のリソースがAzure上に自動生成できている事が確認できたと思います。

Azureポータル側でも「すべてのリソース」で作成されている事を確認します。

Azure Database for PostgreSQL で作成したAzure Database for PostgreSQLには追加の手順が必要です。
作成直後のデータベースはAzure内からの接続ができません。Azure内からの接続を許可するために設定を変更します。
手順は Azure からの接続 を参照してください。

アプリケーションのDockerイメージを作成する

続いてAzure App Serviceにデプロイするコンテナーイメージを作成します。

（注意）
backendのURLを設定する の手順で設定する frontendフォルダの直下の.env.localという名前のファイルの中身に注意します。
キー「REACT_APP_BACKEND_BASE_URL」の値には、Terraform　apply実行結果の「azure_container_registry_name」＋「.azurewebsites.net」の値をセットします。
今回の例だと.env.localファイルの中身は以下のようになります。

REACT_APP_BACKEND_BASE_URL=https://examplechat210604cr.azurewebsites.net

コンテナーイメージの作成が無事に完了していると、以下の通りローカルマシン上にDockerイメージが作成されていることが確認できます。

$ docker images
REPOSITORY              TAG                            IMAGE ID       CREATED         SIZE
example-chat-frontend   latest    d4480bdfe3eb   10 seconds ago   137MB
example-chat-notifier   1.0.0     4959c49803f1   51 years ago     451MB
example-chat-notifier   latest    4959c49803f1   51 years ago     451MB
example-chat-backend    1.0.0     45541aab4d18   51 years ago     471MB
example-chat-backend    latest    45541aab4d18   51 years ago     471MB

DockerイメージをAzure Container Registryにアップロードする

続いてAzure Container Registryに作成したDockerイメージをPushします。

Azure Container RegistryへのコンテナーイメージのPushが無事に完了していると、以下の通りAzureポータルでPushしたイメージを確認する事ができます。

アプリケーションのコンテナーインスタンスを設定

続いてAzure App Service上で、アプリケーションのコンテナーインスタンスを設定します。

「各Webアプリを作成する 」 までの手順を手動で行います。

「環境変数を設定する 」 の手順は、ターミナルからAzure CLIで一括登録できるようにしました。

Azure App Serviceに作成した各Webアプリ毎に必要なファイルを GitHub からローカルマシンにダウンロードしておきます。

  • カレントディレクトリの変更

先ほどのファイルをダウンロードしたディレクトリに移動します。
以下の例は、ユーザーディレクトリ直下にリポジトリをクローンした場合の例です。

$ cd /Users/＜ユーザー＞/inc-azure-devops/azureweb/cli
  • backendのアプリケーションの設定

最初に 「環境変数を設定する 」 の手順に従い、ローカルマシン上にダウンロードした example-chat-backend.json の値を修正して上書き保存します。

ターミナルより az webapp config appsettings コマンドを実行します。
–name に「各Webアプリを作成する 」で作成したbackendのアプリケーション名をセットします。
–resource-group にTerraformを実行する　で作成したAzureのリソースグループ名をセットします。
–settings に@example-chat-backend.json を指定します。

コマンドの実行例は以下の通りです。

$ az webapp config appsettings set --name examplechat210604cr --resource-group examplechat210604-rg --settings @example-chat-backend.json
  • notifierのアプリケーション設定例

最初に 「環境変数を設定する 」 の手順に従い、ローカルマシン上にダウンロードした example-chat-notifier.json の値を修正して上書き保存します。

ターミナルより az webapp config appsettings コマンドを実行します。
–name に「各Webアプリを作成する 」で作成したbackendのアプリケーション名をセットします。
–resource-group にTerraformを実行する　で作成したAzureのリソースグループ名をセットします。
–settings に@example-chat-notifier.json を指定します。

コマンドの実行例は以下の通りです。

$ az webapp config appsettings set --name examplechat210604cr-notifier --resource-group examplechat210604-rg --settings @example-chat-notifier.json
  • frontendのアプリケーション設定例

最初に 「環境変数を設定する 」 の手順に従い、ローカルマシン上にダウンロードした example-chat-frontend.json の値を修正して上書き保存します。

ターミナルより az webapp config appsettings コマンドを実行します。
–name に「各Webアプリを作成する 」で作成したbackendのアプリケーション名をセットします。
–resource-group にTerraformを実行する　で作成したAzureのリソースグループ名をセットします。
–settings に@example-chat-frontend.json を指定します。

コマンドの実行例は以下の通りです。

$ az webapp config appsettings set --name examplechat210604cr-frontend --resource-group examplechat210604-rg --settings @example-chat-frontend.json

動作確認

お疲れ様でした。ここまでの作業が完了していれば、いよいよアプリケーションの動作を確認する事が出来ます。

アプリケーションの動作確認

  • 動作確認 の手順を行います。
    このようにAzureでもTerraformでウェブアプリケーション開発に必要な環境構築の一部の作業を省力化することが出来ます。
    執筆時点では自動化しきれなかった箇所も、今後チャレンジしてみたいと思います。

Terraformで作成したリソースを削除する

  • Terraform　destroy

今回作成したAzureリソースを残しておくと、余計な課金額が発生してしまうため、
作業を終える前に忘れずにリソースの削除を行います。
削除するにはターミナルで「terraform destroy -var-file init.tfvars」と入力します。
そうすると main.tf ファイルに記載された情報を元に、Azureリソースの 削除が行われます。
実行時に terraform/init.tfvars ファイルを読み込みます。
私の環境では、おおよそ10分程度で環境の削除が完了しました。

$ terraform destroy -var-file init.tfvars
Do you really want to destroy all resources?
  Terraform will destroy all your managed infrastructure, as shown above.
  There is no undo. Only 'yes' will be accepted to confirm.

  Enter a value: yes
・・・（省略）
azurerm_resource_group.example: Destruction complete after 11m44s
Destroy complete! Resources: 6 destroyed.

念のため、Azureポータルにログインして「すべてのリソース」メニューより、不要なリソースが残っていないか確認します。

まとめ

このように、「SPA+RESTAPI」の本格的なウェブ開発環境を、TerraformとAzureを活用する事で極めて短時間で構築する事が出来ます。

わたしが所属するインキュベーションセンター では、スタートアップ企業の各社様をはじめ、
大手企業様とも協業して、 まだ世の中にないサービスのPoCやMVP開発をおこない 「ITで社会の願いを叶えよう。」 と本気で取り組んでおります。

また今回ご紹介の SPA + REST API構成のチャットサービス コード例 は、 DevOps環境構築キット（Epona） との親和性が高く、より本格的なウェブ開発環境の構築をスムーズに行う事ができます。

DevOps環境構築キット（Epona） の特長

  • クラウドサービスを活用したいが、どのようなクラウドサービスを組み合わせればよいのかわからない
  • インフラ環境をどのように作ったらいいのかわからない
  • ユーザーやシステムからのフィードバックを得るためにログ収集や監視などを検討する必要があるが、そこまで手が回らない
  • DevOpsに興味はあるが、何から始めたらいいのかわからない

本格的なDevOps環境の構築をご検討の際には、 DevOps環境構築キット（Epona） も選択肢に加えてみてください。

このドキュメントで参照されている、Microsoft、Windows、Microsoft Azure、その他のマイクロソフト製品およびサービスは、米国およびその他の国におけるマイクロソフトの商標または登録商標です。

本コンテンツはクリエイティブコモンズ(Creative Commons) 4.0 の「表示—継承」に準拠しています。