めっちゃ簡単!GitHub Pagesに Reactアプリを公開する方法

2022年3月20日日曜日

GitHub react

t f B! P L

Reactで作ったアプリをビルドして、静的な Webページとして GitHub Pagesに公開する方法を紹介します。

今回は、gh-pages というツールをインストールして GitHub Pagesにアプリを公開します。これ使うと簡単にアプリが公開できちゃいます。

前提

まー、GitHubのアカウントは持っている前提です。

Reactアプリの作成

お試しで GitHub Pagesにデプロイするための、適当なプロジェクトを作ります。

npx create-react-app myApp --template typescript

gh-page のインストール

 npm install gh-pages --save-dev

package.jsonscripts に次の行を追加する。

  "scripts": {
    "deploy": "npm run build && gh-pages -d build"
  },

cross-env の設定

アプリをリポジトリページとして公開する場合、URLは https://<ユーザー名>.github.io/<リポジトリ名>/ のようになります。しかし、Reactは通常 cssや jsがルートディレクトリからの参照になってしまうたため、サブディレクトリの URL上にデプロイすると正しく動作しません。

そこで、サブディレクトリでも動作するように cross-env を導入します。

npm install cross-env --save-dev

package.jsonbuild の設定を変更して、環境変数(PUBLIC_URL) にサブディレクトリ(リポジトリ名)を設定します。

  "scripts": {
    "build": "cross-env PUBLIC_URL=/<リポジトリ名> react-scripts build",
  },

※ アプリをユーザーページとして公開する場合は、URLは https://<ユーザー名>.github.io/ のようになるので、この cross-env の手順は不要です。

GitHub リポジトリの作成

GitHubのページに行って、デプロイ用に新しくリポジトリを作成する。

enter image description here

今回は「MySample」という名前でリポジトリを作成した。リポジトリのスコープは Public で作っておく。(GitHub Pageは Privateでも公開できるので、PrivateでもOK)

enter image description here

ローカルのリポジトリに、上で作成したリモートリポジトリを追加する。

git remote add origin https://github.com/<Gitユーザー名>/MySample.git

デプロイ

次のコマンドで GitHub Pagesにデプロイします。

npm run deploy

最初は何度かパスワードを聞かれるため、自分の GitHubのアカウントを入力します。

このコマンドで、ビルド+gh-pagesブランチの作成、GitHub Pagesのブランチ設定が一発でできます。

公開されるまでに少し時間がかかるので1分程度待って、https://<ユーザー名>.github.io/<リポジトリ名>/ にアクセスすると、公開したアプリが見れます。

スポンサーリンク
スポンサーリンク

このブログを検索

Profile

自分の写真
Webアプリエンジニア。 日々新しい技術を追い求めてブログでアウトプットしています。
プロフィール画像は、猫村ゆゆこ様に書いてもらいました。

仕事募集もしていたり、していなかったり。

QooQ