Configuration

SCF uses scf.config.ts for configuration.

Basic Structure

typescript
import { defineConfig } from 'scf-deploy';

export default defineConfig({
  app: 'my-site',           // Required
  region: 'ap-northeast-2', // Required
  s3: { ... },              // S3 settings
  cloudfront: { ... },      // CloudFront settings
  environments: { ... },    // Environment overrides
});

Required Options

OptionTypeDescription
appstringApplication name (lowercase, hyphens)
regionstringAWS region

S3 Options

OptionTypeDefaultDescription
bucketNamestring-Required. S3 bucket name (globally unique)
buildDirstringautoBuild directory (auto-detects: dist, build, out)
indexDocumentstringindex.htmlIndex document
errorDocumentstring-Error document
excludestring[][]Files to exclude
websiteHostingbooleantrueEnable static website hosting
concurrencynumber10Max concurrent uploads
gzipbooleantrueEnable Gzip compression
typescript
s3: {
  bucketName: 'my-site-bucket-abc123',
  buildDir: './dist',
  exclude: ['*.map', '.DS_Store'],
}

CloudFront Options

OptionTypeDefaultDescription
enabledboolean-Enable CloudFront
priceClassstringPriceClass_100Edge location coverage
ipv6booleantrueEnable IPv6
spabooleantrueSPA mode (redirects 403/404 to index.html)
customDomainobject-Custom domain settings
cacheWarmingobject-Cache warming settings
errorPagesarray-Custom error pages

Cache Policy (v2.0.0+)

SCF uses AWS Managed Cache Policy (CachingOptimized) for optimal performance. TTL settings are managed automatically by AWS.

Automatic TTL Values:

SettingValue
MinTTL1 second
DefaultTTL86400 seconds (1 day)
MaxTTL31536000 seconds (1 year)

💡 Tip: Manual TTL configuration is no longer needed. AWS automatically manages cache behavior for optimal performance.

Price Classes

ValueCoverage
PriceClass_100North America, Europe (cheapest)
PriceClass_200+ Asia, Middle East, Africa
PriceClass_AllAll locations (best performance)
typescript
cloudfront: {
  enabled: true,
  priceClass: 'PriceClass_100',
}

Custom Domain

typescript
cloudfront: {
  enabled: true,
  customDomain: {
    domainName: 'www.example.com',
    // certificateArn is optional - auto-created with Route53
    aliases: ['example.com'],
  },
}

SPA Mode

SPA (Single Page Application) mode is enabled by default. When enabled, CloudFront automatically redirects 403/404 errors to index.html, allowing client-side routing (React Router, Vue Router, etc.) to work properly.

typescript
cloudfront: {
  enabled: true,
  spa: true, // Default: true (no configuration needed)
}

To disable SPA mode:

typescript
cloudfront: {
  enabled: true,
  spa: false, // Disable SPA mode
}

Custom Error Pages

When spa: true (default), SPA works without any errorPages configuration. For more granular error page control, you can configure errorPages directly:

typescript
cloudfront: {
  enabled: true,
  spa: false, // Disable SPA mode when using custom error pages
  errorPages: [
    {
      errorCode: 404,
      responseCode: 200,
      responsePath: '/index.html',
      cacheTTL: 300, // Cache error response for 5 minutes
    },
    {
      errorCode: 403,
      responseCode: 200,
      responsePath: '/index.html',
    },
  ],
}

Cache Warming

typescript
cloudfront: {
  enabled: true,
  cacheWarming: {
    enabled: true,
    paths: ['/', '/about'],
    concurrency: 3,
    delay: 500, // Delay between requests (ms)
  },
}

Multi-Environment

typescript
export default defineConfig({
  app: 'my-site',
  region: 'ap-northeast-2',

  s3: {
    bucketName: 'my-site-dev',
  },

  cloudfront: {
    enabled: true,
  },

  environments: {
    dev: {
      cloudfront: { enabled: false },
    },
    prod: {
      s3: { bucketName: 'my-site-prod' },
      cloudfront: { priceClass: 'PriceClass_All' },
    },
  },
});

Deploy with environment:

bash
npx scf-deploy deploy --env prod

Complete Example

typescript
import { defineConfig } from 'scf-deploy';

export default defineConfig({
  app: 'my-site',
  region: 'ap-northeast-2',

  s3: {
    bucketName: 'my-site-bucket-abc123',
    exclude: ['*.map'],
  },

  cloudfront: {
    enabled: true,
    priceClass: 'PriceClass_100',
    errorPages: [
      { errorCode: 404, responseCode: 200, responsePath: '/index.html' },
    ],
  },

  environments: {
    prod: {
      s3: { bucketName: 'my-site-prod' },
      cloudfront: {
        priceClass: 'PriceClass_All',
        customDomain: {
          domainName: 'www.example.com',
        },
      },
    },
  },
});

Migration from v1.x

v2.0.0 Breaking Changes

If you're upgrading from v1.x, remove the following TTL options from your scf.config.ts:

typescript
// Before (v1.x) - These options are no longer supported
cloudfront: {
  enabled: true,
  defaultTTL: 3600,     // ❌ Remove
  maxTTL: 86400,        // ❌ Remove
  minTTL: 0,            // ❌ Remove
}

// After (v2.0.0)
cloudfront: {
  enabled: true,
  // TTL is now managed automatically by AWS Managed Cache Policy
}

⚠️ Note: If you keep TTL settings in your config, they will be ignored in v2.0.0+. The AWS Managed Cache Policy (CachingOptimized) provides optimal caching behavior automatically.

5 min readLast updated: 2025-11-28