Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
6
Help us understand the problem. What is going on with this article?

More than 1 year has passed since last update.

@Ham4690

github-pageにReact appをデプロイしてみた

はじめに

Reactを勉強する上でGithub pageでReactアプリを公開できるのか気になったのがきっかけです。

GitHub Pagesについて
GitHub Pages は、GitHub のリポジトリから HTML、CSS、および JavaScript ファイル を直接取得し、任意でビルドプロセスを通じてファイルを実行し、ウェブサイトを公開できる静的なサイトホスティングサービスです。
[GitHub 公式ヘルプ]https://help.github.com/ja/github/working-with-github-pages/about-github-pages

参考にしたサイト

環境

以下は私が行った環境です.

name version
Node v10.14.2
npm 6.4.1

2019/12/19現在ではReact公式サイトに

あなたのマシンに Node >= 8.10 及び npm >= 5.6 の環境が必要です    

と記載されていました.

手順

1.Reactアプリの作成

以下のコマンドを実行しました.

今回はreact-pagesという名前のReactアプリを作成しています.

$ npx create-react-app react-pages

2.gh-pagesのインストール

以下のコマンドでgh-pagesをインストールします。
以下のコマンドではcd react-pagesで作成したreact-pagesフォルダまで移動しgh-pagesをインストールしています。

$ cd react-pages
$ npm install gh-pages --save-dev
npm

Node.jsで利用するパッケージ管理ツール

gh-pages

GitHubのgh-pagesブランチ(または他の任意の場所)にファイルを公開するためのパッケージ

3.Reactアプリのpackage.jsonを修正

作成したReactアプリのpackage.jsonに以下の設定を追記してください.
ここで"homepage"に書いてあるURLの[GitHub username],[created repository name]はそれぞれ自分が作成した名前をつけてください

package.json

//...
"homepage": "https://[GitHub username].github.io/[created repository name]/",
"scripts": {
    "deploy": "npm run build && gh-pages -d build"
  },
//...

4.GitHubでRepositoryを作成

このときのリポジトリの名前は作成したReactアプリと異なっていても大丈夫です

また、GitHubがPROアカウントではない場合はPublicでRepositoryを作成してください。

6.作成したアプリをデプロイ

以下のコードでデプロイします。また,実行する場所は作成したReactアプリ内で行ってください.以下の前半部分はリポジトリを作成したときに出てくる任意のフォルダーとリポジトリを接続しREADME.mdをリポジトリへ追加しているものです.

$ git init
$ git add README.md
$ git commit -m "first commit"
$ git remote add origin 
$ git@github.com:[GitHub username]/[Repository name].git
$ git push -u origin master
$ npm run deploy

5.GitHubPageの設定

作成したGigHubのリポジトリよりsettingへ移動,

Screenshot from 2019-12-19 21-50-22.png

その後下へスクロールしGitHub Pages のSourceをgh-pages branchへ変更する.

Screenshot from 2020-01-02 11-15-55.png

結果

GitHubPages設定後表示もう一度GitHubPagesの設定場所へ移動し表示されているURLをクリック.

以下のようなページが開かれていれば成功です.

Screenshot from 2020-01-02 11-15-23.png

最後に

デプロイの意味とか全然しらない初学者(私)でもちょっと調べたらできるもんだなぁと感激しました。
積極的にいろんなことにトライしてみようと思いました。
次はReactをつかって自分のポートフォリを作りたいと思います。

6
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
6
Help us understand the problem. What is going on with this article?