githubでReact作成したWebアプリ・Webサービス公開
最近簡単なアプリを作成してそれをブログで報告してきましたが、
とある友人より、
面白そうだから使って見たいな！！
という、酔狂なことを言われました。
はてなブログだとソースコードは載せられても実際にWebアプリは動かせないもんな、、、
と思いつつ、ネットサーフィンを楽しんでいたところ。。。
ある方法を思いつきました！！
そう、Githubで公開してしまえばよいのだと！！
早速調べてみることに。
githubの「GitHub Pages」の機能を有効化すればよいことがわかりました。
この機能を有効化すると指定したブランチ直下のindex.htmlを読み込んでページとして表示してくれる機能になります。
実際にGitHub Pagesを用いて作成したWebサービスがこちらになります！！
※友人に使って見たい、と言われたモグラたたきアプリになります。
https://elsammit.github.io/Moguratataki/elsammit.github.io
今回は、Reactで「GitHub Pages」を用いてwebアプリの公開手順について備忘録残しておこうと思います！！
■GitHub Pages設定手順
そもそも、GitHub Pagesって何もの？と思い調べたところ、
GitHub上で管理しているリポジトリについて、静的なページとしてホスティングしてくれるサービス。
とのことです。
大まかな手順は、
①GitHub上にリポジトリを作成
②webサービスをpush
③GitHub Pagesを設定
となります。
①、②はGitHubの使い方になってしまうため省略して、③について記載していきます。
まず作成したリポジトリを選択し、Settingsを選択します。
Settingsのページを下にスクロールさせていくと、GitHub Pagesという項目があります。
こちらのSource項目のBranchを選択しSaveボタンを押下します。
設定はこれで終了！！
設定すると、GitHub Pages用のURLが生成されるので、こちらにアクセスするとWebサービスが表示されます。
■ReactでのWebページ表示
先ほど記載した通り、GitHub Pagesはリポジトリ直下のindex.htmlを読み込んでページを表示します。
一方Reactは、こちらのようなディレクトリ構成になります。
このままではGitHub Pagesを用いてWebサービスを表示させることはできません。
そこで用いるのが、
yarn build もしくは npm run build
になります。
こちらを実行すると、buildディレクリが新規で生成され、buildディレクトリの中にindex.htmlファイルを含む、
パフォーマンスが最適化されてた生成物一式が保存されます。
このbuildディレクトリ直下のファイル・ディレクトリ群一式を作成したリポジトリ直下にpushすればよいです。
実際にpushした際の表示はこちらのようになります。
この状態で先ほど設定したGitHub Pagesで生成されたURLを指定すると、、、
無事、Webサービスが表示されます。
