はじめに
こんにちは、Gakken LEAP のバックエンドエンジニアの mizuno です。
今回、Nuxtで構築されたSPAのGitHub Actions設定をリファクタリングする機会がありました。
現在のプロジェクトのNuxtでは環境ごとの各変数をファイルに1つずつ書き出していたため、以下の課題がありました。
- 環境変数が増えるたびにGitHub Actionsの修正
- 設定値の一元管理ができない
本記事では、GitHub ActionsとNuxtのruntimeConfigを活用して、これらの課題を解決する方法を紹介します。
解決方法
1. Nuxt設定ファイルの準備
まず、nuxt.config.tsで環境変数を読み込む設定を行います。
nuxt.config.ts
export default defineNuxtConfig({
// 環境変数の設定
runtimeConfig: {
public: {
apiBase: process.env.NUXT_PUBLIC_API_BASE,
appName: process.env.NUXT_PUBLIC_APP_NAME,
environment: process.env.NODE_ENV
}
}
})
2. 環境変数ファイルの作成
開発環境用の.envファイルを作成します。
.env
NUXT_PUBLIC_API_BASE=http://localhost
NUXT_PUBLIC_APP_NAME=My Development App
NODE_ENV=development
3. GitHub Actionsワークフローの設定
GitHub Actionsのワークフローでは、buildステップのenvに環境変数を設定します。
ここに設定された値がビルド時にNuxtアプリケーションに注入され、本番環境用の設定として利用されます。
- name: Setup Node.js
uses: actions/setup-node@v4
with:
node-version: '22'
- name: Install dependencies
run: npm ci
- name: Build
run: npx nuxt generate
env:
NUXT_PUBLIC_API_BASE: ${{ vars.NUXT_PUBLIC_API_BASE }}
NUXT_PUBLIC_APP_NAME: ${{ vars.NUXT_PUBLIC_APP_NAME }}
NODE_ENV: production
- name: Deploy
# デプロイ処理
run: |
echo "Deploying to production..."
4. アプリケーションでの環境変数の使用
コンポーネントやプラグインで環境変数を使用する方法：
components/AppHeader.vue
<template>
<header>
<h1>{{ appName }}</h1>
<p>Environment: {{ environment }}</p>
</header>
</template>
<script setup>
const config = useRuntimeConfig()
const appName = config.public.appName
const environment = config.public.environment
</script>
composables/useApi.ts
export const useApi = () => {
const config = useRuntimeConfig()
const apiCall = async (endpoint: string) => {
const response = await fetch(`${config.public.apiBase}${endpoint}`)
return response.json()
}
return {
apiCall
}
}
GitHub Variablesの設定
- GitHubリポジトリの「Settings」→「Secrets and variables」→「Actions」へ移動
- 以下のVariablesを追加：
-
NUXT_PUBLIC_API_BASE: 本番環境のAPIベースURL -
NUXT_PUBLIC_APP_NAME: 本番環境のアプリ名
-
ポイントと注意事項
- SPAでは全てがクライアントサイドで実行されるため、秘匿情報は環境変数に含めないよう注意が必要です。
- 環境変数はビルド時に注入されるため、ランタイムでの変更はできません。
まとめ
NuxtのSPAでの環境変数の扱いは、Next.jsと似ている部分もありますが、runtimeConfigを使用する点やuseRuntimeConfig()でアクセスする点が異なります。
SPAでは全てがクライアントサイドで動作するため、セキュリティに注意しながら環境変数を設定することが重要です。
GitHub Actionsとの組み合わせにより、環境ごとに異なる設定を適用できるようになり、効率的なデプロイが可能になりました。
エンジニア募集中
Gakken LEAP では教育をアップデートしていきたいエンジニアを絶賛大募集しています！！
ぜひお気軽にカジュアル面談へお越しください！！