2018年6月8日
プログラミング
GitHub PagesでReactアプリケーションを公開!【作りながら覚えるReact】


はじめに
スマートスピーカーの発音サービスを作りながら、Reactの基礎を学んでいくシリーズの第7弾です。
前回は子コンポーネントの組み立て方とラジオボタンを使っていきました。
今回はできたページをGitHub Pagesで公開していきます。
GitHub Pagesとは
GitHub Pagesとは、その名の通りGitHub上で管理しているリポジトリについて、静的なページとしてホスティングしてくれるサービスです。
GitHubでPublic(公開)として作成すると、簡単にGitHub Pagesの公開が可能です。
早速試してみましょう。
まずリポジトリをPublicとして作成します。
次にGitHub Pagesに公開したいファイルをPushします。
今回は直下にindex.htmlを設置しました。
そしてリポジトリ内のSettingsから
下のほうにいくとGitHub Pagesの設定箇所があります。
こちらを一旦masterブランチに設定してsaveを押します。
これだけでGitHub Pagesで公開されました!
こちらがURLです。
https://eishisaito.github.io/sample/
もちろん独自ドメインを当てたり、デザインのテンプレートを使ったりすることもできます。
Create React AppのGitHub Pages公開
では、Create React Appで作ったソースはどのように公開していけば良いのか、Smart Speakers Commands Speaker(SSCS)を使って解説していきます。
改めてSSCSのフォルダ構成を見るとこのようになっています。
先程のsampleは直下にindex.html
を置くことでGitHub Pagseで閲覧することができました。
今回のSSCSは直下にそれらしき公開ファイルもなさそうですし、どうやらこのままmasterブランチをGitHub Pagesで公開しても、うまく公開できなさそうです。
実際、READ.mdの内容が表示され、Reactアプリケーションとしては表示されません
buildを行う
普段ローカル環境でReactアプリケーションを動かす場合、npm start
で動かしていました。
これはローカルでWebサーバを立ち上げるためのコマンドでした。
今回はGitHub Pagesとして公開するので、そのためにはリリース用のファイル生成(ビルド)する必要があります。
ビルドはこちらのコマンドです。
npm run build
するとbuild
というディレクトリができ、そこの中にリリース用のファイルが生成されています。
JavaScriptやCSS等もパフォーマンスを最適化する為、圧縮されまとめられます。
buildディレクトリ内のファイル
├── asset-manifest.json
├── favicon.ico
├── img
│ └── command_ogp.jpg
├── index.html
├── manifest.json
├── service-worker.js
└── static
├── css
│ ├── main.50fc2243.css
│ └── main.50fc2243.css.map
├── js
│ ├── main.9b14fd23.js
│ └── main.9b14fd23.js.map
└── media
└── alexa5.a9e393bc.jpg
このbuild配下のファイルをpushしてリモートリポジトリに反映したら良さそうですね!
ですが、masterブランチはあくまでもソースコードのmasterであって欲しいので、buildは反映せず別ブランチをリリース用のブランチにすると良さそうです。
そんなときに役立つのがgh-pagesです。
gh-pagesでデプロイをする
gh-pages はGitHub Pagesへのデプロイ(本番への反映)を行ってくれるnpmパッケージです。
まず、こちらのコマンドでインストールします。
npm install gh-pages --save-dev
そしてpackage.jsonを編集しscript内にdeployを追加します。
{
"name": "smart-speaker-commands-speaker",
"version": "0.1.0",
"homepage": "https://eishis.github.io/smart-speakers-commands-speaker",
// ...
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"deploy": "npm run build && gh-pages -d build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
// ...
}
これはビルドをnpmコマンドで行い、その後にgh-pagesでデプロイをしてね、というコマンドです。
"deploy": "npm run build && gh-pages -d build",
あとはnpm run deploy
をすれば、ビルド及びビルドファイルをGitHubのリポジトリのgh-pages
{ブランチにpushしてくれます。
あとはここからsourceをgh-pagesブランチとするだけですね!
このようなSmart Speakers Commands SpeakerのサイトがGitHub Pages上にホスティングされます!
公開されたサービスがこちらです。
Smart Speaker’s Commands Speaker (SSCS)
まとめ
今回は今まで作ってきたReactアプリケーションをGitHub Pagesにデプロイする方法をご紹介しました。
GitHub Pagesは便利なことはもちろん、独自ドメインを適用することもできるなど、オープンソースの公開場所としてはとても便利です。
次回は複雑なStateの渡し方などを見ていき、難関のReduxにも挑んでいきます。
Reactのお仕事に関するご相談
Bageleeの運営会社、palanではReactに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。
この記事は
参考になりましたか?
2
0
関連記事

2022年5月13日
Reactでオセロゲームを作る

2021年4月9日
Slack OAuth x React で Slack ユーザー認証を作ってみた!

2021年3月1日
Reactで使えるバリデーションライブラリを紹介!

2021年2月22日
Hasura Cloud × Auth0 × React でお手軽にTodoアプリを作ってみた!

2020年12月12日
Blitz.jsとTailwind CSSでメモ帳アプリの作成【第2弾】

2020年12月8日
コンポーネントを実装するときに意識すること
簡単に自分で作れるWebAR
「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。
palanARへ
palanでは一緒に働く仲間を募集しています
正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。
運営メンバー

Eishi Saito 総務
SIerやスタートアップ、フリーランスを経て2016年11月にpalan(旧eishis)を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。
sasakki デザイナー
アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

やまかわたかし デザイナー
フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReactやReact Nativeをよく触っています。
Sayaka Osanai デザイナー
Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた エンジニア
サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

こぼり ともろう エンジニア
サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

ささい エンジニア
フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

Damien
WebAR/VRの企画・開発をやっています。森に住んでいます。

ゲスト bagelee

かっきー

まりな

suzuki
miyagi

ogawa
雑食デザイナー。UI/UXデザインやコーディング、時々フロントエンドやってます。最近はARも。

いわもと
デザイナーをしています。 好きな食べ物はラーメンです。

taishi kobari
フロントエンドの開発を主に担当してます。Blitz.js好きです。

kubota shogo
サーバーサイドエンジニア。Ruby on Railsを使った開発を行いつつ月500kmほど走っています!
nishi tomoya

aihara
グラフィックデザイナーから、フロントエンドエンジニアになりました。最近はWebAR/VRの開発や、Blender、Unityを触っています。モノづくりとワンコが好きです。
nagao
SIerを経てアプリのエンジニアに。xR業界に興味があり、unityを使って開発をしたりしています。

Kainuma
サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

sugimoto
asama
ando
iwasawa ayane

oshimo
異業界からやってきたデザイナー。 palanARのUIをメインに担当してます。 これからたくさん吸収していきます!