실전

Web 배포

Flutter Web 앱을 빌드하고 URL 전략, 초기화, 렌더러, 호스팅을 점검합니다.

핵심 개념

Web 배포 주요 항목

웹 빌드

flutter build web은 정적 파일을 build/web에 생성합니다.

언제 쓰나: 라우팅을 사용하는 앱은 새로고침 시 404가 나지 않도록 호스팅 fallback을 설정해야 합니다.

Flutter에서: 웹에서는 초기 로딩 크기, 이미지 최적화, 캐시 정책이 사용자 경험에 큰 영향을 줍니다.

flutter build web --release

Container(
  padding: const EdgeInsets.all(20),
  decoration: BoxDecoration(
    color: Colors.white,
    border: Border.all(color: const Color(0xFFDCE6EF)),
    borderRadius: BorderRadius.circular(8),
  ),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Container(
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
      decoration: BoxDecoration(
        color: const Color(0xFFEEF7FB),
        borderRadius: BorderRadius.circular(8),
      ),
      child: const Text(
        '실행 출력',
        style: TextStyle(fontSize: 20, fontWeight: FontWeight.w900),
      ),
    ),
      Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('$ flutter build web --release
Compiled build/web for the Web.')
      ],
    )
    ],
  ),
)

웹 특화 고려

URL strategy를 설정하면 hash 방식과 path 방식 중 선택할 수 있습니다.

언제 쓰나: 웹 렌더러와 WebAssembly 관련 설정은 앱 성격과 브라우저 지원 범위를 고려해 결정합니다.

Flutter에서: SEO가 중요한 문서 사이트는 정적 HTML 구조와 메타데이터도 함께 관리해야 합니다.

Card(
  child: Padding(
    padding: const EdgeInsets.all(16),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: const [
        Text('웹 특화 고려', style: TextStyle(fontWeight: FontWeight.bold)),
        SizedBox(height: 8),
        Text('URL strategy를 설정하면 hash 방식과 path 방식 중 선택할 수 있습니다.'),
      ],
    ),
  ),
)

Container(
  padding: const EdgeInsets.all(20),
  decoration: BoxDecoration(
    color: Colors.white,
    border: Border.all(color: const Color(0xFFDCE6EF)),
    borderRadius: BorderRadius.circular(8),
  ),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Container(
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
      decoration: BoxDecoration(
        color: const Color(0xFFEEF7FB),
        borderRadius: BorderRadius.circular(8),
      ),
      child: const Text(
        '웹 특화 고려',
        style: TextStyle(fontSize: 20, fontWeight: FontWeight.w900),
      ),
    )
    ],
  ),
)

확장 개념

Web 릴리스 점검

flutter build web --release로 정적 호스팅 가능한 산출물을 만듭니다.
URL 전략, base href, 캐시 정책은 배포 환경과 라우팅 방식에 맞춰 조정합니다.
CanvasKit, HTML 렌더러, WebAssembly 같은 선택지는 성능과 호환성을 함께 보고 결정합니다.

코드

예제

flutter build web --release

Container(
  padding: const EdgeInsets.all(20),
  decoration: BoxDecoration(
    color: Colors.white,
    border: Border.all(color: const Color(0xFFDCE6EF)),
    borderRadius: BorderRadius.circular(8),
  ),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Container(
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
      decoration: BoxDecoration(
        color: const Color(0xFFEEF7FB),
        borderRadius: BorderRadius.circular(8),
      ),
      child: const Text(
        '실행 출력',
        style: TextStyle(fontSize: 20, fontWeight: FontWeight.w900),
      ),
    ),
      Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('$ flutter build web --release
Compiled build/web for the Web.')
      ],
    )
    ],
  ),
)

다음 단계

실습 체크리스트

flutter build web 실행URL strategy 결정fallback 설정캐시 정책 확인

출처세부 기준과 최신 변경 사항을 확인할 수 있습니다.
Flutter API Reference클래스, 메서드, 생성자 세부 정의를 확인합니다.
Flutter deployment플랫폼별 출시 문서의 출발점입니다.