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

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

ドメイン切り替え手順

1. Kurocofrontで独自ドメインを登録する

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

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

Image (fetched from Gyazo)

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

Image (fetched from Gyazo)

2. CNAMEレコードを設定する。

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

Image (fetched from Gyazo)

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

参考) DNSレコードの設定は取得したドメイン会社により異なります。詳細な設定方法は取得したドメイン会社にてご確認ください。

3. アカウント設定でフロントエンドドメインを変更する

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

Image (fetched from Gyazo)

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

Image (fetched from Gyazo)

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

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

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


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

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

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

Image (fetched from Gyazo)

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

例)

  • 独自ドメイン:https://www.example.com
  • APIドメイン:https://api.example.com

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

Image (fetched from Gyazo)

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

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

Image (fetched from Gyazo)

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

Image (fetched from Gyazo)

以上でAPIドメインの設定完了です。

5. CORSに独自ドメインを追加する

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

Image (fetched from Gyazo)

[CORS_ALLOW_ORIGINS]より、「Add Origin」をクリックします。

Image (fetched from Gyazo)

するとテキストフィールドが追加されます。
テキストフィールドに独自ドメインを入力し、「Save」をクリックします。

Image (fetched from Gyazo)

以上でCORSの設定完了です。

6. ドメインを直接記述しているファイルを修正する

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

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

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

参考) GitHubからKurocoFrontへソースをデプロイする方法 4. .github/workflows にYAMLファイルを配置する

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

7. hostsファイルを修正し、DNS変更前にサイトの表示を確認する

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

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

Image (fetched from Gyazo)

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

hosts sample
151.101.XX.XXX www.example.com

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

参考) サイトがうまく表示されない場合は下記をご確認ください。

8. ドメインを利用する為のDNSレコードを設定する

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

Image (fetched from Gyazo)

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

参考) DNSレコードの設定は取得したドメイン会社により異なります。詳細な設定方法は取得したドメイン会社にてご確認ください。

DNSが反映されると、独自ドメインにアクセスでKurocoのサイトが表示されるようになります。左サイドバーの「サイトを表示」をクリックすると、独自ドメインが適応されたサイトが表示されます。 Image (fetched from Gyazo)

関連ドキュメント

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

お探しのページは見つかりましたか?解決しない場合は、問い合わせフォームからお問い合わせいただくか、Slackコミュニティにご参加ください。