超速！5分でReactアプリ作って世界へ公開

もはやパソコンいらずでReactアプリを作成・公開できる時代.

必要なもの

• Webブラウザ
• GitHubアカウント

steps

1. レポジトリ生成: 好きな名前のGitHubレポジトリを.gitignore=Nodeで生成 (10秒)
2. 編集モード: ↓Codeボタン -> Open with Codespaces (待ち1分)
3. 素材収集: Codespacesターミナルでnpx create-react-app . --template typescript実行 (待ち1分)
4. ファイル準備: /.github/workflows/ディレクトリを生成、その中にdeployment.ymlファイルを生成して以下をコピペ (30秒)
5. コミット: 全ファイルをgit commit & push (30秒)
6. 待ち: レポジトリの最新コミット横にあるオレンジ〇が✅になるのを待つ (適宜更新) (30秒)
7. 仮公開: レポジトリ -> Settings -> Options -> GitHub PagesでSourceをgh-pagesブランチへ変更、URLをメモ (1分)
8. 修正: package.jsonに"homepage": "コピーしたURL",を追加して commit & push (1分)
9. 完成: ✅になるのを待機、メモしたURLへジャンプ

アプリ完成！
以後は好きに編集してpushすると自動でアプリが更新される.

コピペ元: deployment.yml

name: github pages

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-18.04
    steps:
      - uses: actions/checkout@v2

      - name: Setup Node
        uses: actions/setup-node@v2.1.2
        with:
          node-version: '12.x'

      - run: npm install
      - run: npm run build

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./build

何が起きてるの？

1. レポジトリ生成: Codespaces起動に必要な.gitignoreを準備しつつレポ生成
2. 編集モード: ブラウザでレポジトリ編集できる便利アプリCodespacesの起動
3. 素材収集: Reactを1コマンドで準備するcreate-react-appの起動
4. ファイル準備: GitHub ActionsがGitHub Pagesへデプロイするように設定
5. コミット: git commitによる上記デプロイのトリガー
6. 待ち: Actionの完了待ち
7. 仮公開: 手動でGitHub Pagesの参照データを設定
8. 修正: create-react-appがファイルURLの設定に必要とするベースURLを指定
9. 完成: git commitで勝手にGitHub Actionsが動いてGitHub Pagesへ公開