---
title: 別サイトで使用しているドメインをKurocoに切り替える際の手順
---

現在別のサイトで使用している使用しているドメインを、Kurocoで作成したサイトに切り替える手順を説明します。

## ドメイン切り替え手順
### 1. Kurocofrontで独自ドメインを登録する

[環境設定] -> [独自ドメイン/TLS証明書]をクリックし、「独自ドメイン」のテキストフィールドに利用するドメインを入力します。

:::tip
最後尾にスラッシュやディレクトリなどは必要ありません。
:::

![Image from Gyazo](https://t.gyazo.com/teams/diverta/44b6ce3e459e41ca43678a833a55a826.png)

入力後、「追加する」ボタンをクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/528ce38cba2754e3b78d186c588b4837.png)

### 2. CNAMEレコードを設定する。
独自ドメインを追加すると、DNSレコードの確認ができるようになります。  
KurocoFrontの画面より、「ドメイン所有権の確認」のDNSレコードを確認します。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/2411600ab988807b49eca22c46378d18.png)

表示されている内容に従い、CNAMEの設定をしてください。

:::danger
このステップではまだ「ドメインを利用する為のDNSレコード」は設定しません。  
「ドメイン所有権の確認」のDNSレコードのみ設定してください。
:::

参考) DNSレコードの設定は取得したドメイン会社により異なります。詳細な設定方法は取得したドメイン会社にてご確認ください。
- [お名前.com Navi ネームサーバー/DNSについて](https://www.onamae.com/guide/p/70)
- [Google Domainsヘルプ ドメイン ネームサーバーの管理](https://support.google.com/domains/answer/3290309?hl=ja)

### 3. アカウント設定でフロントエンドドメインを変更する
フロントエンドドメインを独自ドメインに変更します。  
[環境設定] -> [アカウント設定]をクリックし、アカウント設定画面を表示します。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/305d23c42fea6e17ba789407fa9fdd74.png)

「フロントエンドドメイン」に設定した独自ドメインが表示されるので、チェックを入れ「更新する」をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/9b8af1de9171b110601abf68645b8de9.png)

![Image from Gyazo](https://t.gyazo.com/teams/diverta/3cab5b76eda4ff4cdc2118aca85f004f.png)

なお、現時点では「ドメインを利用する為のDNSレコード」を変更していないため、独自ドメインはまだKurocoで作成したサイトの表示にはなりません。独自ドメインにアクセスしても、元のサイトにアクセスされます。

### 4. 独自APIドメインを登録する(必要な方のみ)

:::tip
こちらは下記に該当する方のみ対応が必要となります。  
[API] -> [セキュリティ]でCookieを利用している  
上記に該当しない場合は、[5. CORSに独自ドメインを追加する](#5-corsに独自ドメインを追加する)まで進んでください。
:::

---
次に独自APIドメインを登録します。  

[環境設定] -> [独自ドメイン/TLS証明書]より「独自ドメイン」のテキストフィールドに利用するドメインを入力します。

:::tip
最後尾にスラッシュやディレクトリなどは必要ありません。
:::

![Image from Gyazo](https://t.gyazo.com/teams/diverta/328db4c19a7b8cbe76a549a01597ad8d.png)

また、独自APIドメインは、独自ドメインとサブドメイン違いで設定する必要がありますのでご注意ください。  

例)  
- 独自ドメイン：`https://www.example.com`
- APIドメイン：`https://api.example.com`

独自APIドメインを登録すると、DNSレコードが確認できます。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/315f1b83b987783ce37f42edb91a8cc6.png)

表示されている内容に従い、CNAMEまたはAレコードの設定をしてください。

設定変更後、APIドメインを変更します。
[環境設定] -> [アカウント設定]をクリックし、アカウント設定画面を表示します。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/3a31068a1ee6b74b9f4c17911363b517.png)

「APIドメイン」より、設定したAPIドメインにチェックを入れ、「更新する」をクリックします。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/98511da63d88255b7ac1e800dfb103ee.png)

### 5. CORSに独自ドメインを追加する
APIのCORS設定に独自ドメインを追加します。
[API]よりご利用のAPIを選択し、「CORSを設定する」をクリックします。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/ae5ac217eb9ee29f1dfd5656c2322fe7.png)
[CORS_ALLOW_ORIGINS]より、「Add Origin」をクリックします。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/b8eaf84945f48b74ae372ddd47060c28.png)
するとテキストフィールドが追加されます。  
テキストフィールドに独自ドメインを入力し、「Save」をクリックします。

