0Pricing
Frontend Academy · レッスン

CIでの環境変数

GitHub Secretsにシークレットを保存し、環境変数としてビルドに注入して、Viteではimport.meta.env、Next.jsではprocess.envからアクセスします。

「CIでの環境変数」はCoddyKit上の無料Frontend Academyレッスンです。 これはレッスン3/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはFrontend Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Frontend Academyコースには全4レッスンが含まれています。

環境を分ける理由

アプリでは、環境ごとに異なる値が必要です。たとえば、開発用API URL、ステージング用API URL、本番用API URLなどです。さらに、リポジトリに決して含めてはいけないシークレット（APIキーやトークン）もあります。環境変数は、これらを注入する標準的な方法です。

公開用とサーバー専用

バンドルに埋め込まれるフロントエンド変数は公開情報であり、DevToolsを使えば誰でも確認できます。そこにシークレットを入れてはいけません。サーバーサイドの変数（サーバーレス関数、SSR、APIルートで使用するもの）は、本当のシークレットとして扱えます。

Viteの環境変数

Viteでは、VITE_を接頭辞とする変数がimport.meta.envを通じてクライアントコードに公開されます。

# .env
VITE_API_URL=https://api.example.com
VITE_FEATURE_FLAGS={"newOnboarding":true}

# In code:
const apiUrl = import.meta.env.VITE_API_URL;

# DEV_ONLY or NEVER PREFIXED vars are NOT exposed:
SECRET_KEY=xxx  # not accessible to client code

Next.jsの環境変数

Nextでは、公開変数にNEXT_PUBLIC_という接頭辞を付けます。サーバー専用の変数には接頭辞を付けません（Route HandlersやgetServerSidePropsで使用します）。

# .env.local
NEXT_PUBLIC_API_URL=https://api.example.com  # client-accessible
DATABASE_URL=postgres://...                  # server-only

# Client:
const url = process.env.NEXT_PUBLIC_API_URL;

# Server (API route):
const db = process.env.DATABASE_URL;

ローカルの.envファイル

個人用の上書き設定には.env.localを、環境ごとのデフォルト値には.env.developmentや.env.productionを使用します。.env.localを.gitignoreに追加し、シークレットを決してコミットしないでください。

# .gitignore
.env.local
.env.*.local

# Commit only .env.example with placeholder values:
VITE_API_URL=https://api.example.com
DATABASE_URL=

GitHub Actionsでのシークレット保存

リポジトリのSettings → Secrets and variables → Actionsでシークレットを追加します。secrets.NAMEからアクセスできます。

# .github/workflows/deploy.yml
- name: Deploy
  env:
    VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
    SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
  run: |
    npx vercel --token $VERCEL_TOKEN --prod
    npx sentry-cli releases new $RELEASE

環境ごとのシークレット

GitHub Environments（Settings → Environments）を使うと、シークレットを特定の環境（staging、production）に限定できます。必要に応じて承認ゲートも設定できます。

# Job that requires environment:
deploy-prod:
  environment: production   # requires reviewer approval if configured
  steps:
    - run: deploy
      env:
        DB_URL: ${{ secrets.DB_URL }}  # only prod's DB_URL is exposed

ホスティングプロバイダーの環境変数

Vercel、Netlify、Cloudflareはいずれも、ビルド時と実行時に環境変数を利用できます。ダッシュボードまたはCLIで設定します。

# Vercel:
vercel env add VITE_API_URL production
vercel env add VITE_API_URL preview

# Netlify:
netlify env:set VITE_API_URL https://api.example.com

# Cloudflare Pages:
wrangler pages secret put API_URL

フロントエンドのバンドルにシークレットをハードコードしない

クライアントJavaScriptに含まれる値は、すべて公開情報です。サードパーティSDK用のAPIキー（Stripeの公開可能キー、Algoliaの検索キーなど）は、公開されることを前提に設計されています。それ以外のもの（サーバー用APIキー）はバックエンドに置く必要があります。

ビルド時の環境変数検証

zodやenvalidを使って、必須の環境変数が不足している場合にビルドを失敗させます。

// env.ts
import { z } from 'zod';

const envSchema = z.object({
  VITE_API_URL: z.string().url(),
  VITE_SENTRY_DSN: z.string().url().optional()
});

export const env = envSchema.parse(import.meta.env);
// Throws helpful error if VITE_API_URL is missing

ビルド時と実行時

ビルド時の環境変数はバンドルに埋め込まれるため、変更するには再ビルドが必要です。実行時の環境変数（NextのAPIルート、Netlify Functions、Cloudflare Workers）は、リクエストごとに評価されます。再デプロイせずに値を変更する必要があるかどうかに応じて選択します。

シークレットのローテーション

シークレットは定期的（90日ごと）に、またチームに変更があった場合にも更新します。1Password Secrets Automation、AWS Secrets Managerなどを使うと、手動で更新しなくてもCI内のシークレットを常に最新に保てます。

よくある落とし穴

1）実際のシークレットを含む.envをコミットする — 防止にはgit-secretsを使用します。2）サーバー用の変数をクライアントに公開する（接頭辞の誤り）。3）プレビューデプロイで環境変数を設定し忘れる。4）同じ環境でテスト用キーと本番用キーを混在させる。

クイックチェック

Viteでクライアントに公開する環境変数にVITE_という接頭辞が必要なのはなぜですか？

まとめ：CIの環境変数

公開変数：接頭辞（VITE_、NEXT_PUBLIC_）が付き、バンドルに埋め込まれ、ユーザーから見える状態になります。サーバー専用の変数：接頭辞がなく、APIルートやSSRで使用します。.env.localは.gitignoreに追加し、.env.exampleはコミットします。CIにはGitHub Secretsを、本番環境の限定にはGitHub Environmentsを使用します。ホスティングプロバイダー（Vercel、Netlify、Cloudflare）では、環境ごとに変数を設定できます。ビルド時にzodで検証します。

よくある質問

「CIでの環境変数」レッスンは無料ですか？

はい。「CIでの環境変数」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Frontend Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Frontend Academyコースには全4レッスンが含まれています。

「CIでの環境変数」で何を学びますか？

GitHub Secretsにシークレットを保存し、環境変数としてビルドに注入して、Viteではimport.meta.env、Next.jsではprocess.envからアクセスします。 ブラウザで直接実行するハンズオンコードでFrontend Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Frontend Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのFrontend Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/4です。

「CIでの環境変数」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このFrontend Academyレッスンでコードを書いて実行できますか？

はい。すべてのFrontend Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. フロントエンド向けGitHub Actions：lint・test・build
  2. Vercel・Netlify・Cloudflare Pagesへのデプロイ
  3. CIでの環境変数
  4. Lighthouseの自動チェック
← Frontend Academyに戻る