はじめに
今回ReactでTODOリストを作成しました。こちらをGitHub Pagesを用いて公開できるようにしました
備忘録を兼ねて公開方法をまとめますので、ぜひ参考にしていただきたいです。
手順
簡単にまとめてみるとこんな感じになります。
- Reactアプリを作成する
- GitHubに新しいリポジトリを作成する
- 作成したリポジトリにReactアプリを連携させる
- 必要なパッケージのインストールをする
- デプロイスクリプトの追加をする
- Reactアプリをビルドする
- GitHubにコミット＆プッシュする
- GitHub Pagesの公開設定をする
- GitHub Pagesにて作成されたURLで表示する
1.Reactアプリを作成する
今回はVScodeを使用してReactアプリを作成しました。
まず、Reactを使用するためには、Node.jsとnpmが必要になります。
$ node -v
$ npm -v
上記をターミナルで実行するとインストールされているか確認することができます。
インストールされていない場合はインストールしてください。
次に、プロジェクトを作成します。
$ npx create-react-app react_todo_list
コマンドを実行します。
react_todo_listの部分はアプリ名になるので、自分で好きなアプリ名に変更して実行してください。
実行してHappy hacking!が表示されれば、プロジェクトの作成ができました。
$ npm start
上記を実行してlocalhost:3000にアクセスして画像のように表示されていればOKです。
2.GitHubに新しいリポジトリを作成する
GitHubにて新しいリポジトリを作成します。
Topページ右上の+ボタンから、New Repositoryを選択します。
② リポジトリ名を入力して、Publicでリポジトリを作成します。
※ 無料アカウントだとPublicアカウントしか公開できません。
リポジトリ名は基本的になんでも大丈夫ですが、ここで設定したリポジトリ名によってこの後に公開するWebページのURLが変わります。
「アカウント名.github.io」とした場合
公開URLは、https://アカウント名.github.ioとなります。
「それ以外の場合」
公開URLは、https://アカウント名.github.io/リポジトリ名となります。
リポジトリ名を入力して、Publicを選択してCreate repositoryを押して新しいリポジトリを作成する。
作成できたら次のような画面に切り替わります。
このような画面になればOKです。
3.作成したリポジトリとReactアプリを連携する
今回はVScodeで作成したReactのコードを使っていきます。
ターミナルで作成したReactアプリのディレクトリに移動します。
$ cd [アプリ名]
ローカルリポジトリからプッシュしてファイルを追加する
ターミナルで
$ git init
$ git add .
$ git commit -m "コメント"
$ git remote add origin [リポジトリ名]
$ git branch -M main
$ git push -u origin main
とコマンド操作してリモートリポジトリにローカルリポジトリのファイルをプッシュします。
4.必要なパッケージのインストールをする
デプロイ用のnpmパッケージをインストールします。
$ npm install gh-pages
5.デプロイスクリプトの追加をする
package.jsonの"scripts"に以下のスクリプトを追加する。
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
4.Reactアプリをビルドする
package.jsonに以下の内容を記述していきます。
<Githubアカウント名>にはご自身のGithubアカウント名を、<リポジトリ名>には作成したリポジトリの名前を入れます。
...省略
{
+ "homepage": "https://<Githubアカウント名>.github.io/<リポジトリ名>/",
// 省略
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
}
追記が完了したら
$ 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 を選択します。
Branchをgh-pagesを選択してSaveする
数分程度待つとデプロイされ、公開したWebページのURLが表示されます。
URLにアクセスすると、作成したReactアプリを確認することができるようになります。
最後に
以上でGitHub Pagesを用いたReactアプリの公開手順になります。
GitHub Pagesは無料で簡単に公開することができるので是非実装したアプリを公開してみてください。