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

クラウドデベロッパーちゃんねるで Azure Kubernetes Service の話をしてきました

クラウドデベロッパーちゃんねるで、ちょまどさんと「Azure Kubernetes Service を活用したマイクロサービス開発のベストプラクティス」 というタイトルでお話してきました。

www.youtube.com

昨年の Advent Calendar で書いた記事の内容を解説している動画です。

gooner.hateblo.jp

当初は20分くらいでまとめる予定でしたが、いざ始めてみると30分くらい話してしまいました。ちょまどさんとの掛け合いというか相槌のタイミングは、オンラインだと難しいなと感じました。このあたりは慣れかもしれませんが、これからもオンラインの登壇は続くと思うので上手いやり方を探していきたいです。

なお、セッションで使ったスライドは、こちらで公開しています。

speakerdeck.com