Azure Static Web Appsにデプロイしてみた

getStaticPropsとgetServerSidePropsが同居できない

このブログのRSSにnpm rssを使っていてそこでServerSidePropsを叩いているのが原因。

デプロイ画面のvercel docsを開いた先ではpackage.jsonで"export": "next export"を消すように促されるが消して再びデプロイすると今度はnext exportがないからできないという表記が出てくる。

AzureはSSRとSSGの同時使用は対応してないみたいだ

対処としてはnpm rssはserverSidePropsを使うからgetStaticPropsを使うnpm feedで書き直すことで解決した。

環境変数mainがAzure側で入らない

対処としてAzureのProductionにはAzure専用の値を入れるところみたいでした。

GitHub Actionにもシークレット環境変数があることに気付いてそれに入力してymlから読みに行くように設定して解決した。

あきらかにUIがGitHub ActionよりCircleCIの方がわかりやすいです。 もっと言うとVercelの方が使い易いし速いし楽だし無料だしですね。 Azure DevOpsなら尚更わかりやすいかも？

終わり

Azure側の構成Productionに入れるのはプロジェクトの.envの値を入れるところではないことがわかった。

多分CircleCIもGitHub連携で簡単なのでenv入れるだけで終われるような気がする。

詰まったところや思考したところ

ウェブページの従量課金制にビビりすぎてた。 スクリプトやBotで実行されたらちょっとこわいなというのはあります。 一応セキュリティヘッダー書いてるから大丈夫ではあるんですがちょっとだけ怖いですよね。 携帯とかと違ってかなり慎重になる必要はあるのかなと思います。 で肝心の使い心地なんですがVercelに入れてたsou-web.netを解除してAzureに入れたんですけど検証が長すぎて最大48時間かかります。と普通に0.5秒かからないVercelと比べてここは使いにくいです。 で、ちょっとだけ操作してしまったからか、48時間後覗いてみたらエラーでした。

クラウド検証用のテストドメインを取って遊ぶと思いますがメインで使うにはダメかなと思います。いまどきGitHubPagesでCI/CDは遅いし古いのかもね。

Cloudflare R2 storageが楽しみなんですがその時にCircleCiでやってみようと思います。 AWSに関しては管理画面が使いずらいという声を多数聞いているのでGCPあたり触っておこうかなという感じです。

余談

GAFAMなんでMeta辺りにVercelが買収されてもいいんじゃないかなと勝手に思っています。 GoogleやAmazonよりもReactのことを一番わかっているのはMetaですのでMetaがVercelを管理するのは理にかなっているのかなと個人的に思います。

元々入ってた専用箱にしまうのがイメージもらうとわかりやすいと思います。 現状は開発はVercelで大きいプロダクトの本番環境はAzureやGCPかなって思います。

https://green-pebble-0550edf00.1.azurestaticapps.net/

GAFAMじゃなくて今はGAMAMになっていますね