独自ドメイン登録後、kuroco-front.appのドメインをフロントエンドのステージサイトとして利用する

概要

独自ドメインの利用を開始すると、デフォルトで存在するhttps://サイトキー.g.kuroco-front.appをステージングサイト用のドメインとして利用できます。
本チュートリアルでは、GitHubのブランチを分けることでhttps://サイトキー.g.kuroco-front.appのドメインをフロントエンドのステージサイトとして利用する方法を紹介します。

学べること

本チュートリアルでは以下の手順でそれぞれの環境を作成します。

ステージング環境の設定手順
開発環境の設定手順
ファイル構成の確認

前提条件

今回は下記の構成で実装します。

環境	ブランチ	ドメイン	用途
本番環境	main	`独自ドメイン`	公開用のサイト
ステージング環境	stg	`https://サイトキー.g.kuroco-front.app`	本番とバックエンドは共通、フロントエンドが異なるデザイン修正などの事前確認用サイト
開発環境	dev	`独自ドメイン`	本番とバックエンド及びフロントエンドが異なる、機能追加時の事前確認用サイト

注: 今回はブランチ名を stg, devとしていますが、任意に変更して構いません。

また、本チュートリアルはKurocoFrontで独自ドメインを利用する手順及び、KurocoFrontで独自APIドメインを利用する手順が完了し、独自ドメインでサイトの表示ができている状態を前提としています。

ステージング環境の設定手順

1. stgブランチを作成する

本番サイトとステージング環境の表示はGitHubのブランチで分けます。
対象のディレクトリに移動後、コマンドラインより下記実行します。

git checkout -b stg

2. kuroco_front_stg.jsonを作成する

ステージング環境だけにBASIC認証をかけるために、ステージング環境用のkuroco_front.jsonを作成します。

/static 配下のkuroco_front.jsonをコピーして、kuroco_front_stg.jsonを作成します。

以下のようにBasic認証を記述します。

{
    "rewrites": [
        {
          "source": ".*",
          "destination": "/index.html"
        }
      ],
    "redirects": [],
    "basic":["user:pass"],
    "ip_restrictions":[]
}

3. staging.ymlファイルを追加する

次に、stgブランチで変更をpushした際にGithub Actionsを動作させるためのYAMLファイルを追加します。
Kuroco管理画面より[KurocoFront] -> [GitHub]をクリックし、「GitHub Actions workflow file ステージングサイト」のテキストエリア内をコピーします。

Image from Gyazo

コピーした内容で.github/workflows/staging.ymlファイルを作成します。

Image from Gyazo

さらにstaging.ymlファイルに以下の修正を加えます。

Github Actionsの名前を変更する 1行目の以下に変更します。
name: Build and deploy to Kuroco front(stg)
Github Actions実行のトリガーになるブランチを変更する
branches: の部分をmainからステージング環境用のブランチ名に修正します。
今回はstgに修正します。
GitHubのシークレットを読み込む
.github/workflows/staging.yml の jobs:の直前に下記の記述を追加します。
```
env:
BASE_URL: ${{secrets.BASE_URL}}
```
ステージング環境用のkuroco_front.jsonを利用する
KurocoFrontを利用するためのJSONファイルはkuroco_front.jsonです。
そこで、kuroco_front_stg.jsonをkuroco_front.jsonにコピーする記述をYAMLファイルに追加することで、staging.yml が実行されたときのみkuroco_front_stg.jsonを利用するように対応します。 .github/workflows/staging.yml の - name: Use Node.jsの直前に下記の記述を追加します。(2箇所)
```
- name: Copy kuroco_front.json
  run:  cp static/kuroco_front_stg.json static/kuroco_front.json 
```

staging.ymlファイルは以下のようになります。

Image from Gyazo

修正が完了したらファイルを保存します。

4. stgブランチでpushする

ここまでの変更をGithHubにpushします。 GitHubの「Actions」タブをクリックすると、ビルドの状況が確認でき、staging.ymlの内容でビルドが実行されていることがわかります。

Image from Gyazo

ビルドが完了したら、Kuroco管理画面のロゴマークからステージング環境にアクセスします。

Image from Gyazo

ステージング環境にアクセスすると、Basic認証が求められることを確認できました。

Image from Gyazo

Kuroco管理画面の[サイトを表示]で本番環境にアクセスすると、Basic認証は求められませんので、stgブランチでの更新がステージング環境のみに反映されていることがわかります。

