こんにちは！かたつむり(@Katatumuri_nyan)です！
「はじめてReactで作ったサイトをせっかくなら公開したい！けど、公開の仕方が分からない…。」
なんて思っていませんか～？（思っていたら仲間です！ｗ）
Reactでサイトを作ったはいいものの、どうやって公開したらいいのか分からなかったので、その時の疑問をまとめてみました。
ちなみに、GitHubというサイトのGitHub Pagesを利用して公開できました(*´ω｀)
では、疑問と調べた結果を紹介します～！
GitHub Pagesを利用して公開する方法はこちらから↓
無料！Reactで作ったサイトやアプリを公開・自動更新する方法【Github Pages】
目次
公開の仕方の疑問
まずは、公開に関して疑問に思ったことを書いていきます～！
- create-react-appしてReactサイトを作ったけど、どうしたら公開できる？
- Dockerを利用してReactサイトを作ったけど、コンテナごと公開するの…？
- 公開先ってどこ？（レンタルサーバーとか？）
Q.create-react-appしてReactサイトを作ったけど、どうしたら公開できる？
なんだかよくわからないままReactを始めたわたくし。
とりあえず、create-react-appしてReactサイトのひな型を作って、編集したはいいけど、、、。
- このまま丸ごとReactが入っているであろうフォルダごとWebサーバー等にアップロードするのかな…？
- ローカルではReact用のサーバーを起動させてたけど、Webサーバー上でも起動させるのかな…？
と、大変混乱…しましたｗ
HTMLやwebサーバー上のWordPressでサイトを公開することはありましたが、今回のパターンは初めてですｗ
A.ビルドしてデプロイ用のファイルを作って公開する
CreateReactAppの公式ドキュメントにあるように、buildという段階を踏んで、デプロイ（公開）するとのことです。
なんやねんビルド！って感じですが、だいたいはnpm buildとか、コマンドを打つと勝手にやってくれます。
（公開先によってちょっとずつ違う）
ビルドすることで、公開しやすい形にReactを整えてくれます。
公開用の設定ファイルを作って、整ったReactを公開先にアップロードすると、公開できるようになります。
Q.Dockerを利用してReactサイトを作ったけど、コンテナごと公開するの…？
コンテナ…？Dockerとは…？
みたいな状態でReact開発を始めたので、よくわかっていなくて、、、ｗ
上で書いた疑問とごっちゃになって考えていましたｗｗｗ
A.コンテナごと公開することもできる
これはまだやったことがないので、あまり理解していませんが、Dockerイメージをそのまま公開できるサービスが複数あるみたいです。
参考:Docker composeとAWS(ECR/ECS)デプロイ
Q.公開先ってどこ？（レンタルサーバーとか？）
そもそもエックスサーバー
などの普通のレンタルサーバーで公開できるのか…？
と疑問でしたｗ
A.レンタルサーバーでも公開できる。公開用のサービスも沢山ある
色んなデプロイ（公開）用のサービスがあるみたいですね。
- エックスサーバーなどのレンタルサーバー
- AWS Amplify
- Azure
- Firebase
- GitHub Pages
- Netlify
参考:CreateReactAppの公式ドキュメントでは、各サービスでReactアプリを公開する手順が紹介されています。
参考:Reactアプリケーションを最小構成で静的ホスティング環境にデプロイしてみた
こちらの方は、静的なサーバー（レンタルサーバーなど）で公開してみたとのことですよ。
専門用語の疑問
- デプロイって何？
- ビルドって何？
- Reactで作ったのはアプリ？サイト？
Q.デプロイって何？
「React 公開 やり方」 とかで調べていると、ちらほら「デプロイ」という言葉を見かけます。
デプロイ…？
A.ざっくりいうと公開すること
Reactでデプロイっていうと、公開するって意味で使われていることが多いですね。
deployは展開みたいな意味もあります。
プログラミング界隈では、ユーザーが使える状態にすることをデプロイというみたいですね。
Q.ビルドって何？
じゃぁデプロイしよう！って思って調べて行くと、次はビルドって言葉が出てきますよね。
デプロイ…？ビルド…？相当困惑しましたｗ
A.デプロイする前処理
上の方でも少し説明しましたが、デプロイするには前処理が必要な場合があります。
HTML/CSSで作った静的なサイトなら、そのままアップロードしても公開できますが、
Reactみたいな動的（HTML生成したりする）なサイトは、前処理をしてデプロイすることが必要みたいです。
その前処理をビルドというんですね！
Q.Reactで作ったのはアプリ？サイト？
Reactアプリって呼びますよね。
でも、サイトを作ってる気分なんだよなぁ…。
Reactで作ったらアプリなの…？
そもそもサイトとアプリの違いってもはや何…？と困惑してきました←
A.ユーザーが動かせたらアプリ
色んなサイトやアプリがあるので、明確な基準はないみたいですが、、、
Twitterみたいに、ユーザーが投稿したり設定を変更したりということができると、アプリ（ソフト）という認識みたいです。
ユーザーが使うと認識できるようなサイトは、アプリという方があっているのかもしれませんね。
参考:Webアプリとは？特徴やアプリケーション開発について解説
GitHub Pagesの疑問
最後は、デプロイする時に利用したGitHub Pagesの疑問です～！
- GitHub Pagesって何？
- サブディレクトリにあるReactアプリってどうやって公開するの？
- gh-pagesで公開した後はどうやって更新するの？
- GitHubでmainなど特定のブランチにpushやmergeした時に自動的に公開してほしいけどできる？
Q.GitHub Pagesって何？
GitHub Pagesでデプロイしてみた人がたくさんいるので、デプロイできる場所なんだ！とは思っていたのですが…。
A.GitHubが無料で提供しているホスティングサービス
プログラミング界隈で知らない人はほぼいないくらいのGitHub。
そこで提供されているサービスが、GitHub Pagesなんです。
簡単に言うと、GitHubにアカウントを持っていれば、無料で使えるレンタルサーバーですね。（用途に制限あり）
GitHub Pagesでいいなぁって思ったのは、GitHub Actionsというサービスが使えるところ。
色んなことを自動化できるサービスですｗ
ReactのソースコードをGitHubで管理しつつ、GitHub Actionsで公開・更新のような処理を行えるので、一度構築してしまえばめちゃくちゃ楽なんですね～！
（Git？→バージョン管理ツール）
（GitHub？→Gitを利用してクラウド上でソースコードやバージョンを共有・共同作業できるwebサービスの一つ）
Q.サブディレクトリにあるReactアプリってどうやって公開するの？
ReactのソースコードをGitHubで管理していたわたくし。
そのまま公開できたら便利じゃーん！って思ったけど、、、。
rootディレクトリ（リポジトリで一番上のディレクトリ）か、その中のdocsというサブディレクトリにindex.htmlがあればサイトを公開できるとのこと。
でも、create-react-appでReactアプリを作成すると、rootディレクトリの中にReactのフォルダ（サブディレクトリ）がありますよね。
その中にpublicってフォルダがあって、その中にindex.htmlがあると。
私はDockerを使っていたので、rootにはDockerの設定ファイルとかもあって、サブディレクトリをリポジトリのrootにしなおすこともできず…どうしたらいいんだと頭を抱えましたｗ
A.GitHub Pasesなら、gh-pagesというツールでうまい事やってくれる
良くよく調べていたら、gh-pagesというツールをみんな使っていることに気づきました。
これ、Reactの中のpackage.jsonをちょっと編集してから、数回簡単なコマンドを打つだけで、さくっと勝手にGitHub Pagesに公開してくれるツールなんです！
これで勝手にgh-pagesというブランチができて、そこに勝手にビルドされた公開用のファイルがアップロードされ、index.htmlはrootディレクトリに置かれて、万事解決っていうツールです。
ちなみに、通常使っているブランチはそのままなので、とってもよきですよ。
参考:GitHub PagesでReactアプリケーションを公開！【作りながら覚えるReact】
参考:GitHub ページを React でつくる (基礎編)
Q.gh-pagesで公開した後はどうやって更新するの？
ということで、gh-pagesで無事公開できたんですが、、、。
Reactサイトを更新していく予定だったので、その後の更新の仕方が分からなくなっちゃいました←
A.毎回gh-pagesでビルドしなおして公開しなおす
更新のたびにビルドしなおしてデプロイしなおすことが必要みたいです…(;´･ω･)
とりあえず更新の仕方はわかりました！良かった！
そして、↓で自動更新についても考えてみました。
Q.GitHubでmainなど特定のブランチにpushやmergeした時に自動的に公開してほしいけどできる？
毎回コマンドを打ってビルドしなおしてデプロイしなおすってめちゃくちゃめんどくさいですよね。
しかもgh-pagesを使う時に、毎回GitHubのユーザー情報を聞かれますｗ
めっちゃだるい…
どうせなら、GitHubにpushしたりmargeしたりした時に、勝手に更新してほしい！
A.できます。GitHub Actionsならね
これ、ちょっと上の方の疑問のところで既にネタバレしていますが←
GitHub Actionsを利用したら、pushやmargeした時に自動更新する設定ができるんです。
ymlっていう設定ファイルを書かないといけないので、結構ハードル高めだったのですが、、、。
なんとか自動更新できるようになったので、更新がめちゃくちゃ楽になりました～！
参考:GitHub Actionsでgh-pagesを利用してReactアプリをGitHub Pagesにデプロイする
まとめ
いかがでしたか～？
同じように悩んでいる方の参考になったら嬉しいです(*´ω｀)
今後、GitHub Actionsでの設定ファイルのこととか書けたらいいな～と思っているので、良かったら見に来てください♪
