Docker-изация Flutter Web-приложения с использованием Docker-изированной сборки Flutter и Nginx

Сборка и размещение веб-приложения на Flutter с использованием контейнеров Docker

Содержимое страницы

Несколько примеров Dockerfile для построения и размещения веб-приложений Flutter, образ Flutter Build на основе Ubuntu + образ Webapp на Nginx.

docker+flutter logos

Единый Dockerfile

Типичный Dockerfile для построения веб-приложений Flutter может выглядеть как показано ниже. Он использует ubuntu:latest в качестве базового образа для сборки, устанавливает Flutter, строит веб-приложение и копирует его в образ nginx:alpine. Результирующий образ веб-приложения, размещенного на nginx, будет немного больше 73 МБ, благодаря размеру nginx:alpine в 48,2 МБ.

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

# Копирование сборки из этапа builder
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 и повторно использовать его в разных проектах. Ниже приведён образ, который занимает 3,47 ГБ на моём ПК всего один раз.

Вот простой Dockerfile для образа сборки Flutter. Сохраните его как 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 .

Упрощённый Dockerfile для веб-приложения Flutter

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

# Копирование сборки из этапа builder
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;"]

Полезные ссылки