Dockeriseren van een Flutter Web-app met gedockerde Flutter-build en Nginx

Flutter Web-app bouwen en hosten met Docker-containers

Inhoud

Verschillende voorbeelden van Dockerfiles voor het bouwen en hosten van Flutter web apps, Ubuntu-gebaseerde Flutter build afbeelding + Webapp afbeelding op Nginx.

docker+flutter logos

Alles-in-één Dockerfile

Een typische Dockerfile voor het bouwen van Flutter webapps zou er ongeveer zo uitzien. Het gebruikt ubuntu:latest als basisafbeelding voor het bouwen, installeert Flutter, bouwt de webapp en kopieert deze naar de nginx:alpine afbeelding. De resulterende afbeelding van de op Nginx gehoste webapp zou iets meer dan 73 MB zijn, dankzij de grootte van nginx:alpine van 48,2 MB.

FROM ubuntu:latest AS builder

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

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


# Voeg bouwargument toe
ARG MY_MEGA_API_URL
ENV MY_MEGA_API_URL=${MY_MEGA_API_URL}


# Kopieer app broncode
WORKDIR /app
COPY . .

# Haal app afhankelijkheden op
RUN flutter pub get

# Verwijder eventuele bestaande builds en bouw voor web
RUN flutter clean
RUN flutter build web --release --verbose --dart-define=MY_MEGA_API_URL=${MY_MEGA_API_URL}

# Stap 2 - Maak de eindafbeelding met Nginx om de statische bestanden te serveren
FROM nginx:alpine

# Kopieer de build van de bouwstap
COPY --from=builder /app/build/web /usr/share/nginx/html

# Kopieer Nginx configuratie
RUN echo 'server { \
    listen 80; \
    server_name localhost; \
    root /usr/share/nginx/html; \
    index index.html; \
    \
    # Verwerk statische assets met juiste MIME types \
    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; \
    } \
    \
    # Verwerk Flutter web routing \
    location / { \
        try_files $uri $uri/ @fallback; \
    } \
    \
    location @fallback { \
        rewrite ^.*$ /index.html last; \
    } \
    \
    # Beveiligingsheaders \
    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

# Open poort
EXPOSE 80

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

Dockeriseerde Flutter

Maar als je meerdere Flutter webapps werkt aan, dan zullen die tijdelijke bestanden voor de tussenliggende bouwafbeelding wat ruimte op je schijf in beslag nemen. Het maakt dus zin om één afbeelding te maken voor de Flutter bouw en die te hergebruiken over meerdere projecten. De hieronder gegeven is op mijn PC slechts één keer 3,47 GB.

Hier is een eenvoudige Dockerfile voor de Flutter bouwafbeelding. Sla het op als Dockerfile.flutter.

FROM ubuntu:latest AS builder

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

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

Laat ons het bouwen met

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

Vereenvoudigde Dockerfile voor Flutter Web App

FROM rg-flutter:1.0 AS builder

# Voeg bouwargument toe
ARG MY_MEGA_API_URL
ENV MY_MEGA_API_URL=${MY_MEGA_API_URL}


# Kopieer app broncode
WORKDIR /app
COPY . .

# Haal app afhankelijkheden op
RUN flutter pub get

# Verwijder eventuele bestaande builds en bouw voor web
RUN flutter clean
RUN flutter build web --release --verbose --dart-define=MY_MEGA_API_URL=${MY_MEGA_API_URL}

# Stap 2 - Maak de eindafbeelding met Nginx om de statische bestanden te serveren
FROM nginx:alpine

# Kopieer de build van de bouwstap
COPY --from=builder /app/build/web /usr/share/nginx/html

# Kopieer Nginx configuratie
RUN echo 'server { \
    listen 80; \
    server_name localhost; \
    root /usr/share/nginx/html; \
    index index.html; \
    \
    # Verwerk statische assets met juiste MIME types \
    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; \
    } \
    \
    # Verwerk Flutter web routing \
    location / { \
        try_files $uri $uri/ @fallback; \
    } \
    \
    location @fallback { \
        rewrite ^.*$ /index.html last; \
    } \
    \
    # Beveiligingsheaders \
    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

# Open poort
EXPOSE 80

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