Image from Gyazo

5. stgブランチの変更をmainブランチにマージする

最後に以上の内容をmainブランチにマージします。本番用のbuild.ymlファイルが実行されますが、変更したファイルは以下になりますので、フロントエンドの表示には影響ありません。

staging.yml
kuroco_front_stg.json

以上でステージング環境の設定が完了です。以降、ステージング環境用のブランチ(今回の場合はstg)で変更した内容はステージング環境 (https://サイトキー.g.kuroco-front.app) に反映されます。

開発環境の設定手順

1. devブランチを作成する

本番サイトと開発環境の表示はGitHubのブランチで分けます。
対象のディレクトリに移動後、コマンドラインより下記実行します。

git checkout -b dev

2. kuroco_front_dev.jsonを作成する

開発環境だけにBASIC認証をかけるために、開発環境用のkuroco_front.jsonを作成します。

/static 配下のkuroco_front.jsonをコピーして、kuroco_front_dev.jsonを作成します。

以下のようにBasic認証を記述します。

{
    "rewrites": [
        {
          "source": ".*",
          "destination": "/index.html"
        }
      ],
    "redirects": [],
    "basic":["user:pass"],
    "ip_restrictions":[]
}

3. サブサイトを追加する

次にバックエンドを開発環境と分けるため、Kurocoの管理画面からサブサイトを作成します。

サブサイトの作成

[環境設定] -> [サイト一覧]をクリックします。

Image from Gyazo

[追加]をクリックします。

Image from Gyazo

下記のように設定して[追加する]をクリックします。

項目	設定
コピー元のサイト名	本番環境のサイトを選択
サイト名	開発環境サイト
サイトキー	任意のサイトキー
メールアドレス	サイトの構築完了メールの送付先
初期パスワード	任意のパスワード
会社名	貴社名
名前	ご自身のお名前

Image from Gyazo

GitHub連携

サブサイトが作成できたら、サブサイトとGithubを連携します。
[KurocoFront]->[GitHub]をクリックします。

Image from Gyazo

[GitHubリポジトリと接続する]をクリックし、GitHubと連携します。

Image from Gyazo

GitHubと連携ができたらリポジトリを本番環境と同じリポジトリに設定して[更新する]をクリックします。

Image from Gyazo

4. 独自ドメイン、独自APIドメインを設定する

開発環境用の独自ドメインと独自APIドメインを設定します。
[環境設定]->[独自ドメイン/TLS証明書]から開発環境用の独自ドメインと独自APIドメインを設定します。

Image from Gyazo

DNSの設定が反映され、全てOKの表示になったら完了です。

Image from Gyazo

[環境設定]->[アカウント設定]からフロントエンドドメインとAPIドメインを変更します。

Image from Gyazo

5. 開発環境用のGitHubシークレットを設定する

バックエンドが本番環境と異なるため、開発環境ではAPIドメインも本番環境と異なるドメインになります。
Kurocoビギナーズガイドでは、APIドメインをGitHubシークレットに設定しているため、開発環境用のAPIドメインを設定したGitHubシークレットを追加します。

GitHubのリポジトリのページから、[Settings]->[Secrets]->[Actions] に遷移し、[New repository secret]をクリックします。

Image from Gyazo

以下を入力して、[Add secret]をクリックします。

項目	値
Name	BASE_URL_DEV
Secret	開発環境用のAPIドメイン

Image from Gyazo

6. develop.ymlファイルを追加する

次に、devブランチで変更をpushした際にGithub Actionsを動作させるためのYAMLファイルを追加します。
先ほど作成した開発環境用のKuroco管理画面より[KurocoFront] -> [GitHub]をクリックします。
「GitHub Actions workflow file フロントエンドドメイン」のテキストエリア内をコピーします。

Image from Gyazo

コピーした内容で.github/workflows/develop.ymlファイルを作成します。

Image from Gyazo

さらにdevelop.ymlファイルに以下の修正を加えます。

Github Actionsの名前を変更する 1行目の以下に変更します。
name: Build and deploy to Kuroco front(dev)
Github Actions実行のトリガーになるブランチを変更する
branches: の部分をmainから開発環境用のブランチ名に修正します。
今回はdevに修正します。
GitHubのシークレットを読み込む
.github/workflows/develop.yml の jobs:の直前に下記の記述を追加します。
```
env:
BASE_URL: ${{secrets.BASE_URL_DEV}}
```
開発環境用のkuroco_front.jsonを利用する
KurocoFrontを利用するためのJSONファイルはkuroco_front.jsonです。
そこで、kuroco_front_dev.jsonをkuroco_front.jsonにコピーする記述をYAMLファイルに追加することで、develop.yml が実行されたときのみkuroco_front_dev.jsonを利用するように対応します。
.github/workflows/develop.yml の - name: Use Node.jsの直前に下記の記述を追加します。(2箇所)
```
- name: Copy kuroco_front.json
  run:  cp static/kuroco_front_dev.json static/kuroco_front.json 
```

develop.ymlファイルは以下のようになります。

Image from Gyazo

修正が完了したらファイルを保存します。

7. devブランチでpushする

ここまでの変更をGithHubにpushします。 GitHubの「Actions」タブをクリックすると、ビルドの状況が確認でき、develop.ymlの内容でビルドが実行されていることがわかります。

Image from Gyazo

ビルドが完了したら、Kuroco管理画面の[サイトを表示]から開発環境のサイトにアクセスします。

Image from Gyazo

BASIC認証以外は本番環境と同じ表示がされます。

8. devブランチの変更をmainブランチ、stgブランチにマージする

以上の内容をmainブランチとstgブランチにマージします。
build.ymlファイル及び、staging.ymlファイルが実行されますが、変更したファイルは以下になりますので、フロントエンドの表示には影響ありません。

develop.yml
kuroco_front_dev.json

以上で開発環境の設定が完了です。以降、開発環境用のブランチ(今回の場合はdev)と開発環境サイトの管理画面で変更した内容は開発環境サイトに反映されます。

開発環境と本番環境間でデータの同期をする

本番環境と開発環境でデータの差異が大きくなってしまった場合や、
開発環境で更新したコンテンツや追加した処理などを一括で本番環境に反映したい場合、同期の機能が利用できます。

サイト一覧から同期先になるサイトの[編集]をクリックします。

Image from Gyazo

同期の項目で同期元サイトキーを選択し、すぐに同期するにチェックを入れて更新します。
Image from Gyazo

「更新しました。」の表示がでたら同期は完了です。

危険

同期の方向を間違うと必要なデータがすべて上書きされてしまうため、
必要に応じてバックアップを取っておくことをお勧めします。

ファイル構成の確認

ステージング環境及び、開発環境の準備が完了すると、どのブランチにも以下のファイルが存在する状態となります。
うまくいかない場合はファイル構成が間違っていないかご確認ください。

.github\workflows
  - build.yml
  - develop.yml
  - staging.yml
static
  - kuroco_front_dev.json
  - kuroco_front_stg.json
  - kuroco_front.json

Image from Gyazo

環境変数の設定

一般的に、開発環境と本番環境で異なる環境変数を使用することはよくあります。本チュートリアルではAPIドメインをGitHubシークレットに保存して使い分けるように説明をしましたが、環境変数の種類が多い場合、環境変数設定ファイルを使用したほうが確認・更新の手間が少なくなります。

ただし、こちらはGitHubのリポジトリから変数の確認ができますので、Githubシークレットにするか、環境変数設定ファイルにするかはその機密性に応じて使い分けてください。

環境変数設定ファイルの作成

以下の環境変数設定ファイルを設定し、各環境に反映してみます。

ファイル名	用途
.env.production.js	本番環境の環境変数設定ファイル
.env.staging.js	ステージング環境の環境変数設定ファイル
.env.develop.js	開発環境の環境変数設定ファイル

まずは各ファイルを以下の内容で作成します。

.env.production.js

module.exports = {
  SITE_TITLE: 'Kurocoサンプルサイト',
  META_TITLE: 'Kurocoサンプルサイト',
  SITE_DESCRIPTION: 'Kurocoビギナーズガイドを参考に作成したサンプルサイトです。',
  RSS_SITE_TITLE: 'Kurocoサンプル',
  RSS_SITE_DESCRIPTION: 'KurocoビギナーズガイドでKuroco利用を開始しましょう',
  ROBOTS: 'index',
}

.env.staging.js

module.exports = {
  SITE_TITLE: '[ステージング]|Kurocoサンプルサイト',
  META_TITLE: '[ステージング]|Kurocoサンプルサイト',
  SITE_DESCRIPTION: '[ステージング]|Kurocoビギナーズガイドを参考に作成したサンプルサイトです。',
  RSS_SITE_TITLE: '[ステージング]|Kurocoサンプル',
  RSS_SITE_DESCRIPTION: '[ステージング]|KurocoビギナーズガイドでKuroco利用を開始しましょう',
  ROBOTS: 'noindex',
}

.env.development.js

module.exports = {
  SITE_TITLE: '[開発]|Kurocoサンプルサイト',
  META_TITLE: '[開発]|Kurocoサンプルサイト',
  SITE_DESCRIPTION: '[開発]|Kurocoビギナーズガイドを参考に作成したサンプルサイトです。',
  RSS_SITE_TITLE: '[開発]|Kurocoサンプル',
  RSS_SITE_DESCRIPTION: '[開発]|KurocoビギナーズガイドでKuroco利用を開始しましょう',
  ROBOTS: 'noindex',
}

YAMLファイルの更新

YAMLファイルのenvセクションを使用してNODE_ENVを定義します。

env:
  BASE_URL: ${{secrets.BASE_URL}}

この部分の下にそれぞれ以下のように追加します。

build.yml

env:
  BASE_URL: ${{secrets.BASE_URL}}
  NODE_ENV: production

staging.yml

env:
  BASE_URL: ${{secrets.BASE_URL}}
  NODE_ENV: staging

develop.yml

  BASE_URL: ${{secrets.BASE_URL_DEV}}
  NODE_ENV: development

nuxt.config.jsの更新

NODE_ENVにYAMLファイルで指定した文字列が入るので、これを利用して環境に応じた環境変数設定ファイルをnuxt.config.jsで読み込みます。

nuxt.config.jsを以下のように更新してください。
ヘッダーのサイトタイトル以外も必要に応じて記述してください。

const environment = process.env.NODE_ENV || 'development';
const envSettings  = require(`./.env.${environment}.js`);

export default {
  env: envSettings,

  // Disable server-side rendering: https://go.nuxtjs.dev/ssr-mode
  ssr: false,
  // Target: https://go.nuxtjs.dev/config-target
  target: 'static',

  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: envSettings.SITE_TITLE,
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
  ・
  ・
  ・

環境変数の反映確認

各環境に変更を反映させ、ビルドが完了した後に、各環境の表示を確認します。

以下のように環境に応じたサイトタイトルが表示されていれば完了です。

本番環境
ステージング環境
開発環境

サポート

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

フォームから問い合わせをする

Slackコミュニティに参加する

概要​

学べること​

前提条件​

ステージング環境の設定手順​

1. stgブランチを作成する​

2. kuroco_front_stg.jsonを作成する​

3. staging.ymlファイルを追加する​

4. stgブランチでpushする​

5. stgブランチの変更をmainブランチにマージする​

開発環境の設定手順​

1. devブランチを作成する​

2. kuroco_front_dev.jsonを作成する​

3. サブサイトを追加する​

サブサイトの作成​

GitHub連携​

4. 独自ドメイン、独自APIドメインを設定する​

5. 開発環境用のGitHubシークレットを設定する​

6. develop.ymlファイルを追加する​

7. devブランチでpushする​

8. devブランチの変更をmainブランチ、stgブランチにマージする​

開発環境と本番環境間でデータの同期をする​

ファイル構成の確認​

環境変数の設定​

環境変数設定ファイルの作成​

YAMLファイルの更新​

nuxt.config.jsの更新​

環境変数の反映確認​

関連ドキュメント​

サポート

概要

学べること

前提条件

ステージング環境の設定手順

1. stgブランチを作成する

2. kuroco_front_stg.jsonを作成する

3. staging.ymlファイルを追加する

4. stgブランチでpushする

5. stgブランチの変更をmainブランチにマージする

開発環境の設定手順

1. devブランチを作成する

2. kuroco_front_dev.jsonを作成する

3. サブサイトを追加する

サブサイトの作成

GitHub連携

4. 独自ドメイン、独自APIドメインを設定する

5. 開発環境用のGitHubシークレットを設定する

6. develop.ymlファイルを追加する

7. devブランチでpushする

8. devブランチの変更をmainブランチ、stgブランチにマージする

開発環境と本番環境間でデータの同期をする

ファイル構成の確認

環境変数の設定

環境変数設定ファイルの作成

YAMLファイルの更新

nuxt.config.jsの更新

環境変数の反映確認

関連ドキュメント