会員制サンプルサイトで、開発環境と本番環境を分ける方法
概要
本チュートリアルでは、開発環境と本番環境を分ける対応方法を学べます。
開発環境と本番環境を分けることにより、変更や修正があった場合に本番サイトへの変更を公開する前に確認できます。
学べること
以下の流れで開発環境と本番環境を分けていきます。
前提条件
本チュートリアルは、オープンソースで公開している会員制サンプルサイト(NuxtAuthベースのKurocoFrontテンプレートサイト)をコピーしてサイトを構築をしていることが必要となります。
まだサイト構築していない場合は、会員制サンプルサイトをコピーして、Kurocoで会員制サイトを構築する方法を参考に構築をお願いします。
また、今回は下記2種類の環境を用意することを前提としており、 開発する際の確認順序として、開発環境 -> 本番環境と段階的に確認/公開していく手順を想定しています。
- 開発環境
- 本番環境
GitHubにはそれぞれの環境に対応するブランチを作成し、それぞれのブランチが変更される度にGitHub Actionsが動作します。
それでは、自動でその対応する環境のフロントエンドが変更されるフローを設定していきます。
独自ドメインの設定
KurocoFrontで独自ドメインを利用する手順を参考に独自ドメインを設定してください。
また、今回はフロントドメイン
とAPIドメイン
はサブドメイン関係(ドメインが一致する/ファーストパーティcookieとなる状態)に変更してください。
会員制サンプルサイトが利用しているCookieログイン方式においては、サードパーティcookie制限によりブラウザ/利用環境によってはcookieを維持できない可能性があるためです。
参考:セキュリティ設定:Cookie で記事データを表示する
GitHubの設定
今回GitHubのリポジトリを上記2つのブランチに分ける必要があります。 下記のようにブランチを作成してください。
項目 | ブランチ |
---|---|
本番環境 | main |
開発環境 | develop |
ブランチの分け方は、GitHub公式ドキュメントを参照してください。
想定外の本番環境への公開を防ぐために、mainブランチにはプロテクションをかけることをお勧めします。ブランチの保護の方法は、GitHub公式ドキュメントを参照してください。
envファイルの確認・修正
まずは現在のenvファイルの確認・修正します。
開発環境/本番環境の./env.${environment}.js
ファイルは下記のようにすでに存在しています。
env.development.js
env.production.js
これを作成したKurocoの環境ごとに変更します。 今回は下記のように修正しました。
module.exports = {
META_TITLE: 'Nuxt Auth',
ROBOTS: 'index',
BASE_URL: 'https://[独自APIドメイン]'
};
module.exports = {
META_TITLE: '[開発] Nuxt Auth',
ROBOTS: 'noindex',
BASE_URL: 'https://[独自APIドメイン]'
};
独自APIドメインは、独自ドメインの設定で設定した内容を記載してください。
このように変更することで、下記が動的に変更されます。
- 本番環境のMETA TITLE:Nuxt Auth
- 開発環境のMETA TITLE: [開発] Nuxt Auth
npm scriptの確認
次に、npm scriptを確認します。npm scriptとはNode.jsが実行する簡易コマンドです。
NuxtAuthにおいては、package.jsonにあらかじめその内容が記載されています。
package.jsonを抜粋すると、下記のように設定されています。
{
...,
"scripts": {
...
"build": "cross-env NODE_ENV=development nuxt build",
"generate": "cross-env NODE_ENV=development nuxt generate",
"build-prod": "cross-env NODE_ENV=production nuxt build",
"generate-prod": "cross-env NODE_ENV=production nuxt generate",
...
},
...
}
現在build
とbuild-prod
ではNODE_ENV=...
の値が異なっています。
コマンド | 値 | 用途 |
---|---|---|
build | cross-env NODE_ENV=development nuxt build | 開発環境用のbuildコマンド |
generate | cross-env NODE_ENV=development nuxt generate | 開発環境用のgenerateコマンド |
build-prod | cross-env NODE_ENV=production nuxt build | 本番環境用のbuildコマンド |
generate-prod | cross-env NODE_ENV=production nuxt generate | 本番環境用のgeneretaコマンド |
ここの値はnuxtをビルドするときの設定ファイルであるnuxt.config.js
に影響してます。
nuxt.config.js
を確認すると、下記のように記載があります。
const environment = process.env.NODE_ENV; // <- (※1)
const envSettings = require(`./env.${environment}.js`);
export default {
env: envSettings,
...
head: {
htmlAttrs: {
lang: 'ja'
},
titleTemplate: '%s - ',
title: envSettings.META_TITLE, // <- (※2)
...
(※1)の箇所で、上述していたNODE_ENV=...
が指定されるので、npm scriptの違いで下記のように、動的に変更されます。
build
の場合はrequire('./env.develop.js')
build-prod
の場合はrequire('./env.production.js')
例えば(※2)のMETAタイトルの値が、それぞれのenv.${environment}.js
ファイルから設定される仕組みになっています。
GitHubActions用Buildファイルの修正
既存の/.github/workflow/build.yml
を修正し、develop/mainブランチでそれぞれ想定した動作をするように修正します。
下記を修正します。
develop/main用のbuild定義を作成する
本番環境と開発環境用に2つのbuildファイルを作成します。
今回は下記のファイルを作成します。
- 本番環境用:
.github/workflows/build.yml
- 開発環境用:
.github/workflows/develop.yml
.github/workflows/build.yml
はすでに存在するので、こちらをコピーし.github/workflows/develop.yml
を作成してください。
ビルドとデプロイ先をそれぞれの環境用へ設定する
それぞれの環境に適したビルドを行うような動作へ変更修正します。
今回は下記のnpm scriptが動作するように修正します。
- 本番環境用は
build-prod
およびgenerate-prod
- 開発環境用は
build
およびgenerate
まず、本番環境用の.github/workflows/build.yml
のrun: npm run build
、run: npm run generate
の箇所を、run: npm run build-prod
、run: npm run generate-prod
に修正します。(2箇所ずつあります。)
- name: Install dependencies
run: npm ci
- name: Build
run: npm run build-prod
- name: Generate
run: npm run generate-prod
- name: Archive Production Artifact
uses: actions/upload-artifact@v2
with:
次に、開発環境用の.github/workflows/develop.yml
を修正します。
Kuroco管理画面より[KurocoFront] -> [GitHub]をクリックし、「GitHub Actions workflow file ステージングサイト」のテキストエリア内をコピーします。
コピーした内容で.github/workflows/develop.yml
ファイルを上書きします。
Buildファイルのイベントを変更する
次にBuildファイルのイベントを変更します。 下記のように、それぞれのブランチが変更された時にだけイベントが発生するようにします。
- 本番環境:mainブランチが変更された時にのみイベント発生
- 開発環境:developブランチが変更された時のみイベント発生
今回は開発環境用の.github/workflows/develop.yml
の以下画像の箇所を、下記のように修正します。
on:
push:
branches:
- develop
workflow_dispatch:
jobs:
build:
name: Build
開発環境用のkuroco_front.jsonを作成する
次に、開発環境用にkuroco_front.jsonを作成します。
/src/static
配下のkuroco_front.json
をコピーして、kuroco_front_dev.json
を作成します。
また、develop.yml
のみにkuroco_front_dev.json
を適用する必要があります。develop.yml
に下記を追記します。
- name: Checkout Repo
uses: actions/checkout@v2
with:
ref: ${{ steps.get_branch.outputs.branch }}
+ - name: Copy kuroco_front.json
+ run: cp src/static/kuroco_front_dev.json src/static/kuroco_front.json
- name: Use Node.js
uses: actions/setup-node@v2
with:
steps:
- name: Checkout Repo
uses: actions/checkout@v2
+ - name: Copy kuroco_front.json
+ run: cp src/static/kuroco_front_dev.json src/static/kuroco_front.json
- name: Use Node.js
uses: actions/setup-node@v2
with:
kuroco_front.jsonについては、kuroco_front.jsonとは何ですか?をご確認ください。
以上で本番環境と開発環境の設定完了です。
動作確認
ファイル構成の確認
それでは、ここまで設定した内容を確認します。
YAMLファイルとkuroco_front.jsonは本番環境用、開発環境用にファイルで分けているので、mainブランチ、developブランチは共に以下のファイル構成になります。
.github\workflows
- build.yml
- develop.yml
src
- static
- kuroco_front_dev.json
- kuroco_front.json
ビルドの確認
それぞれの環境のPushが完了したら、GitHubの当該リポジトリにアクセスし、「Actions」をクリックします。
動作中/動作終了したActions一覧が表示されます。
ビルドが完了後、開発環境のMETA TITLEを確認いただくと、[開発] Nuxt Auth と表示されていることが確認できます。
以上で確認完了です。
サポート
お探しのページは見つかりましたか?解決しない場合は、問い合わせフォームからお問い合わせいただくか、Slackコミュニティにご参加ください。