---
title: 会員制サンプルサイトで、開発環境と本番環境を分ける方法
description: 開発環境と本番環境を分ける対応方法を学べます。開発環境と本番環境を分けることにより、変更や修正があった場合に本番サイトへの変更を公開する前に確認できます。
---

## 概要
本チュートリアルでは、開発環境と本番環境を分ける対応方法を学べます。  
開発環境と本番環境を分けることにより、変更や修正があった場合に本番サイトへの変更を公開する前に確認できます。

### 学べること
以下の流れで開発環境と本番環境を分けていきます。
- [独自ドメインの設定](#独自ドメインの設定)
- [GitHubの設定](#githubの設定)
- [GitHubActions用Buildファイルの修正](#githubactions用buildファイルの修正)
- [npm scriptの確認](#npm-scriptの確認)
- [envファイルの確認・修正](#envファイルの確認・修正)
- [動作確認](#動作確認)

### 前提条件
本チュートリアルは、オープンソースで公開している[会員制サンプルサイト](https://github.com/diverta/front_nuxt_auth)(NuxtAuthベースのKurocoFrontテンプレートサイト)をコピーしてサイトを構築をしていることが必要となります。  
まだサイト構築していない場合は、[会員制サンプルサイトをコピーして、Kurocoで会員制サイトを構築する方法](/ja/docs/tutorials/building-a-membership-website-on-kuroco-from-the-sample-site-template/)を参考に構築をお願いします。

また、今回は下記2種類の環境を用意することを前提としており、
開発する際の確認順序として、開発環境 -> 本番環境と段階的に確認/公開していく手順を想定しています。

- 開発環境
- 本番環境

GitHubにはそれぞれの環境に対応するブランチを作成し、それぞれのブランチが変更される度にGitHub Actionsが動作します。

それでは、自動でその対応する環境のフロントエンドが変更されるフローを設定していきます。

## 独自ドメインの設定

[KurocoFrontで独自ドメインを利用する手順](/ja/docs/tutorials/using-a-custom-domain-name-on-kurocofront/)を参考に独自ドメインを設定してください。

また、今回は`フロントドメイン`と`APIドメイン`はサブドメイン関係(ドメインが一致する/ファーストパーティcookieとなる状態)に変更してください。
会員制サンプルサイトが利用しているCookieログイン方式においては、サードパーティcookie制限によりブラウザ/利用環境によってはcookieを維持できない可能性があるためです。

参考:[セキュリティ設定：Cookie で記事データを表示する](/ja/docs/tutorials/how-to-use-swagger-ui/#セキュリティ設定：cookie-で記事データを表示する)

## GitHubの設定

今回GitHubのリポジトリを上記2つのブランチに分ける必要があります。
下記のようにブランチを作成してください。

|項目   |ブランチ  |
| :--- | :--- |
| 本番環境 | main |
| 開発環境 | develop |

:::tip
ブランチの分け方は、[GitHub公式ドキュメント](https://docs.github.com/ja/desktop/contributing-and-collaborating-using-github-desktop/making-changes-in-a-branch/managing-branches)を参照してください。  
:::

:::caution
想定外の本番環境への公開を防ぐために、mainブランチにはプロテクションをかけることをお勧めします。ブランチの保護の方法は、[GitHub公式ドキュメント](https://docs.github.com/ja/github/administering-a-repository/defining-the-mergeability-of-pull-requests/managing-a-branch-protection-rule)を参照してください。
:::

## envファイルの確認・修正
まずは、開発環境/本番環境の`./env.${environment}.js`ファイルを作成します。
今回は下記のように作成します。

- `env.development.js`
- `env.production.js`


```js title="env.production.js"
module.exports = {
    META_TITLE: 'Nuxt Auth',
    ROBOTS: 'index',
    BASE_URL: 'https://[独自APIドメイン]'
};
```

```js title="env.development.js"
module.exports = {
    META_TITLE: '[開発] Nuxt Auth',
    ROBOTS: 'noindex',
    BASE_URL: 'https://[独自APIドメイン]'
};
```

:::tip
独自APIドメインは、[独自ドメインの設定](#独自ドメインの設定)で設定した内容を記載してください。
:::

このように設定することで、下記を動的に変更します。
- 本番環境のMETA TITLE：Nuxt Auth
- 開発環境のMETA TITLE: [開発] Nuxt Auth

## nuxt.config.jsの修正
`nuxt.config.js`を以下のように修正します。

```js
const environment = process.env.APP_ENV; // <- (※1)
const envSettings = require(`./env.${environment}.js`); 

import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify';
export default defineNuxtConfig({
    runtimeConfig: {
        public: {
            kurocoApiDomain: 'https://dev-nuxt-auth.a.kuroco.app'
        }
    },

    app: {
        head: {
            title: envSettings.META_TITLE,  // <- (※2)
            htmlAttrs: {
                lang: 'ja'
            },
```

(※1)の箇所で、`APP_ENV`に指定された値によって、利用するenvSettingsの値を動的に変更します。  
- APP_ENV=development の場合は `require('./env.development.js')`
- APP_ENV=production の場合は `require('./env.production.js')`

例えば(※2)のMETAタイトルの値が、それぞれの`env.${environment}.js`ファイルから設定される仕組みになります。

APP_ENVはYAMLファイルで指定します。

## GitHubActions用Buildファイルの修正

既存の`/.github/workflow/build.yml`を修正し、develop/mainブランチでそれぞれ想定した動作をするように修正します。

下記を修正します。
- [develop/main用のbuild定義を作成する](#developmain用のbuild定義を作成する)
- [Buildファイルのイベントを変更する](#buildファイルのイベントを変更する)
- [ビルドとデプロイ先をそれぞれの環境用へ設定する](#ビルドとデプロイ先をそれぞれの環境用へ設定する)
- [開発用kuroco_front.jsonの適用](#開発環境用のkuroco_frontjsonを作成する)


### develop/main用のbuild定義を作成する
本番環境と開発環境用に２つのbuildファイルを作成します。  
今回は下記のファイルを作成します。

- 本番環境用: `.github/workflows/build.yml`
- 開発環境用: `.github/workflows/develop.yml`

`.github/workflows/build.yml`はすでに存在するので、こちらをコピーし`.github/workflows/develop.yml`を作成してください。

### ビルドとデプロイ先をそれぞれの環境用へ設定する
それぞれの環境に適したビルドを行うような動作へ変更修正します。

今回は下記のnpm scriptが動作するように修正します。
- 本番環境用はAPP_ENV=productionを指定
- 開発環境用はAPP_ENV=developmentを指定

まず、本番環境用の`.github/workflows/build.yml`でAPP_ENVをproductionに指定します。  

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

```YAML title=".github/workflows/build.yml"
name: Build and deploy to Kuroco front
on:
  push:
    branches:
      - main
  issue_comment:
    types: [created, edited]
  workflow_dispatch:

env:
  APP_ENV: production

concurrency:
```

次に、開発環境用の`.github/workflows/develop.yml`を修正します。   
Kuroco管理画面より[KurocoFront] -> [GitHub]をクリックし、「GitHub Actions workflow file ステージングサイト」のテキストエリア内をコピーします。  

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

コピーした内容で`.github/workflows/develop.yml`ファイルを上書きします。

次に、`.github/workflows/develop.yml`でAPP_ENVをdevelopmentに指定します。

```YAML title=".github/workflows/develop.yml"
name: Build and deploy to Kuroco front
on:
  push:
    branches:
      - main
  issue_comment:
    types: [created, edited]
  workflow_dispatch:

env:
  APP_ENV: development

concurrency:
```

### Buildファイルのイベントを変更する
次にBuildファイルのイベントを変更します。
下記のように、それぞれのブランチが変更された時にだけイベントが発生するようにします。

- 本番環境：mainブランチが変更された時にのみイベント発生
- 開発環境：developブランチが変更された時のみイベント発生

今回は開発環境用の`.github/workflows/develop.yml`の以下画像の箇所を、下記のように修正します。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/851fc47c4955463e2dd30b2851e6e9c8.png)

```YAML [.github/workflows/develop.yml]
name: Build and deploy to Kuroco front(develop)
on:
  push:
    branches:
      - develop
  issue_comment:
    types: [created, edited]
  workflow_dispatch:

env:
  APP_ENV: development

concurrency:
```

### 開発環境用のkuroco_front.jsonを作成する
次に、開発環境用にkuroco_front.jsonを作成します。
`/public` 配下の`kuroco_front.json`をコピーして、`kuroco_front_dev.json`を作成します。

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

また、`develop.yml`のみに`kuroco_front_dev.json`を適用する必要があります。`develop.yml`に下記を追記します。

```diff
       - name: Checkout Repo
         uses: actions/checkout@v4
         with:
           ref: ${{ steps.get_branch.outputs.branch }}
+      - name: Copy kuroco_front.json
+        run:  cp public/kuroco_front_dev.json public/kuroco_front.json 
       - name: Use Node.js
         uses: actions/setup-node@v4
         with:
```

```diff
     steps:
       - name: Checkout Repo
         uses: actions/checkout@v4
+      - name: Copy kuroco_front.json
+        run:  cp public/kuroco_front_dev.json public/kuroco_front.json 
       - name: Use Node.js
         uses: actions/setup-node@v4
         with:
```

:::tip
kuroco_front.jsonについては、[kuroco_front.jsonとは何ですか？](/ja/docs/faq/what-is-kuroco_front_json/)をご確認ください。
:::

以上で本番環境と開発環境の設定完了です。

## 動作確認
### ファイル構成の確認
それでは、ここまで設定した内容を確認します。  
YAMLファイルとkuroco_front.jsonは本番環境用、開発環境用にファイルで分けているので、mainブランチ、developブランチは共に以下のファイル構成になります。  

```
.github\workflows
  - build.yml
  - develop.yml
public
  - kuroco_front_dev.json
  - kuroco_front.json
```

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

### ビルドの確認
それぞれの環境のPushが完了したら、GitHubの当該リポジトリにアクセスし、「Actions」をクリックします。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/247b06ff22179debabff76c01f2cb753.png)

動作中/動作終了したActions一覧が表示されます。  
![Image from Gyazo](https://t.gyazo.com/teams/diverta/71c92f92e53e12f2a049c11055a57f7a.png)

ビルドが完了後、開発環境のMETA TITLEを確認いただくと、**[開発] Nuxt Auth** と表示されていることが確認できます。

以上で確認完了です。
