<unsweets />

Frontend <3

GitLabからAzure Storageに静的サイトをデプロイする

やりたいこと/やること

GitLabのCI/CD機能を使ってAzure Storageにデプロイする
サービスプリンシパルを使って自動でデプロイする
$webというストレージ名で静的サイトとして表示する
Dockerのazure-cliイメージでazコマンドを使いデプロイ

Azure上の設定

ストレージアカウントサービスを作っておく
サービスプリンシパルを作る
アクセスキーをメモっておく

ストレージアカウントを作ったら「静的な Web サイト (プレビュー)」から静的なウェブサイトの機能を有効にしておく。インデックスドキュメント名はプロジェクトによるが大抵index.htmlになるはず（この設定は明示的な指定が必要）。有効にする$webという名前のついたStorageコンテナが作成される。

サービスプリンシパルはコマンドで作るのが楽（参考: Azureのサービスプリンシパルがあまりにわかりにくいのでまとめておく | OpenGroove。 azコマンドのインストール方法は省略（参考: Azure CLI のインストール | Microsoft Docs）

az loginで自分のAzureアカウントでログイン
az ad sp create-for-rbac -n app_name --role contributor でapp_nameという名称のサービスプリンシパルが作成される。このときパスワード情報などがJSONとして出力されるのでどこかにメモしておく。role属性も用途に合わせる。

最後に「アクセスキー」からストレージアカウント名とキーをどこかにメモっておく（キーは2つあるうちのどちらかで良い）。GitLabの設定で使う。

GitLab上の設定

パスワード情報などを環境変数として設定する

リポジトリのSettings→CI/CDのVariablesに以下のように設定。

AZURE_PASSWORD: JSONのpasswordの値
AZURE_TENANT: JSONのtenantの値
AZURE_STORAGE_ACCOUNT: アクセスキーのストレージアカウント名
AZURE_STORAGE_KEY: アクセスキーのキー

これらの値は.gitlab-ci.ymlに設定するときやazコマンドの実行時に使用される。

.gitlab-ci.ymlの設定

ビルドコマンドやデプロイコマンドを並べていくだけ。必要に応じてテストとかも。

stages:
  - build
  - deploy
 
build:
  stage: build
  image: node:10.12.0-slim
  cache:
    paths:
      - node_modules/
  artifacts:
    paths:
      - dist/*
  script:
    - yarn
    - yarn run build
  only:
    - master
 
upload to azure blob:
  stage: deploy
  image: microsoft/azure-cli:latest
  cache:
    paths:
      - node_modules/
  only:
    - master
  script:
    - az login --service-principal -u http://app_name --password $AZURE_PASSWORD --tenant $AZURE_TENANT
    - az storage blob upload-batch -d '$web' -s ./dist

GitLabのartifactsを使って成果物をストレージの方にazコマンドでアップロードする。サービスプリンシパルの指定はhttp:// つきでアプリ名を指定する。

GitLabのVariablesでProtectedに設定するとProtected Branchでしか参照できなくなるので注意。

URLはAzure上の「静的な Web サイト (プレビュー)」のプライマリエンドポイント。

もう少し楽な方法はないものか。