Reactで作ったアプリをビルドして、静的な Webページとして GitHub Pagesに公開する方法を紹介します。
今回は、gh-pages
というツールをインストールして GitHub Pagesにアプリを公開します。これ使うとメチャクチャ簡単にアプリが公開できます。
そもそもGitHub Pagesとは?
GitHubが提供している静的サイトのホスティングサービスで、リポジトリにアップした HTML・CSS・JavaScirptなどの静的ファイルを、そのまま Webサイトとして公開できる。
※ PHPなどのサーバー側で動的に動くアプリは公開できない;
なんと言っても、GitHubのアカウントを持っていれば、誰でも無料でウェブサイトを公開でき、レンタルサーバーなどを借りる必要もない。
独自ドメインでの運用も可能で、有料ではあるが、お名前comや、ムームードメインなどでドメインを取得して、GitHub Pagesに設定することもできる。
前提
GitHubのアカウントは持っている前提です。
Reactアプリの作成
お試しで GitHub Pagesにデプロイするための、適当なプロジェクトを作ります。
npx create-react-app myApp --template typescript
スポンサーリンク
gh-page のインストール
npm install gh-pages --save-dev
package.json
の scripts
に次の行を追加する。
"scripts": {
"deploy": "npm run build && gh-pages -d build"
},
cross-env の設定
Github Pagesで公開したアプリの URLは、 https://<ユーザー名>.github.io/<リポジトリ名>/
のようになります。この時、デフォルトでは cssや jsがルートディレクトリからの参照になっているため、<リポジトリ名>
のパスが付いたURL上では、ファイルが正しく参照できません。
そこで、<リポジトリ名>
のパスが付いたURLでも動作するように cross-env
を導入します。
npm install cross-env --save-dev
インストールが終わったら、package.json
の build
を変更して、環境変数(PUBLIC_URL) にサブディレクトリ(リポジトリ名)を設定します。
"scripts": {
- "build": "react-scripts build",
+ "build": "cross-env PUBLIC_URL=/<リポジトリ名> react-scripts build",
},
※ アプリをユーザーページとして公開する場合は、URLは https://<ユーザー名>.github.io/
のようになるので、この cross-env
の手順は不要です。
GitHub リポジトリの作成
GitHubのページに行って、デプロイ用に新しくリポジトリを作成する。
今回は「MySample」という名前でリポジトリを作成した。リポジトリのスコープは Public で作っておく。(GitHub Pageは Privateでも公開できるので、PrivateでもOK)
ローカルリポジトリに、前の手順で作成したリモートリポジトリを git remote add
で追加する。
git remote add origin https://github.com/<Gitユーザー名>/MySample.git
スポンサーリンク
デプロイ
GitHub Pagesにアプリをデプロイします!
アプリをデプロイするには、次のコマンドを使用します。なんと、このコマンドを叩くだけで、ビルド+gh-pages
ブランチの作成・公開までを一発でやってくれます。
npm run deploy
もし、パスワードを聞かれる画面が表示されたら、自分の GitHubのアカウントを入力します。
デプロイが完了しても、公開されるまでに少し時間がかかります。1分程度待って、https://<ユーザー名>.github.io/<リポジトリ名>/
にアクセスすると、公開したアプリが見れるようになるでしょう。
react-router を使う場合
「react-router」は、SPAの Reactアプリでページ遷移を可能にするライブラリです。
SPAでは実態の HTMLファイルは index.html
ただ1つとなるが、その中でURLによって表示するコンポーネントを切り替え可能にします。
react-routerを使用しているアプリを Github Pagesに公開する場合は、もう少し対応が必要である。
Routeの設定を変更
Route
に指定するパスの先頭に、環境変数で設定した PUBLIC_URL
を含める。
<BrowserRouter>
<Routes>
- <Route path="/" element={<Home />}/>
- <Route path="/page1" element={<Page1 />}/>
- <Route path="/page2" element={<PageB />} />
+ <Route path={`${process.env.PUBLIC_URL}/`} element={<Home />}/>
+ <Route path={`${process.env.PUBLIC_URL}/page1`} element={<Page1 />}/>
+ <Route path={`${process.env.PUBLIC_URL}/page2`} element={<PageB />} />
</Routes>
</BrowserRouter>
URL直接入力時の404エラー対策
だが、上記の対策だけだと不十分だ。
このままでは、直接https://<ユーザー名>.github.io/<リポジトリ名>/page1
のような index.html
以外のファイルを指すURLを入力した時 、Github Pagesは URLで指定されたファイルをディレクトリから探そうとするため、404エラーになってしまう。
こも問題には、いくつかの対策方法があるが、一番手軽なのが index.html
をコピーして 404.html
としてファイルを置いておく方法である。
Github Pagesは URLで指定されたファイルが見るからない場合、404.html
を表示する仕様となっているので、404.html
の内容を index.html
と同じにしておけば、直接URLを入力された場合にも正常にアプリが表示される。
package.json
の scripts
に postbuild
の項目を追加し、ビルド後に index.html
を 404.html
にコピーするスクリプトを書く。
"scripts": {
+ "postbuild": "cp build/index.html build/404.html",
}
これで、デプロイをすると index.html
をコピーした 404.html
が作成される。
まとめ
以上の手順で、Github Pagesに Reactで作ったアプリを公開できる。
create-react-app
のテンプレートから作ったから変更する点はあるものの、無料でアプリが公開できるのは嬉しい。
0 件のコメント:
コメントを投稿