MBP(はてな)

MacBook Pro,iPhone Xs,React

Azure Static Web AppsでReact App

f:id:fedora9:20210808165529p:plain

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を追加

Azure Static Site (Preview) Build And Deploy: ERR! code ELIFECYCLE · Issue #605 · microsoft/Oryx · GitHub

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アプリをデプロイする

f:id:fedora9:20210828031227p:plain