はじめに

Azure Static Web Appsはその名前が示すとおり、静的Webアプリと呼ばれるWebアプリを公開するためのサービスです。単なるHTMLだけではなく、ReactやVueなどで作られたページもホスティングでき、APIとしてAzure Functionsも動かすことができるというものです。これから数回はAzure Static Web Apps上で静的なWebアプリとAPIアプリを動かすことにします。

Reactでアプリを作る

Azure Static Web AppsにデプロイするアプリとしてReactのチュートリアルで書かれていた三目並べを実装してみます。

ja.reactjs.org

最終的にはこんなアプリとなります。

f:id:miyohide:20211121163248p:plain

Azure Static Web Appsにデプロイする

Azure Static Web Appsにデプロイする方法としては、GitHub ActionsかAzure DevOpsを使います。ここではGitHub Actionsを使うことにします。

Azure Portal上でAzure Static Web Appsを作る際は「デプロイの詳細」でデプロイ方法を指定します。

f:id:miyohide:20211121164750p:plain

ここでGitHubを選ぶとGitHub Actionsが自動生成され、デプロイも行われます。

f:id:miyohide:20211121164929p:plain

詳細はチュートリアルを参照してください。

docs.microsoft.com

ここではこの便利な機能を使わず、自分で実装してみることにします。

自分でデプロイする処理を書いてみる

今回は、ひとつのリポジトリの中に複数のプロジェクトを格納する形をとっています。具体的には次のような形。

.
 |-posts
 | |-node_modules
 | |-public
 | |-src
 |-my-app  ← 今回はこのディレクトリ以下のものをデプロイしたい
 | |-node_modules
 | |-public
 | |-build
 | |-src
 |-.github
 | |-workflows

今回は「my-app」以下のものをデプロイしてみることにします。

GitHub ActionsではAzure/static-web-apps-deployを使って以下のように実装します。

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - main

jobs:
  build_and_deploy_job:
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v2
      - name: Build and Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v1
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }}
          action: "upload"
          app_location: "my-app"
          output_location: "build"

app_locationにデプロイするアプリがあるパスを、output_locationにビルド結果の格納パスを指定すればよかったです。詳細は以下のマニュアルを参照すると良いかと思います。

docs.microsoft.com

AZURE_STATIC_WEB_APPS_API_TOKENの取得

AZURE_STATIC_WEB_APPS_API_TOKENはAzure PortalのAzure Static Web Appsの概要ページにある「デプロイトークンの管理」をクリックしたときに表示されるデプロイトークンをGitHubの該当リポジトリにあるシークレットに登録します。

f:id:miyohide:20211121173725p:plain

GitHubでの登録方法については以下を参照してください。

docs.github.com

app_locationに誤ったパスを指定した場合

ちなみに、app_locationにmy-appではなくmy-app/srcを指定した場合、Error: Could not detect the language from repo.が発生してうまくビルドできませんでした。該当のログは以下の通り。

---Oryx build logs---


Operation performed by Microsoft Oryx, https://github.com/Microsoft/Oryx
You can report issues at https://github.com/Microsoft/Oryx/issues

Oryx Version: 0.2.20211001.1, Commit: f0cbc9b1f0d056493cdb36f92b62f11921c87261, ReleaseTagName: 20211001.1

Build Operation ID: |EvAudJVgQ3c=.cd954f65_
Repository Commit : 58887517aac8ce2f34a54cd9a104ace070e0e382

Detecting platforms...
Could not detect any platform in the source directory.
Error: Could not detect the language from repo.


---End of Oryx build logs---
Oryx was unable to determine the build steps. Continuing assuming the assets in this folder are already built. If this is an unexpected behavior please contact support.
Finished building app with Oryx
Failed to find a default file in the app artifacts folder (/). Valid default files: index.html,Index.html.
If your application contains purely static content, please verify that the variable 'app_location' in your workflow file points to the root of your application.
If your application requires build steps, please validate that a default file exists in the build output directory.