Docker로 Flutter 웹 앱을 구성하는 방법: Docker로 구성된 Flutter 빌드와 Nginx 사용

Docker 컨테이너를 사용하여 Flutter 웹 앱 빌드 및 호스팅

Page content

Flutter 웹 앱을 빌딩하고 호스팅하기 위한 Dockerfile 예시, Ubuntu 기반 Flutter 빌드 이미지 + 웹앱 이미지 Nginx 위에 배포.

docker+flutter 로고

통합 Dockerfile

Flutter 웹 앱을 빌딩하는 일반적인 Dockerfile은 아래와 같을 수 있습니다. 이 Dockerfile은 ubuntu:latest를 기반 빌드 이미지로 사용하여 Flutter를 설치하고 웹앱을 빌딩한 후, 이를 nginx:alpine 이미지로 복사합니다. Nginx 위에서 호스팅되는 웹앱의 최종 이미지는 nginx:alpine의 크기인 48.2MB 덕분에 약 73MB 이상이 됩니다.

FROM ubuntu:latest AS builder

# 의존성 설치
RUN apt-get update && apt-get install -y \
    curl \
    git \
    unzip \
    xz-utils \
    zip \
    libglu1-mesa

# Flutter 설치
RUN git clone https://github.com/flutter/flutter.git /flutter
ENV PATH="/flutter/bin:${PATH}"
RUN flutter doctor
RUN flutter channel stable
RUN flutter upgrade


# 빌드 인수 추가
ARG MY_MEGA_API_URL
ENV MY_MEGA_API_URL=${MY_MEGA_API_URL}


# 앱 소스 복사
WORKDIR /app
COPY . .

# 앱 의존성 설치
RUN flutter pub get

# 기존 빌드 삭제 및 웹용 빌드
RUN flutter clean
RUN flutter build web --release --verbose --dart-define=MY_MEGA_API_URL=${MY_MEGA_API_URL}

# 단계 2 - 최종 이미지 생성: Nginx를 사용하여 정적 파일 제공
FROM nginx:alpine

# 빌더 단계에서 생성한 빌드 복사
COPY --from=builder /app/build/web /usr/share/nginx/html

# Nginx 설정 복사
RUN echo 'server { \
    listen 80; \
    server_name localhost; \
    root /usr/share/nginx/html; \
    index index.html; \
    \
    # 정적 자산을 적절한 MIME 타입으로 처리 \
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot|json)$ { \
        expires 1y; \
        add_header Cache-Control "public, immutable"; \
        try_files $uri =404; \
    } \
    \
    # Flutter 웹 라우팅 처리 \
    location / { \
        try_files $uri $uri/ @fallback; \
    } \
    \
    location @fallback { \
        rewrite ^.*$ /index.html last; \
    } \
    \
    # 보안 헤더 \
    add_header X-Frame-Options "SAMEORIGIN" always; \
    add_header X-Content-Type-Options "nosniff" always; \
    add_header X-XSS-Protection "1; mode=block" always; \
}' > /etc/nginx/conf.d/default.conf

# 포트 노출
EXPOSE 80

# Nginx 시작
CMD ["nginx", "-g", "daemon off;"]

Docker화된 Flutter

여러 Flutter 웹 앱을 작업하고 있다면, 중간 빌드 이미지용 임시 파일이 디스크 공간을 차지하게 됩니다. Flutter 빌드용 단일 이미지를 생성하여 여러 프로젝트에서 재사용하는 것이 좋습니다. 아래의 이미지는 제 PC에서 단 한 번만 사용했을 때 3.47GB를 차지합니다.

다음은 Flutter 빌드 이미지용 간단한 Dockerfile입니다. Dockerfile.flutter 파일로 저장하세요.

FROM ubuntu:latest AS builder

# 의존성 설치
RUN apt-get update && apt-get install -y \
    curl \
    git \
    unzip \
    xz-utils \
    zip \
    libglu1-mesa

# Flutter 설치
RUN git clone https://github.com/flutter/flutter.git /flutter
ENV PATH="/flutter/bin:${PATH}"
RUN flutter doctor
RUN flutter channel stable
RUN flutter upgrade

다음 명령어로 빌드합니다.

docker build -f Dockerfile.flutter -t rg-flutter:1.0 .

간단한 Flutter 웹 앱 Dockerfile

FROM rg-flutter:1.0 AS builder

# 빌드 인수 추가
ARG MY_MEGA_API_URL
ENV MY_MEGA_API_URL=${MY_MEGA_API_URL}


# 앱 소스 복사
WORKDIR /app
COPY . .

# 앱 의존성 설치
RUN flutter pub get

# 기존 빌드 삭제 및 웹용 빌드
RUN flutter clean
RUN flutter build web --release --verbose --dart-define=MY_MEGA_API_URL=${MY_MEGA_API_URL}

# 단계 2 - 최종 이미지 생성: Nginx를 사용하여 정적 파일 제공
FROM nginx:alpine

# 빌더 단계에서 생성한 빌드 복사
COPY --from=builder /app/build/web /usr/share/nginx/html

# Nginx 설정 복사
RUN echo 'server { \
    listen 80; \
    server_name localhost; \
    root /usr/share/nginx/html; \
    index index.html; \
    \
    # 정적 자산을 적절한 MIME 타입으로 처리 \
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot|json)$ { \
        expires 1y; \
        add_header Cache-Control "public, immutable"; \
        try_files $uri =404; \
    } \
    \
    # Flutter 웹 라우팅 처리 \
    location / { \
        try_files $uri $uri/ @fallback; \
    } \
    \
    location @fallback { \
        rewrite ^.*$ /index.html last; \
    } \
    \
    # 보안 헤더 \
    add_header X-Frame-Options "SAMEORIGIN" always; \
    add_header X-Content-Type-Options "nosniff" always; \
    add_header X-XSS-Protection "1; mode=block" always; \
}' > /etc/nginx/conf.d/default.conf

# 포트 노출
EXPOSE 80

# Nginx 시작
CMD ["nginx", "-g", "daemon off;"]

유용한 링크