![Image (fetched from Gyazo)](https://t.gyazo.com/teams/diverta/f6ce21e057f8e97490ec7fe9b39867c3.png)
以上でCORSの設定完了です。

### 6. ドメインを直接記述しているファイルを修正する
連携しているGitHubのリポジトリのファイルにドメインを直接記述している場合、ファイルを修正します。  

**GitHub Actions用YAMLファイル**  
GitHub Actions連携のYAMLファイル内にはドメインが記載されますので、独自ドメイン設定後はファイルを修正してください。

[KurocoFront] -> [GitHub]をクリックし、「リポジトリ」よりYAMLファイルをコピーしてご利用ください。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/78420b89898335775930b8793dd28789.png)

:::info
[GitHubからKurocoFrontへソースをデプロイする方法 4. .github/workflows にYAMLファイルを配置する](/ja/docs/tutorials/connect-to-github-with-kuroco-front/#4-githubworkflows-にyamlファイルを配置する)
:::

**.envファイル**  
.envファイルにルートドメインやAPIドメインを直接記述している場合は修正してください。

### 7. hostsファイルを修正し、DNS変更前にサイトの表示を確認する
DNSを切り替える前にサイトの表示を確認したい場合、hostsファイルを変更することによって確認が可能です。  
必須の作業ではありませんが、DNS変更の前に表示の確認が必要な場合は下記を参考にしてください。

hostsファイルに記載するAレコードは、[環境設定] -> [独自ドメイン/TLS証明書]の「ドメインを利用する為のDNSレコード(CNAMEが利用できない場合)」をご確認ください。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/972a8d6a8359e3fae9d4a7a2f2b9977a.png)

なお、上記画面ではAレコードが4件表示されますが、hostsには1件のみ記載すれば確認可能となります。

```hosts title="hosts"
151.101.XX.XXX www.example.com
```

:::caution
表示の確認後、hostsの設定は必ず元に戻してください。
:::

:::tip
サイトがうまく表示されない場合は下記をご確認ください。  
- [独自ドメインを設定しましたがサイトが表示できません。何を確認すれば良いでしょうか？](/ja/docs/faq/setting-up-a-custom-domain/)
:::

### 8. ドメインを利用する為のDNSレコードを設定する
最後にDNSレコードを変更します。  
[環境設定] -> [独自ドメイン/TLS証明書]をクリックし、「ドメインを利用する為のDNSレコード(推奨)」または「ドメインを利用する為のDNSレコード(CNAMEが利用できない場合)」を確認します。

![Image from Gyazo](https://t.gyazo.com/teams/diverta/3c8267ffd6320515407bae03986ac9d4.png)

表示されている内容に従い、CNAMEまたはAレコードの設定をしてください。 

参考) DNSレコードの設定は取得したドメイン会社により異なります。詳細な設定方法は取得したドメイン会社にてご確認ください。
- [お名前.com Navi ネームサーバー/DNSについて](https://www.onamae.com/guide/p/70)
- [Google Domainsヘルプ ドメイン ネームサーバーの管理](https://support.google.com/domains/answer/3290309?hl=ja)

DNSが反映されると、独自ドメインにアクセスでKurocoのサイトが表示されるようになります。左サイドバーの「サイトを表示」をクリックすると、独自ドメインが適応されたサイトを表示します。
![Image from Gyazo](https://t.gyazo.com/teams/diverta/a9912852dc2324076b459e8757ebc84a.png)

## 関連ドキュメント
独自ドメイン、KurocoFrontに関するドキュメントです。併せてご確認ください。

- [KurocoFrontで独自ドメインを利用する手順](/ja/docs/tutorials/using-a-custom-domain-name-on-kurocofront/)
- [GitHubからKurocoFrontへソースをデプロイする方法](/ja/docs/tutorials/connect-to-github-with-kuroco-front/)
- [独自ドメインを設定しましたがサイトが表示できません。何を確認すれば良いでしょうか？](/ja/docs/faq/setting-up-a-custom-domain/)
