웹 배포

웹 배포 (Web deployment)

Dart 웹 앱을 배포하는 방법은 다른 웹 앱을 배포하는 것과 크게 다르지 않아요. 이 페이지에서는 앱을 컴파일하는 방법, 앱을 더 작고 빠르게 만드는 팁, 그리고 앱을 서빙하기 위한 리소스를 안내해 드릴게요.

출처: Web deployment

본문

앱 빌드하기

webdev 도구로 앱을 빌드해요. 이 도구가 Dart를 JavaScript로 컴파일하고, 배포에 필요한 모든 에셋을 생성해 줘요. 컴파일러의 프로덕션 모드로 빌드하면 tree shaking 지원 덕분에 상당히 작은 JavaScript 파일을 얻을 수 있어요.

조금만 더 신경 쓰면 배포하는 앱을 더 작고, 빠르고, 더 안정적으로 만들 수 있어요.

webdev로 컴파일하기

webdev build 명령으로 앱의 배포 가능한 버전을 만들어요. 이 명령은 코드를 JavaScript로 변환해서 결과물을 build/web/main.dart.js로 저장해요. webdev build와 함께 dart compile js에 있는 어떤 옵션이든 사용할 수 있어요.

앱을 더 작고, 빠르고, 안정적으로 만들기

다음 단계들은 선택 사항이에요. 앱을 더 안정적이고 반응적으로 만드는 데 도움이 돼요.

  • 지연 로딩(deferred loading)을 사용해 앱의 초기 크기를 줄이기
  • 웹 앱의 모범 사례(best practices) 따르기
  • 소스 맵과 불필요한 빌드 파일 관리하기
지연 로딩으로 앱의 초기 크기 줄이기

Dart의 지연 로딩 지원을 사용하면 앱의 초기 다운로드 크기를 줄일 수 있어요. 자세한 내용은 언어 투어에서 지연 로딩을 다루는 부분을 참고해 주세요.

웹 앱의 모범 사례 따르기

웹 앱에 대한 일반적인 조언이 Dart 웹 앱에도 그대로 적용돼요. 몇 가지 리소스를 소개할게요.

  • 빠른 로드 시간
  • Web Fundamentals(특히 Optimizing Content Efficiency)
  • Progressive Web Apps
  • Lighthouse
소스 맵과 불필요한 빌드 파일 관리하기

기본적으로 Dart 웹 컴파일러(dart compile js와 dart compile wasm)는 컴파일 결과물 옆에 소스 맵 파일(.js.map과 .wasm.map)을 생성해요. 소스 맵은 디버깅에 유용하지만, 공개 웹 서버에 두면 민감한 정보를 노출할 수 있어요.

  • minify되지 않은 심볼과 구조: 소스 맵을 사용하면 브라우저 DevTools가 원본 클래스 이름, 함수 이름, 소스 로직을 재구성할 수 있어요.
  • 개발자 파일 경로: 소스 맵에는 빌드 머신의 절대 파일시스템 URI(예: file:///Users/...)가 자주 포함돼요.

경고 — 심볼 이름, 코드 구조, 로컬 빌드 경로를 비공개로 유지하려면 소스 맵 파일을 공개 웹 호스트에 배포하지 마세요.

배포 전략에 따라 소스 맵을 다음 두 가지 방법 중 하나로 처리할 수 있어요.

  • 빌드 시점에 소스 맵 비활성화하기: 프로덕션 디버깅이나 에러 보고에 소스 맵이 필요 없다면 컴파일러에 --no-source-maps 플래그를 전달하세요.
$ dart compile js --no-source-maps -O2 -o build/main.js web/main.dart
$ dart compile wasm --no-source-maps -o build/main.wasm web/main.dart
  • 공개 호스팅에서 map 파일 제외 또는 제거하기: Sentry나 Bugsnag 같은 사설 에러 모니터링 서비스에 소스 맵을 쓴다면, 컴파일 중에는 .map 파일을 유지하고 모니터링 서비스에 직접 업로드하세요. 그리고 공개 웹 서버나 CDN 디렉터리에서는 제외하거나 제거해 주세요.
# From the root directory of your app:
$ find build -type f \( -name "*.js.map" -o -name "*.wasm.map" \) -exec rm {} +

앱 서빙하기

Dart 웹 앱은 다른 웹 앱과 똑같이 서빙할 수 있어요. 이 절에서는 Dart 웹 앱을 서빙하는 팁과, GitHub Pages나 Firebase로 앱을 서빙하는 데 도움이 되는 Dart 관련 리소스를 알려드릴게요.

GitHub Pages

앱이 라우팅을 쓰지 않거나 서버 측 지원이 필요 없다면 GitHub Pages로 앱을 서빙할 수 있어요. peanut 패키지는 어떤 Dart 웹 앱이든 gh-pages 브랜치를 자동으로 만들어 주는 쉬운 방법을 제공해요.

startup_namer 예제는 GitHub Pages로 호스팅되어 있어요. 그 파일들은 filiph/startup_namer 저장소의 gh-pages 브랜치에 있고, peanut으로 빌드되었어요.

Firebase

Firebase로 배포하는 방법에 대해 더 자세히 알고 싶다면 다음 리소스를 참고해 주세요.

  • Firebase Hosting 문서 — Firebase로 웹 앱을 배포하는 방법을 설명해요.
  • Firebase Hosting 문서의 Configure Hosting Behavior — 리다이렉트, 리라이트 등을 다뤄요.

더 알아보기