Skip to main content

DocusaurusでAzure Static Web Appsの構築

このサイトもそうですが、Azure Static Web Appsを使ってDocusaurusのサイトをデプロイする手順を残しておきます。

前準備​

GithubでDocusaurusのリポジトリをまずは作りましょう。
今回は、自分が作ったこちらの記事をクローンしたものをサンプルに説明したいと思います。

Azure Static Web Appsの作成​

  1. 適当なリソースグループで作成
  2. Marketplaceでstatic web appで検索
  3. 静的Webアプリをクリック img alt
  4. 作成をクリック img alt
  5. サブスクリプションおよびリソースグループは任意のものを選択
  6. 名前には適当な値を入力（今回はtsumami-plusを入力している）
  7. ホスティングプランはひとまずFreeを選択
  8. デプロイの詳細>ソースにはGitHubを選択
  9. （GitHubアカウントへログインしていない場合はログイン）
  10. 組織は自分のもしくは組織のものを選択
  11. リポジトリはデプロイしたいDocusaurusのリポジトリを選択
  12. 分岐はmainを選択
  13. ビルドのプリセットはReactが選択されていると思うので、そのまま
  14. アプリの場所はpackage.jsonが置いてある場所を選択（今回は./workspace）
  15. APIは今回使用しないので、空でOK
  16. 出力先はすでに入っていると思いますが、buildフォルダを指定
  17. （一通り記述・選択したものが下図です） img alt
  18. 画面一番下の確認および作成をクリック
  19. 確認及び作成タブに移ると思うので、さらに画面下部の作成をクリック

GitHubリポジトリの確認​

上で指定したリポジトリを見てみると.github/workflowsのフォルダが追加されていることを確認。
確認後、さらにActionsでワークフローが動いていることがわかります。
さらに以下のような表示が出ていればばっちりです。

Finished Upload. Polling on deployment.
Status: InProgress. Time: 0.2398042(s)
Status: InProgress. Time: 15.4686883(s)
Status: Succeeded. Time: 30.6917744(s)
Deployment Complete :)
Visit your site at: https://purple-flower-0f0cb7500.5.azurestaticapps.net
Thanks for using Azure Static Web Apps!
Exiting

で、この状態になったら、上のVisit your site at:にあるアドレスへアクセスしてみてちゃんとデプロイされていることを確認してもらって完了です！

まとめ​

思った以上に簡単にアップロードできるのでブログ程度であれば全然フリーでいいんじゃないかと思います。
そのうち画像での補足追加と別記事でカスタムドメインの設定も書けたらと思います！