Dockerizzare un'app Flutter Web con costruzione Flutter dockerizzata e Nginx

Costruisci e ospita un'app Flutter Web con contenitori Docker

Indice

VARI ESEMPI DI Dockerfile per la costruzione e l’hosting di app Flutter web,
Immagine di costruzione Flutter basata su Ubuntu + Immagine Webapp su Nginx.

loghi Docker+Flutter

Dockerfile tutto-in-uno

Un tipico Dockerfile per la costruzione di app Flutter web potrebbe somigliare a quello che segue. Utilizza ubuntu:latest come immagine base per la costruzione, installa Flutter, costruisce l’app web e la copia nell’immagine nginx:alpine. L’immagine risultante dell’app web ospitata su Nginx sarebbe un po’ più di 73 MB, grazie alla dimensione di nginx:alpine di 48,2 MB.

FROM ubuntu:latest AS builder

# Installa dipendenze
RUN apt-get update && apt-get install -y \
    curl \
    git \
    unzip \
    xz-utils \
    zip \
    libglu1-mesa

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


# Aggiungi argomento di costruzione
ARG MY_MEGA_API_URL
ENV MY_MEGA_API_URL=${MY_MEGA_API_URL}


# Copia la sorgente dell'app
WORKDIR /app
COPY . .

# Ottieni le dipendenze dell'app
RUN flutter pub get

# Pulisci eventuali costruzioni esistenti e costruisci per web
RUN flutter clean
RUN flutter build web --release --verbose --dart-define=MY_MEGA_API_URL=${MY_MEGA_API_URL}

# Fase 2 - Crea l'immagine finale con Nginx per servire i file statici
FROM nginx:alpine

# Copia la costruzione dalla fase builder
COPY --from=builder /app/build/web /usr/share/nginx/html

# Copia la configurazione di Nginx
RUN echo 'server { \
    listen 80; \
    server_name localhost; \
    root /usr/share/nginx/html; \
    index index.html; \
    \
    # Gestisci gli asset statici con i tipi MIME appropriati \
    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; \
    } \
    \
    # Gestisci la routing Flutter web \
    location / { \
        try_files $uri $uri/ @fallback; \
    } \
    \
    location @fallback { \
        rewrite ^.*$ /index.html last; \
    } \
    \
    # Intestazioni di sicurezza \
    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

# Espone la porta
EXPOSE 80

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

Flutter Dockerizzato

Ma se hai diversi progetti Flutter web su cui stai lavorando, i file temporanei per l’immagine di costruzione intermedia occuperebbero spazio sul tuo disco. È quindi sensato creare un’unica immagine per la costruzione di Flutter e riutilizzarla tra i progetti. Quella qui sotto occupa solo 3,47 GB sul mio PC.

Ecco un semplice Dockerfile per l’immagine di costruzione Flutter. Salvalo come Dockerfile.flutter.

FROM ubuntu:latest AS builder

# Installa dipendenze
RUN apt-get update && apt-get install -y \
    curl \
    git \
    unzip \
    xz-utils \
    zip \
    libglu1-mesa

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

Costruiscilo con

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

Dockerfile semplificato per app Flutter web

FROM rg-flutter:1.0 AS builder

# Aggiungi argomento di costruzione
ARG MY_MEGA_API_URL
ENV MY_MEGA_API_URL=${MY_MEGA_API_URL}


# Copia la sorgente dell'app
WORKDIR /app
COPY . .

# Ottieni le dipendenze dell'app
RUN flutter pub get

# Pulisci eventuali costruzioni esistenti e costruisci per web
RUN flutter clean
RUN flutter build web --release --verbose --dart-define=MY_MEGA_API_URL=${MY_MEGA_API_URL}

# Fase 2 - Crea l'immagine finale con Nginx per servire i file statici
FROM nginx:alpine

# Copia la costruzione dalla fase builder
COPY --from=builder /app/build/web /usr/share/nginx/html

# Copia la configurazione di Nginx
RUN echo 'server { \
    listen 80; \
    server_name localhost; \
    root /usr/share/nginx/html; \
    index index.html; \
    \
    # Gestisci gli asset statici con i tipi MIME appropriati \
    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; \
    } \
    \
    # Gestisci la routing Flutter web \
    location / { \
        try_files $uri $uri/ @fallback; \
    } \
    \
    location @fallback { \
        rewrite ^.*$ /index.html last; \
    } \
    \
    # Intestazioni di sicurezza \
    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

# Espone la porta
EXPOSE 80

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