---
title: KurocoFrontで独自ドメインを利用する手順
description: KurocoFrontへ独自ドメインを適用する方法を紹介します。独自ドメインを適用するには、そのドメインに対してDNSレコードを設定する権限が必要になります。
---

KurocoFrontへ独自ドメインを適用する方法を紹介します。    
独自ドメインを適用するには、そのドメインに対してDNSレコードを設定する権限が必要になります。
また、TLS証明書の設定までが必須でTLS証明書の持ち込みはできません。

## 独自ドメイン利用手順

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

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

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

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

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

:::danger 要注意
独自ドメインは一度追加すると変更ができません。間違って入力してしまった場合は、サポート宛にご連絡をお願いいたします。    
[フォームより問い合わせをする](https://kuroco.zendesk.com/)
:::

暫くすると、以下のように設定するべきDNSレコードが表示されます。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/fbe71e7ba9c3ed5c6aa8328be7548901.png)

### 2. DNSレコードの設定
次にDNSレコードの設定をします。  
表示されている内容に従い、CNAME、Aレコードを設定してください。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/fbe71e7ba9c3ed5c6aa8328be7548901.png)

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

DNSレコードをセットすると以下のようにOKが表示されます。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/a8dfa4107bf5a906d6054b5b6e0c8f67.png)

:::tip
DNSレコードの反映およびステータスの更新には時間がかかることがあります。OKが表示されない場合は、時間を置いてから「リロードする」ボタンを押して確認してください。
:::

:::info
独自ドメイン/TLS証明書 の ドメイン所有権の確認 は、dns.google.com を利用してDNSレコードの確認を行っています。  
下記の画面から DNSレコードのキャッシュのクリアが出来るので、お急ぎの場合はこちらをお試しいただくと早く更新されることがあります。  
https://developers.google.com/speed/public-dns/cache?hl=ja  

Doman Name:`_acme-challenge.CUSTOM_DOMAIN`  
RR Type:`CNAME`
:::

### 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)

これで独自ドメインが利用できるようになりました。
左サイドバーの[サイトを表示]をクリックすると独自ドメインが適応されたサイトを表示します。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/642009338d99503898995fe8eed1a3d0.png)

:::tip
TLS証明書がCDNに反映し終わるまで、10数分程度かかる場合があります。
:::

### 4. YAMLファイルの修正
KurocoFrontを利用していてYAMLファイルを作成している場合、YAMLファイルの修正が必要となります。

[KurocoFront] -> [GitHub]をクリックします。

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

「リポジトリ」の「GitHub Actions workflow file フロントエンド ドメイン」の内容を確認します。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/2c19058aac0fedbaadbfb88ba3b33111.png)

webhookの箇所にドメインの記載箇所があり、こちらが独自ドメインに変更されています。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/50586339002aa7388d138b3f4cd4faf4.png)

![fetched from Gyazo](https://t.gyazo.com/teams/diverta/2a2851760e638026dd43512683c53a7f.png)
ご自分のYAMLファイル内のdomainの箇所を、設定した独自ドメインに修正してください。  
なお、YAMLファイル内にdomainの指定設定は２箇所あります。２箇所修正をお願いします。

:::tip
KurocoFrontの設定方法は、[GitHubからKurocoFrontへソースをデプロイする方法](/ja/docs/tutorials/connect-to-github-with-kuroco-front/)を参考に設定してください。
:::

## 関連ドキュメント
独自ドメイン設定がうまくできない場合、下記をご確認ください。

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

独自APIドメインの設定方法は下記をご確認ください。
- [KurocoFrontで独自APIドメインを利用する手順](/ja/docs/tutorials/using-your-own-api-domain-with-kurocofront/)

wwwなしからのリダイレクト設定は下記をご確認ください。
- [独自ドメインでwwwなしでもサイト表示できますか？](/ja/docs/faq/can-i-display-my-site-on-custom-domain-without-www/)