Rorkアプリの環境変数が読み込めない原因と解決法 — .envファイルとEAS Secrets設定エラーの対処法

# プロジェクトルートにいることを確認
ls -la .env*
 
# .env ファイルの内容を確認
cat .env

# ✅ 正しい形式（クライアント側で使う変数）
EXPO_PUBLIC_API_URL=https://api.example.com
EXPO_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
EXPO_PUBLIC_SUPABASE_ANON_KEY=your_anon_key_here
 
# ✅ 正しい形式（サーバー側・ビルド時のみ使う変数）
SENTRY_AUTH_TOKEN=your_sentry_token
EAS_PROJECT_ID=your_project_id

# ❌ 間違い: EXPO_PUBLIC_ プレフィックスがない
API_URL=https://api.example.com
SUPABASE_URL=https://your-project.supabase.co
 
# ❌ 間違い: 値をクォーテーションで囲んでいる
EXPO_PUBLIC_API_URL="https://api.example.com"
 
# ❌ 間違い: スペースが含まれている
EXPO_PUBLIC_API_URL = https://api.example.com

// ✅ 正しい参照方法
const apiUrl = process.env.EXPO_PUBLIC_API_URL;
const supabaseUrl = process.env.EXPO_PUBLIC_SUPABASE_URL;
 
// デバッグ用: 値が正しく読み込まれているか確認
console.log('API URL:', process.env.EXPO_PUBLIC_API_URL);
console.log('Supabase URL:', process.env.EXPO_PUBLIC_SUPABASE_URL);

// ⚠️ 旧方式（非推奨だが動作する）
import Constants from 'expo-constants';
const apiUrl = Constants.expoConfig?.extra?.apiUrl;
 
// ✅ 新方式（推奨）
const apiUrl = process.env.EXPO_PUBLIC_API_URL;

# Metro キャッシュをクリアして再起動
npx expo start --clear
 
# より徹底的にクリアする場合
rm -rf node_modules/.cache
npx expo start --clear

{
  "build": {
    "development": {
      "env": {
        "EXPO_PUBLIC_API_URL": "https://dev-api.example.com",
        "EXPO_PUBLIC_SUPABASE_URL": "https://your-project.supabase.co"
      }
    },
    "preview": {
      "env": {
        "EXPO_PUBLIC_API_URL": "https://staging-api.example.com",
        "EXPO_PUBLIC_SUPABASE_URL": "https://your-project.supabase.co"
      }
    },
    "production": {
      "env": {
        "EXPO_PUBLIC_API_URL": "https://api.example.com",
        "EXPO_PUBLIC_SUPABASE_URL": "https://your-project.supabase.co"
      }
    }
  }
}

# ✅ 現行方式: EAS 環境変数（環境ごとに登録）
eas env:create --name EXPO_PUBLIC_SUPABASE_URL \
  --value "https://your-project.supabase.co" \
  --environment production --visibility plaintext
 
# 機密値は visibility を secret にする（登録後は値を読み出せない）
eas env:create --name SENTRY_AUTH_TOKEN \
  --value "your_sentry_token" \
  --environment production --visibility secret
 
# 登録済みの環境変数一覧を確認
eas env:list --environment production
 
# 開発環境の変数をローカルの .env.local に取得（plaintext のみ）
eas env:pull --environment development

// app/debug-env.tsx（デバッグ用一時ファイル）
import { View, Text, ScrollView } from 'react-native';
 
export default function DebugEnvScreen() {
  const envVars = {
    API_URL: process.env.EXPO_PUBLIC_API_URL,
    SUPABASE_URL: process.env.EXPO_PUBLIC_SUPABASE_URL,
    SUPABASE_ANON_KEY: process.env.EXPO_PUBLIC_SUPABASE_ANON_KEY
      ? '✅ Set (hidden)'
      : '❌ Not set',
  };
 
  return (
    <ScrollView style={{ padding: 20 }}>
      <Text style={{ fontSize: 20, fontWeight: 'bold', marginBottom: 16 }}>
        Environment Variables Debug
      </Text>
      {Object.entries(envVars).map(([key, value]) => (
        <View key={key} style={{ marginBottom: 12 }}>
          <Text style={{ fontWeight: 'bold' }}>{key}</Text>
          <Text style={{ color: value ? '#22c55e' : '#ef4444' }}>
            {value || 'undefined ❌'}
          </Text>
        </View>
      ))}
    </ScrollView>
  );
}

# .env.example（値は空またはダミー）
EXPO_PUBLIC_API_URL=
EXPO_PUBLIC_SUPABASE_URL=
EXPO_PUBLIC_SUPABASE_ANON_KEY=

# .gitignore
.env
.env.local
.env.production

// utils/env.ts
function getEnvVar(key: string): string {
  const value = process.env[key];
  if (!value) {
    console.warn(`⚠️ Environment variable ${key} is not set`);
  }
  return value ?? '';
}
 
export const ENV = {
  API_URL: getEnvVar('EXPO_PUBLIC_API_URL'),
  SUPABASE_URL: getEnvVar('EXPO_PUBLIC_SUPABASE_URL'),
  SUPABASE_ANON_KEY: getEnvVar('EXPO_PUBLIC_SUPABASE_ANON_KEY'),
} as const;