Reactのプロジェクトをカスタムドメインを使用してGitHubPagesで公開する方法

今回はReact(TypeScriptベースでも構いません)のプロジェクトをGitHubPageで公開する方法を記事にまとめたいと思います。

※レンタルサーバーなどは利用しません。
※この記事を読む前にドメインを取得しているとスムーズに進みます。（ステップ4）
※今回ドメインの取得は[ムームードメイン](https://muumuu-domain.com/)にて行いました。
（別のサービスでも同様にできるかと思います）

# なぜこの記事を書こうとしたか
自分なりに色々と調べましたが、中々良い記事が見つからず、解決するまで約5日ほどかかってしまったからです。
また、日本語でReactのプロジェクトをGitHubPagesで公開するやり方をまとめた記事が少なかったことも理由となります。

早速始めましょう🔥

# 環境
- Editor VSCode
- React 18.2.0
- node 16.14.0
- npm 8.7.0
- yarn 1.22.17
- MacOS Monterey 12.0.1

# 【ステップ1： アプリの雛形を作成しよう】
まずはReactの雛形を作成しましょう。
```terminal
作成するディレクトリ % create-react-app アプリ名

// TypeScriptを利用する場合
作成するディレクトリ % create-react-app アプリ名 --template typescript
```
雛形作成後以下のように作成できていれば雛形の作成は完了です。
![スクリーンショット 2023-01-14 23.05.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559448/d3a2455c-8b52-5c51-44f3-7934f2aa1f29.png)

念の為、`cd アプリ名`でプロジェクトに移動し、`code .`でVSCodeを開き、`npm start`もしくは`yarn start`でアプリが起動できるか試しておきましょう。

# 【ステップ2： GitHubにリポジトリを作成しよう】
リポジトリ名を決め、そのまま一番下の`Create repository`を押してください。
※Publicが選択されていることを確認してください。（有料会員の方はPrivateでも構いません）
![スクリーンショット 2023-01-14 23.29.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559448/fc4a5ce1-89c0-5531-a18c-672ef2cb6c35.png)

# 【ステップ3： gh-pagesをインストールして設定しよう】
次にgh-pagesというライブラリをインストールします。（[gh-pages](https://www.npmjs.com/package/gh-pages)）
以下のコマンドをプロジェクトのディレクトリで実行してください。
```terminal
アプリ名 % npm install gh-pages --save-dev
```
インストール完了後、package.jsonを確認しgh-pagesがインストールできていることを確認しましょう。
```package.json
"dependencies": {
    "gh-pages": "^4.0.0", // このような記述があればインストールが完了しています
}
```

次にpackage.jsonの中身に記述を追加します。
```package.json
   "scripts": {
        "predeploy": "npm run build",
        "deploy": "gh-pages -d build"
    },
   "homepage": "https://ステップ4で取得するドメイン" // 例）https://example.com
```

次にpulicディレクトリの配下に「CNAME」というファイルを作成し、ステップ4で取得するドメインを入力します。
（index.htmlやfavicon.ico等がある階層です）
![スクリーンショット 2023-01-15 1.31.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559448/5df923a2-79e3-d09a-3b71-c8201e39df7e.png)


ここまでできたらコミットプッシュをしたあとに以下のコマンドを実行してください。
```terminal
アプリ名　% git init
アプリ名　% git remote add origin https://github.com/ユーザー名/先程作ったリポジトリ名.git
アプリ名　% npm run deploy
```

# 【ステップ4： ドメインを取得しよう】
※ドメインを既に取得している方はこの手順を飛ばしてください。
今回はムームードメインにてドメインの取得と設定を行います。
まずは[ムームドメイン](https://muumuu-domain.com/)にアクセスしてアカウントを作成しましょう！
アカウントが作成できたら検索のところでほしいドメインを入力し検索をします。
![スクリーンショット 2023-01-14 23.41.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559448/d6a0a2e8-fb55-77e1-e49f-4917b8f9f10a.png)
例えば`test11111111111111`だと以下のドメインが購入できそうです。
![スクリーンショット 2023-01-14 23.42.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559448/0ffe8747-6044-5383-9688-323b7ad9981d.png)
ドメインが決まったら購入手続きに進みましょう。
まずはじめに1.ドメイン設定のところはWHOIS公開情報の「ムームードメインの情報を代理公開する」にチェックを入れ、ネームサーバは「ムームーDNS」を選択してください。
2.レンタルサーバー利用は「利用しない」にチェックを入れます。
![スクリーンショット 2023-01-14 23.44.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559448/ad750616-fd81-1712-0f82-a64af0e28f67.png)
3.有料オプションサービスは特にチェック無しで大丈夫です。またムームーメールはチェックを入れても入れなくてもどちらでも良いです。今回はチェックを外して進みます。
4.クーポンを持っている方はここで入力しましょう。
![スクリーンショット 2023-01-14 23.48.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559448/8e8be056-d138-4be4-4e60-6359a038c503.png)
5.お支払い方法の設定はクレジットカード決済がおすすめです。ここではクレジットカードで進めることにします。
（他の決済サービスでも大丈夫です）
ドメインの契約年数は自身で設定してださい。ここでは1年とします。
![スクリーンショット 2023-01-14 23.51.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559448/19dc048f-2b9b-a406-38a3-31214f86adc4.png)
すべて入力できたら「次のステップへ」を選択し次へ進みましょう。
ユーザー情報確認が済んでいる方はスキップされ内容確認ページへ遷移するかと思うで、利用規約を確認し「取得する」をクリックします。
ムームードメイン利用が初めての方はユーザー情報確認ページで住所などの情報を登録します。
その後内容を利用規約に同意したあと確認し「取得する」をクリックしてください。
![スクリーンショット 2023-01-14 23.54.31.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559448/283fdebf-9764-cf9d-bf2b-96891fec6dbd.png)

# 【ステップ5： DNSの設定をしよう】
ドメインが取得できたら「コントロールパネル」をクリックします。
コントロールパネルは画面右上の人のアイコンから選択することができます。
![スクリーンショット 2023-01-14 23.59.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559448/772ee819-5918-9232-78cc-6c2f8a249027.png)
コントロールパネルに遷移できたら画面左側の「ドメイン操作」から「ムームーDNS」をクリックします。
![スクリーンショット 2023-01-15 0.01.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559448/fd862cd7-5488-026c-80c5-0dbe5880f6d2.png)
次に「変更」ボタンをクリックします。
![スクリーンショット 2023-01-15 0.04.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559448/6b52c85a-447d-657d-4a2d-e382126b4b1c.png)
次に画面一番下にある「カスタム設定」をクリックします。
![9a215b86932fa60a63a4ce76d814251b-1536x1022.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559448/f7d90f0c-84fe-2251-ddd0-5b0c37d7109b.jpeg)
次に「設定2」を以下のように設定します。
No5の内容に入るところですが、ここは`GitHubのユーザー名.github.io`としてください。
No1〜No5まですべて以下画像通り設定ができたら最後に「セットアップ情報」をクリックし設定を完了します。
![スクリーンショット 2023-01-15 0.11.50.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559448/94b88574-57cb-b41d-ae43-6222af7c681b.png)

# 【ステップ6： GitHubの設定をしよう】
まずは先程作ったリポジトリを開き、一番右にある「Settings」をクリックします。
![スクリーンショット 2023-01-15 0.23.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559448/29137ac3-d2b7-4914-c3ba-b1a8cdc79259.png)
次に左側に並んでいる「Pages」をクリックします。
![スクリーンショット 2023-01-15 0.24.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559448/5ac488e6-038e-dc84-59ae-8b5dd185b28e.png)
次に以下画像通りの順番で設定します。
![スクリーンショット 2023-01-15 0.25.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559448/5e5cdd6e-6232-114e-21bb-1f357bef0875.png)

ここまでできたらリポジトリにの「Code」に戻り画面右側の`Environments`の`github-pages`がActiveになるの待ちます。
（表示に時間がかかる場合があります）
![スクリーンショット 2023-01-15 0.32.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559448/9f40ea91-6d5f-dc32-d4dd-8923545c26b3.png)

最後に最新の`View deployment`をクリックすると取得したドメインでアプリが見れるはずです！
※上記GitHubPagesの設定の画像⑥の`Enforce HTTPS`にチェックを入れてからアプリでhttpsが有効になるまでは最大15分ほど時間がかかる場合があります。httpでは確認できるはずです。
![スクリーンショット 2023-01-15 0.33.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559448/51712790-f78d-2780-6c88-84e11e57f71f.png)
![スクリーンショット 2023-01-15 0.43.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2559448/a0f28b0e-3ace-a9c4-e83e-6a0f9da31ce6.png)


### お疲れ様でした！！✨
少しでも参考になったという方は「いいね」をお願いします！
ちなみに、公開後あとからプロジェクトに修正を加えて公開しているアプリにその差分を加える場合は、
いつも通りコミットプッシュを行ったあとに以下のコマンドを実行すれば差分が反映されます。
```
アプリ名 % npm run deploy
```

## もし取得したドメインでアプリが見れない場合は以下を確認しましょう。
- ムームードメインの設定で「ＷＨＯＩＳ情報」は`弊社の情報を代理公開`にチェックが付いていますか？
- ムームーDNS設定は正しく設定されていますか？（※ステップ5）