この記事では，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ファイルの中身を読み取って実行します．
中身は，以下のように記述しました．
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を以下のように追記します．
{
+ "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.htmlを404.htmlとしてコピーすることで，ページ遷移が成功$^※$します．
※404.htmlが原因で，検索エンジン等によるページ分析に問題が生じる可能性があります．
アナリティクスが正しく集計できなかったり，SEO，検索順位で不利になる可能性があります．
index.tsx
SPAの場合，index.tsxの変更が必要です．
例えば，react-router-domを利用する場合，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/actionsやsettings/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 / 三目並べ」の自習を修了します．
関連記事: