LoginSignup
0
0

TypeScript × React-Tutorial: Tic-Tac-Toe / 三目並べ Deploy

Last updated at Posted at 2023-08-13

この記事では,TypeScript × Reactで作成したサイトを簡単にDeployする方法を解説します.
自分が作成したプログラムとサイトは,以下になります.

中身の詳細が気になる方は,以前の記事(無印Extra)を参照してください.

はじめに

プログラムとサイトの要件は,以下の通りです.

  • すべての情報は一般公開(public)で問題ない
  • セキュリティや認証は考慮しない
  • AWSやGCP等のクラウドサービスは利用しない
  • プログラムはGitHubに置く
  • サイトはGithubPagesで公開
  • BuildとDeployはGitHubActionsを使う
  • commitがpushされたらサイトを更新する

GitHubアカウントがあれば,サイトをDeployできます.
クラウドを利用しないので,無料でサイト公開できます.
なるべく内容を簡単にしたいため,認証等は考えません.

サイトをDeployするために必要なファイル,設定が必要となる箇所を中心に解説します.

GitHubActions

BuildとDeployは,GitHubActionsを使います.
GitHubActionsは,.github/workflowsディレクトリにあるymlファイル,yamlファイルの中身を読み取って実行します.
中身は,以下のように記述しました.

ci.yml
name: CI
on: [push, pull_request]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
      - run: npm ci
      - run: npm run build
        env:
          PUBLIC_URL: /React-Tutorial
      - uses: actions/upload-pages-artifact@v2
        with:
          path: ./build
  deploy:
    needs: build
    permissions:
      id-token: write
      pages: write
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - uses: actions/deploy-pages@v2
        id: deployment

名前は,CIにします.
branchは特に指定せず,push時とpull_request時にjobsが動くようにします.
jobsは,buildとdeployの2つに分けています.
2つに分けることで,失敗した場合の問題箇所特定が容易になります.
buildに50秒,deployに10秒程度の時間がかかります.

buildは,最初にnpm run buildを動かすための環境を準備します.
そして,npm run buildでbuildファイルを作成します.
このとき,PUBLIC_URLは必要に応じて変更します.
buildファイルは,Artifactsにuploadします.

deployは,build成功後に実行します.
こちらは,変更不要です.

動作の詳細は,GitHubのサイトから確認できます.

package.json

TypeScriptプロジェクトにあるpackage.jsonを以下のように追記します.

package.json
{
+ "homepage": "https://tomtkg.github.io/React-Tutorial",
  "name": "react-tutorial",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
...
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
+   "postbuild": "cp build/index.html build/404.html",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
...
  },
  "browserslist": {
...
  }
}

サイトのpathを正しく認識するため,homepageを追加します.
homepageは,状況に応じて適切なURLを設定します.

Routerを利用したSingle Page Application(SPA)の場合,GithubPagesではページ遷移が失敗し,エラーが出ます.
SPAとGithubPagesの相性が悪いようですが,ここでは404.htmlを用意する簡単な対策で乗り切ります.
404.htmlは,404 not foundエラー時の表示先です.
index.html404.htmlとしてコピーすることで,ページ遷移が成功$^※$します.

404.htmlが原因で,検索エンジン等によるページ分析に問題が生じる可能性があります.
 アナリティクスが正しく集計できなかったり,SEO,検索順位で不利になる可能性があります.

index.tsx

SPAの場合,index.tsxの変更が必要です.
例えば,react-router-domを利用する場合,index.tsxを以下のように変更します.

index.tsx
  import './index.css';
...
  import React from 'react';
  import ReactDOM from 'react-dom/client';
+ import { BrowserRouter, NavLink, Route, Routes } from 'react-router-dom';
+ 
+ const View = () => { return ... }

  const root = ReactDOM.createRoot(
    document.getElementById('root') as HTMLElement
  );
  root.render(
    <React.StrictMode>
-     <App />
+     <BrowserRouter basename={process.env.PUBLIC_URL}>
+       <View />
+     </BrowserRouter>
    </React.StrictMode>
  );

react-router-domは,npm install react-router-domコマンドを打つと利用できます.
Viewでは,divタグで囲んだ中で,NavLink, Route, Routesを使ったりしています.

大事なのは,ci.ymlに記載したPUBLIC_URLを読み込む記述の追加です.
<BrowserRouter basename={process.env.PUBLIC_URL}>のように記述します.
RouterにはURLを記載する方法があるはずなので,オプションを探して設定します.

GitHubの設定

ファイルの用意ができたら,それらをGitHubリポジトリにpushします.
すべてが上手く設定できていたら,それだけでサイトがDeployされるはずです.
サイトのDeployに失敗した場合,GitHubリポジトリの設定変更が必要です.

GitHubリポジトリの設定は,web画面から操作できます.
まず,GithubActionsが動作していること,X workflow runsが表示されていることを確認します.
また,最新のworkflowのStatusがSuccessであることを確認します.
settings/actionssettings/pagesを確認し,必要に応じて設定を変更します.
Actions permissions,Build and deployment,Custom domain等の設定変更でサイトのDeployができるはずです.

終わりに

TypeScript × Reactで作成したサイトを簡単にDeployする方法を解説しました.
記事執筆時(2023年8月)は,actions/deploy-pagesv2.0.0が3か月前,actions/upload-pages-artifactv2.0.0が1か月前にReleaseされたばかりです.

2つのactionsは,内容や使い方が今後も変化していくと思います.

現在,buildファイルが一定期間(最大400日)で削除されてサイトが見れなくなる気がしています.
この問題は,GithubActionsの発展,進化で解消されることを期待しています.

以上で,「TypeScript × React-Tutorial: Tic-Tac-Toe / 三目並べ」の自習を修了します.

関連記事:

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0