Flutter Web allows you to use the same code you wrote for mobile to build high-quality web applications. While building the app is easy, deploying it to a server in a way that is repeatable and automated can be tricky.

In this guide, we will walk through the process of deploying your Flutter Web project using Docker and GitHub Actions. This setup ensures that every time you update your code, your website updates automatically.

Prerequisites

Before starting, ensure you have:

• Docker installed on your local machine for testing.
• A Docker Hub account to host your application images.
• A Cloud Server (we use Digital Ocean, but any provider like AWS or GCP works).

Setting Up Your Server

If you are new to cloud hosting, Digital Ocean "Droplets" are a great place to start.

1. Create a Droplet: Choose an Ubuntu image.
2. Choose a Size: For small to medium projects, the basic $6/month plan (1 CPU, 1GB RAM) is usually sufficient.
3. Authentication: Always use SSH keys instead of passwords. It is much more secure for automated deployments.

Preparing the Deployment Files

To serve a Flutter Web app, we need a web server. Nginx is the industry standard for this. We will use Docker to package our app along with Nginx.

Step 1: Nginx Configuration

Create a file named nginx.conf in your project root. This tells Nginx where to find your files:

server {
    listen 80;
 
    location / {
        root /usr/share/nginx/html;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
}

Step 2: The Dockerfile

The Dockerfile is a script that Docker uses to build your app image. We will use a "multi-stage" build: the first stage builds the Flutter app, and the second stage puts the resulting files into a small Nginx image.

# Stage 1: Build the Flutter app
FROM ubuntu:22.04 as builder
 
RUN apt-get update && apt-get install -y \
    curl git unzip xz-utils zip libglu1-mesa \
    && rm -rf /var/lib/apt/lists/*
 
# Install Flutter SDK
RUN curl https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_3.24.0-stable.tar.xz -o flutter.tar.xz \
    && tar xf flutter.tar.xz && rm flutter.tar.xz
ENV PATH="$PATH:/flutter/bin"
 
RUN flutter config --enable-web
WORKDIR /app
COPY . .
RUN flutter pub get && flutter build web --release
 
# Stage 2: Serve the app with Nginx
FROM nginx:alpine
COPY --from=builder /app/build/web /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf

Automating with GitHub Actions

Now we want to automate the build. Every time you push code to the main branch, GitHub will build the Docker image and deploy it to your server.

Step 1: Secure Your Secrets

Go to your GitHub repository Settings > Secrets and Variables > Actions. Add the following:

• DOCKER_USERNAME: Your Docker Hub username.
• DOCKER_PASSWORD: Your Docker Hub password (or access token).
• SSH_HOST: Your server's IP address.
• SSH_PRIVATE_KEY: The private SSH key used to access your server.

Step 2: Create the Workflow

Create a file at .github/workflows/deploy.yml:

name: Build and Deploy
 
on:
  push:
    branches: [ main ]
 
jobs:
  build-and-push:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
 
      - name: Login to Docker Hub
        run: echo "${{ secrets.DOCKER_PASSWORD }}" | docker login -u "${{ secrets.DOCKER_USERNAME }}" --password-stdin
 
      - name: Build and Push
        run: |
          docker build -t ${{ secrets.DOCKER_USERNAME }}/flutter-app:latest .
          docker push ${{ secrets.DOCKER_USERNAME }}/flutter-app:latest
 
  deploy:
    needs: build-and-push
    runs-on: ubuntu-latest
    steps:
      - name: Update Server
        uses: appleboy/ssh-action@master
        with:
          host: ${{ secrets.SSH_HOST }}
          username: root
          key: ${{ secrets.SSH_PRIVATE_KEY }}
          script: |
            docker pull ${{ secrets.DOCKER_USERNAME }}/flutter-app:latest
            docker rm -f flutter-app || true
            docker run -d --name flutter-app -p 80:80 ${{ secrets.DOCKER_USERNAME }}/flutter-app:latest

Conclusion

Automating your deployment saves time and prevents human error. With this setup, your Flutter Web application is always one git push away from being live. You can now focus on building features while GitHub and Docker handle the heavy lifting of delivery.