AWS CodePipeline を使って Azure Static Web Apps へデプロイするパイプラインを構築してみた

いわさです。

先日、Azure Static Web Apps(SWA) CLIがGAとなりました。

SWA CLIから様々な機能を利用することが出来ますが、CLIを使ってStatic Web Appsへ直接デプロイすることができるようになりました。
従来はGitHubなどの利用が前提だったのですが、これで実質どこからでもデプロイができるようになったので、今回は AWS の Codeシリーズを使ってデプロイしてみました。

ローカルで実行

まずは、ローカル環境でデプロイできることを確認し、その後CodeCommitやCodeBuild, CodePipelineを設定していきます。
この記事ではmacOSを使っています。

事前に以下ドキュメントを参考に、インストールなどは済ませておきます。

ローカル環境では以下のようなファイル構成で準備しました。

$ tree
.
├── public
│   └── index.html
└── swa-cli.config.json

1 directory, 2 files
$ swa deploy -R hoge0528swa public

Welcome to Azure Static Web Apps CLI (1.0.1)

Deploying front-end files from folder:
  /Users/iwasa.takahito/work/hoge0526swa/public

Checking Azure session...
✔ Successfully logged into Azure!

Checking project settings...
✔ Would you like to create a new Azure Static Web Apps project? … yes
✔ Choose a project name: … hoge0526swa
✔ Project created successfully!
✔ Successfully setup project!

Deploying to environment: preview

Deploying project to Azure Static Web Apps...
✔ Project deployed to https://jolly-dune-0f31e2b1e-preview.westus2.1.azurestaticapps.net ?

デプロイに成功したらアクセスしてみます。

$ curl https://jolly-dune-0f31e2b1e-preview.westus2.1.azurestaticapps.net
hoge swa

デプロイされていますね。デプロイされている環境がデフォルトではpreview環境になる点にご注意ください。

デプロイトークンを使う

先程は事前にswa loginした環境からデプロイしていたのですが、AWSのCodeBuildコンテナからデプロイを行う想定でいます。
デプロイ時にデプロイトークンを使ったデプロイ方法もサポートされているので、まず事前にそちらを試してみます。

$ swa deploy -R hoge0528swa public --deployment-token asd55cd6874112341541b15b89c283d5515321513758e76a69d1d63002460313257d9321-b1d7d9f9-d228-44b5-a7d7-5050eebfec5201e20200

Welcome to Azure Static Web Apps CLI (1.0.1)

Deploying front-end files from folder:
  /Users/iwasa.takahito/work/hoge0526swa/public


Deploying to environment: preview

Deploying project to Azure Static Web Apps...
✔ Project deployed to https://agreeable-hill-0ae55ba1e-preview.westus2.1.azurestaticapps.net ?

AWSで実行

ではここまでの内容を次はAWS上で実行したいと思います。
ソースコードはCodeCommitで管理し、CodeBuildのビルドコンテナ上でswa deployを実行しましょう。
まずは以下のようにCodeCommitへ初期状態のソースコードをPushしておきます。

次に、CodeBuildからデプロイを行うためにbuildspec.ymlを作成します。
以下のようにSWA CLIをインストールし、デプロイを行っています。

buildspec.yml

version: 0.2

phases:
  install:
    runtime-versions:
      nodejs: 14
    commands:
      - npm_config_user=root npm install -g @azure/static-web-apps-cli
  build:
    commands:
      - swa deploy public --deployment-token ${deployment_token}

注意点が２点あります。

1) Ubuntu standard:5.0 を使う

１点目は、マネージド型イメージを使う場合にはUbuntu standard:5.0を選択しましょう。
SWA CLI では Node.js 14 からがターゲットとなっています。
一方で、CodeBuild のマネージド型イメージで Node.js 14 以上を使う場合は現時点ではUbuntu standard:5.0を選択する必要があるようです。

2) デプロイトークンをシークレットに格納する

Don't store the deployment token in a public repository. It should be kept secret!

公式ドキュメントはこのように記載されています。
デプロイトークンをはリポジトリ上に格納せずに、パイプラインのシークレット機能へ格納しましょう。

以下ではプレーンテキストで保存してしまっていますが、Secret Managerなどのよりセキュアな保存方法を選択したほうが良いでしょう。

CodeBuildにおける環境変数の指定方法はこちらをご参照ください。

また、あとから気づいたのですがswa deployのdeployment-tokenオプションで指定していますが、SWA_CLI_DEPLOYMENT_TOKENも対応しているそうなので、こちらも利用可能です。

デプロイ

今回はフロントエンドのビルドもないのでシンプルにデプロイするだけです。
必要に応じて利用しているフレームワークに応じたビルドステップを追加してください。

ここまでの設定で、問題なくデプロイ出来ました。

$ curl https://agreeable-hill-0ae55ba1e-preview.westus2.1.azurestaticapps.net
hoge swa from CodePipeline

さいごに

本日は、AWS CodePipeline から Azure Static Web Apps へのデプロイパイプラインを作ってみました。
gitリポジトリでAWS-Azure間で連携するとかのほうが楽な気はしますが、何らの理由でCodeシリーズに寄せたいがSWAを利用したいというケース（あるのか...？）の参考になればと思います。