ROMANCE DAWN for the new world

Microsoft Azure を中心とした技術情報を書いています。

Azure Pipelines で Azure Static Web Apps のパイプラインを構築する

以前の記事で、Azure Pipelines を使って Azure Web Apps にデプロイする内容を記載しました。
gooner.hateblo.jp
今回は、Azure Static Web Apps 向けのパイプラインを構築します。以前は GitHub Actions のみサポートされていましたが、Azure DevOps でも使えるようになったので試してみました。

パイプラインの全体設計

以前の記事と同様に、パイプラインは、自動デプロイされる開発環境向け(Commit Stage)と承認デプロイされる本番環境向け(Production Stage)を作ります。
YAML の可変部をパラメータで切り替えできるテンプレートを作ることで再利用性を向上させます。

パイプライン

基本的には、こちらのチュートリアルの通りに進めばデプロイできます。

  • Static Web Apps を作成する際に、Deployment details で Other を選択する
  • Static Web Apps の作成後、Manage deployment token を取得する

docs.microsoft.com
アプリケーションが Vue.js の場合、このような azure-pipelines.yml となります。

trigger:
  - master

variables:
- group: variable-group-commit
- name: imageName
  value: 'ubuntu-latest'
- name: nodeVersion
  value: '10.x'

jobs:
- job: Deploy
  pool:
    vmImage: $(imageName)
  steps:
  - task: NodeTool@0
    inputs:
      versionSpec: $(nodeVersion)
    displayName: 'Install Node.js'
  
  - script: |
      npm install
      npm run build
    displayName: 'npm install and build'
  
  - task: AzureStaticWebApp@0
    inputs:
      app_location: '/'
      api_location: 'api'
      output_location: 'dist'
    env:
      azure_static_web_apps_api_token: $(deployment_token)
    displayName: 'Deploy to Azure Static Web Apps'

Azure Web Apps と違って、Azure Static Web Apps task の AzureStaticWebApp@0 を使っています。app_location や output_location のプロパティは、リポジトリ構成に合わせて変更してください。Manage deployment token は、Variable group に登録しています。

f:id:TonyTonyKun:20210420192035p:plain

デプロイの承認機能が使えない?

Azure Pipeline の承認は、Deployment jobs と Environments を使います。
しかし、AzureStaticWebApp@0 のプロパティでアプリケーションのコードの場所を指定する必要があり、Deployment jobs を使うことができませんでした。
別のやり方があるのかもしれませんが、今のところ分かっていないです。

そのため、開発環境と本番環境のパイプラインの違いは、ブランチと Manage deployment token を切り替えるのみとなっています。

まとめ

Azure Pipelines を使って、Azure Static Web Apps にデプロイするパイプラインを構築してみました。
まだ Azure Static Web Apps はプレビューですが、Vue.js や React などで作った SPA のデプロイ環境として期待できるサービスです。Azure Static Web Apps CLI などの面白い機能もあるので、GA に向けてキャッチアップしていきたいと思います。

こちらから、パイプライン YAML の全体を確認できます。
github.com

Azure Council Experts 定例会で Azure Synapse Analytics の話をしてきました

Azure Council Experts 定例会で、Azure Synapse Analytics の入門編のセッションに登壇しました。
www.a-c-e.biz

最近の Azure のなかでは、ポテンシャルが高くて面白いサービスだと感じています。
ACE のような会員企業向けコミュニティだけではなく、JAZUG とかのユーザーコミュニティでも話す機会を作るつもりです。

speakerdeck.com

京都の桜、いと美し

桜が見ごろを迎えていた京都に行ってきました。奈良にも足を延ばし、福井と金沢にも寄り道してきました。
ばえる写真がたくさん撮れたので、文字少なめでお届けしたいと思います。

京都

鹿苑寺(金閣寺)

f:id:TonyTonyKun:20210408195455j:plain
f:id:TonyTonyKun:20210408195604j:plain

鴨川

f:id:TonyTonyKun:20210408195656j:plain
f:id:TonyTonyKun:20210408195723j:plain
f:id:TonyTonyKun:20210408195809j:plain

円山公園

f:id:TonyTonyKun:20210408195835j:plain
f:id:TonyTonyKun:20210408195943j:plain
f:id:TonyTonyKun:20210408200024j:plain
f:id:TonyTonyKun:20210408200057j:plain

高台寺

f:id:TonyTonyKun:20210408200128j:plain
f:id:TonyTonyKun:20210408200227j:plain
f:id:TonyTonyKun:20210408200249j:plain

