はじめに
Github Pagesを用いるとReactアプリを公開することができます。
備忘録も兼ねGithub Pageを使ったReactアプリの公開方法をまとめていきたいと思います。
Github Pagesの詳細につきましては下記公式サイトよりご確認をお願いします。
Github Pages公式サイト
手順
大まかに手順をまとめると以下の通りです。
- 公開するReactアプリを作成
- Githubに新しいリポジトリを作成する
- 作成したリポジトリとReactアプリを連携する
- Reactアプリをビルドする
- コミット＆プッシュをする
- Github Pagesの公開設定をする
1. 公開するReactアプリを作成
公開するReactアプリを作成し、PCに保管します。
ここでは、Dockerを用いてcreate-react-appでプロジェクトを作成する例を記載します。
※Dokcerを用いない場合は、node.jsをインストールし、
npx create-react-app <プロジェクト名>で作成可能です。
任意のディレクトリにDockerfileとdocker-compose.ymlファイルを作成し、
以下の通り記述します。
<プロジェクト名>にはtemplateのようにお好きなプロジェクト名をつけます。
(山括弧は不要)
# ベースイメージの指定
FROM node:lts
# 作業ディレクトリの指定
WORKDIR /usr/src/app
version: "3.9"
services:
app:
build:
context: .
dockerfile: Dockerfile
volumes:
- type: bind
source: .
target: /usr/src
command: sh -c "cd <プロジェクト名> && npm start"
ports:
- 3000:3000
stdin_open: true
記述が終わりましたら、ビルドを行うため以下のコマンドを実行します。
$ docker-compose build
ビルドが完了しましたら、以下のコマンドを実行し、プロジェクトを作成します。
$ docker-compose run --rm app sh -c 'npx create-react-app <プロジェクト名>'
下記のように表示された場合はyを入力＆Enterを押下し、続行します。
Need to install the following packages:
create-react-app@5.0.1
Ok to proceed? (y)
2〜3分ほど待ち、Happy hacking!が表示されれば、プロジェクトの作成は完了です。
以下のコマンドを実行し、localhost:3000にアクセスして、
以下画像のように表示されていれば問題ありません。
$ docker-compose up
2. Githubに新しいリポジトリを作成する
Githubアカウントにサインインして、画面右上の+のアイコンをクリックし、
New repositoryを選択します。
Githubアカウントをお持ちでない方は、こちらよりアカウントを登録します。
Create a new repositoryの画面の Repository name にリポジトリ名を記入し、
画面下部の Create repositoryを選択します。
下図のような画面が表示され、リポジトリが作成できていればOKです。
3. 作成したリポジトリとReactアプリを連携する
Dockerfileとdocker-compose.ymlファイルのディレクトリから
以下のコマンドを実行し、ディレクトリを移動します。
※Dockerを使用せずにcreate-react-app <プロジェクト名>で作成した場合は、
cd <プロジェクト名>でOKです。
$ cd app/<プロジェクト名>
ディレクトリを移動したら、以下のコマンドを実行し、Githubリポジトリにプッシュします。
$ git init
$ git add .
$ git commit -m "first commit"
$ git branch -M main
$ git remote add origin https://github.com/ユーザー名/template.git
$ git push -u origin main
4. Reactアプリをビルドする
package.jsonに以下の内容を追記します。
<Githubアカウント名>にはご自身のGithubアカウント名を、<リポジトリ名>には作成したリポジトリの名前を入れます。
(いずれも山括弧は不要)
{
+ "homepage": "https://<Githubアカウント名>.github.io/<リポジトリ名>/",
"name": "<プロジェクト名>",
"version": "<バージョン>",
"private": true,
// 省略
"scripts": {
+ "deploy": "rm -rf docs && npm run build && mv build docs",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
}
追記が完了しましたら以下のコマンドを実行して、
Dockerfileとdocker-compose.ymlファイルがあるディレクトリに移動し、
docker-composeコマンドを実行します。
※Dockerを使用していない場合は、ディレクトリを移動せず単にnpm run deployで問題ありません。
$ cd ../..
$ docker-compose run --rm app sh -c 'cd <プロジェクト名> && npm run deploy'
5. コミット＆プッシュをする
以下のコマンドを実行し、プロジェクトのディレクトリに移動し、コミット＆プッシュをします。
$ cd app/<プロジェクト名>
$ git add .
$ git commit -m "build"
$ git push -u origin main
6. Github Pagesの公開設定をする
Settingタブを選択します。
左サイドバーにあるCode and automationの Pages を選択します。
Noneを選択し、公開用ブランチを選択します。
フォルダを選択し、公開用のディレクトリを選択します。
最後にSaveを選択します。
数分程度待つとデプロイされ、公開したWebページのURLが表示されます。
URLにアクセスすると、作成したReactアプリを確認することができると思います。
最後に
以上がGithub Pagesを用いたReactアプリの公開手順となります。
Github PagesでReactアプリを手軽に公開することができ、便利だと感じました。
皆さんもぜひGithub Pagesを使って、作成したReactアプリを公開されてみてはいかがでしょうか。
参考文献