Dockerizando um aplicativo Flutter Web com build do Flutter dockerizado e Nginx

Construa e hospede um aplicativo Flutter Web com contêineres Docker

Conteúdo da página

Vários exemplos de Dockerfiles para construir e hospedar aplicativos Flutter web,
Imagem de build do Flutter baseada em Ubuntu + Imagem do Webapp no Nginx.

logos docker+flutter

Dockerfile All-in-one

Um Dockerfile típico para construir aplicativos Flutter web pode parecer com o abaixo.
Ele usa ubuntu:latest como imagem base de build, instala o Flutter, constrói o aplicativo web e copia-o para a imagem nginx:alpine.
A imagem resultante do aplicativo web hospedado no nginx teria um pouco mais de 73 MB, graças ao tamanho de 48,2 MB da imagem nginx:alpine.

FROM ubuntu:latest AS builder

# Instalar dependências
RUN apt-get update && apt-get install -y \
    curl \
    git \
    unzip \
    xz-utils \
    zip \
    libglu1-mesa

# Instalar 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


# Adicionar argumento de build
ARG MY_MEGA_API_URL
ENV MY_MEGA_API_URL=${MY_MEGA_API_URL}


# Copiar a fonte do app
WORKDIR /app
COPY . .

# Obter dependências do app
RUN flutter pub get

# Limpar quaisquer builds existentes e construir para web
RUN flutter clean
RUN flutter build web --release --verbose --dart-define=MY_MEGA_API_URL=${MY_MEGA_API_URL}

# Etapa 2 - Criar a imagem final com o nginx para servir os arquivos estáticos
FROM nginx:alpine

# Copiar o build da etapa de build
COPY --from=builder /app/build/web /usr/share/nginx/html

# Copiar a configuração do nginx
RUN echo 'server { \
    listen 80; \
    server_name localhost; \
    root /usr/share/nginx/html; \
    index index.html; \
    \
    # Lidar com ativos estáticos com tipos MIME apropriados \
    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; \
    } \
    \
    # Lidar com roteamento do Flutter web \
    location / { \
        try_files $uri $uri/ @fallback; \
    } \
    \
    location @fallback { \
        rewrite ^.*$ /index.html last; \
    } \
    \
    # Cabeçalhos de segurança \
    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

# Expôr a porta
EXPOSE 80

# Iniciar o Nginx
CMD ["nginx", "-g", "daemon off;"]

Flutter Dockerizado

Mas, se você tiver vários aplicativos Flutter web com os quais está trabalhando, esses arquivos temporários para a imagem de build intermediária consumiriam algum espaço em disco. Faz sentido criar uma única imagem para o build do Flutter e reutilizá-la entre os projetos. A seguir, a imagem abaixo ocupa 3,47 GB no meu PC apenas uma vez.

Aqui está um simples Dockerfile para a imagem de build do Flutter. Salve-o como Dockerfile.flutter.

FROM ubuntu:latest AS builder

# Instalar dependências
RUN apt-get update && apt-get install -y \
    curl \
    git \
    unzip \
    xz-utils \
    zip \
    libglu1-mesa

# Instalar 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

Vamos construí-lo com

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

Dockerfile Simplificado para Aplicativo Flutter Web

FROM rg-flutter:1.0 AS builder

# Adicionar argumento de build
ARG MY_MEGA_API_URL
ENV MY_MEGA_API_URL=${MY_MEGA_API_URL}


# Copiar a fonte do app
WORKDIR /app
COPY . .

# Obter dependências do app
RUN flutter pub get

# Limpar quaisquer builds existentes e construir para web
RUN flutter clean
RUN flutter build web --release --verbose --dart-define=MY_MEGA_API_URL=${MY_MEGA_API_URL}

# Etapa 2 - Criar a imagem final com o nginx para servir os arquivos estáticos
FROM nginx:alpine

# Copiar o build da etapa de build
COPY --from=builder /app/build/web /usr/share/nginx/html

# Copiar a configuração do nginx
RUN echo 'server { \
    listen 80; \
    server_name localhost; \
    root /usr/share/nginx/html; \
    index index.html; \
    \
    # Lidar com ativos estáticos com tipos MIME apropriados \
    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; \
    } \
    \
    # Lidar com roteamento do Flutter web \
    location / { \
        try_files $uri $uri/ @fallback; \
    } \
    \
    location @fallback { \
        rewrite ^.*$ /index.html last; \
    } \
    \
    # Cabeçalhos de segurança \
    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

# Expôr a porta
EXPOSE 80

# Iniciar o Nginx
CMD ["nginx", "-g", "daemon off;"]