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.json
の scripts
に次の行を追加する。
"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.json
の build
の設定を変更して、環境変数(PUBLIC_URL) にサブディレクトリ(リポジトリ名)を設定します。
"scripts": {
"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 origin https://github.com/<Gitユーザー名>/MySample.git
デプロイ
次のコマンドで GitHub Pagesにデプロイします。
npm run deploy
最初は何度かパスワードを聞かれるため、自分の GitHubのアカウントを入力します。
このコマンドで、ビルド+gh-pages
ブランチの作成、GitHub Pages
のブランチ設定が一発でできます。
公開されるまでに少し時間がかかるので1分程度待って、https://<ユーザー名>.github.io/<リポジトリ名>/
にアクセスすると、公開したアプリが見れます。
0 件のコメント:
コメントを投稿