Githubにリポジトリを作成して、
$ npx create-react-app azure-static-web-react-pages
$ cd azure-static-web-react-pages
$ git remote add origin git@github.com:hiroyuki12/azure-static-web-react-pages.git
$ git branch -M main
$ git push -u origin main
コンソールで、static web appで検索
Azure コンソール
コンソールで、Azure Static Web Appsを作成
OverviewのDeployment historyで処理中かデプロイ完了か確認できる。緑のチェックは完了。
https://agreeable-pebble-002ef4a00.azurestaticapps.net
GitHub - hiroyuki12/azure-static-web-app-react
更新して、pushすると、Azure Static Web AppsのReact Appが更新される。
GitHubのActionsでCIの進捗を確認できる
cloneした後、$ npm start でエラー
sh: react-scripts: command not found
解決方法 $ npm install して、$ npm start
React-Bootstrapを使えるようにする - Qiita
qiitaを追加して、
$ npm startでQiitaを表示できるようになったが、
push するとBuild and Deployでエラー
Azure コンソールを開き、Azure Static Web Appsのazure-static-web-reactのEdit workflowを開き、Edit this fileボタンを押して、
env CI:falseを追加
jobs: build_and_deploy_job: env: CI: false
にすると、Pushしてビルドできた。
ビルドが、VercelやNetlifyに比べて時間がかかる。2分23秒
https://agreeable-pebble-002ef4a00.azurestaticapps.net
Azure Static Web Apps (PREVIEW) でWebアプリをデプロイする