哲学の道

f:id:TonyTonyKun:20210408200403j:plain
f:id:TonyTonyKun:20210408200427j:plain
f:id:TonyTonyKun:20210408200339j:plain
f:id:TonyTonyKun:20210408200447j:plain
f:id:TonyTonyKun:20210408200508j:plain

南禅寺

f:id:TonyTonyKun:20210408200602j:plain
f:id:TonyTonyKun:20210408200625j:plain
f:id:TonyTonyKun:20210408200728j:plain

蹴上インクライン

f:id:TonyTonyKun:20210408200751j:plain
f:id:TonyTonyKun:20210408200811j:plain

清水寺

f:id:TonyTonyKun:20210408200855j:plain
f:id:TonyTonyKun:20210408200917j:plain
f:id:TonyTonyKun:20210408200958j:plain
f:id:TonyTonyKun:20210408201056j:plain
f:id:TonyTonyKun:20210408201119j:plain
f:id:TonyTonyKun:20210408201205j:plain
f:id:TonyTonyKun:20210408201231j:plain
f:id:TonyTonyKun:20210408201332j:plain
f:id:TonyTonyKun:20210408201417j:plain

二寧坂・産寧坂

f:id:TonyTonyKun:20210408201518j:plain
f:id:TonyTonyKun:20210408201541j:plain

嵐山

f:id:TonyTonyKun:20210408202622j:plain
f:id:TonyTonyKun:20210408202643j:plain
f:id:TonyTonyKun:20210408202703j:plain

奈良

東大寺

f:id:TonyTonyKun:20210408201614j:plain
f:id:TonyTonyKun:20210408201657j:plain
f:id:TonyTonyKun:20210408201742j:plain
f:id:TonyTonyKun:20210408201809j:plain
f:id:TonyTonyKun:20210408201835j:plain
f:id:TonyTonyKun:20210408201859j:plain
f:id:TonyTonyKun:20210408201939j:plain
f:id:TonyTonyKun:20210408202011j:plain

福井

福井駅

f:id:TonyTonyKun:20210408202739j:plain
f:id:TonyTonyKun:20210408202758j:plain

恐竜博物館

f:id:TonyTonyKun:20210408202842j:plain
f:id:TonyTonyKun:20210408202926j:plain
f:id:TonyTonyKun:20210408202947j:plain
f:id:TonyTonyKun:20210408203009j:plain
f:id:TonyTonyKun:20210408203049j:plain
f:id:TonyTonyKun:20210408203109j:plain

東尋坊

f:id:TonyTonyKun:20210408203130j:plain
f:id:TonyTonyKun:20210408203148j:plain
f:id:TonyTonyKun:20210408203207j:plain
f:id:TonyTonyKun:20210408203230j:plain

金沢

兼六園

f:id:TonyTonyKun:20210408203320j:plain
f:id:TonyTonyKun:20210408203342j:plain
f:id:TonyTonyKun:20210408203424j:plain
f:id:TonyTonyKun:20210408203518j:plain
f:id:TonyTonyKun:20210408203548j:plain
f:id:TonyTonyKun:20210408204314j:plain
f:id:TonyTonyKun:20210408204336j:plain

金沢城

f:id:TonyTonyKun:20210408204411j:plain
f:id:TonyTonyKun:20210408204430j:plain
f:id:TonyTonyKun:20210408204452j:plain
f:id:TonyTonyKun:20210408204512j:plain
f:id:TonyTonyKun:20210408204533j:plain

おまけ

京都、福井、金沢で食べた美味しいもの

f:id:TonyTonyKun:20210408202359j:plain
三嶋亭本店のすき焼き
f:id:TonyTonyKun:20210408202423j:plain
スプリングバレーブルワリー京都
f:id:TonyTonyKun:20210408202452j:plain
天下一品 総本店の牛すじラーメン
f:id:TonyTonyKun:20210408205015j:plain
新福菜館 本店の中華そば
f:id:TonyTonyKun:20210408205107j:plain
抹茶ビール
f:id:TonyTonyKun:20210408205229j:plain
福寿しの地物にぎり
f:id:TonyTonyKun:20210408205251j:plain
東尋坊のイカ焼き
f:id:TonyTonyKun:20210408205325j:plain
近江町市場の金沢丼
f:id:TonyTonyKun:20210408205348j:plain
8番らーめんの野菜らーめん