Angular Environment Configuration: จัดการ Config หลาย Environment

ทำไมต้องมี Environment Config

ในการพัฒนา app จริง เรามักมีหลาย environment เช่น development, staging, production ซึ่งแต่ละอันมี API URL และ config ต่างกัน

โครงสร้างไฟล์

src/
  environments/
    environment.ts          # development
    environment.staging.ts  # staging
    environment.prod.ts     # production

สร้าง Environment Files

// environment.ts
export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000/api',
  appName: 'MyApp (Dev)',
  logLevel: 'debug'
};

// environment.prod.ts
export const environment = {
  production: true,
  apiUrl: 'https://api.myapp.com',
  appName: 'MyApp',
  logLevel: 'error'
};

ตั้งค่าใน angular.json

"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ]
  }
}

ใช้งาน

import { environment } from '../environments/environment';

@Injectable({ providedIn: 'root' })
export class ApiService {
  private baseUrl = environment.apiUrl;

  getUsers() {
    return this.http.get(`${this.baseUrl}/users`);
  }
}

Build แต่ละ Environment

ng build                    # development
ng build --configuration=production  # production
ng build --configuration=staging     # staging

Cloudflare Workers / Hono

ถ้าใช้ Cloudflare Workers ให้ใช้ c.env แทน environment file

const apiUrl = c.env.API_URL;

สรุป

การแยก environment config ช่วยให้ deploy ได้ง่ายและปลอดภัย ไม่ต้องแก้โค้ดทุกครั้งที่ deploy ครับ