Hola, Amigos! Сегодня мы обсудим процесс развертывания Flutter-приложения в изолированном окружении без необходимости настройки полноценного сервиса для веба на сервере ⚙️
С помощью docker контейнера вы можете создать и легко развернуть большинство сервисов, в том числе и Flutter web.
Для начала нам потребуется сам код и docker, установленный на вашем компьютере.
Создаём папку, где будут хранится файлы для компиляции и развёртывания. Переносим туда папку с Flutter проектом. В ней создаём файл Dockerfile, в котором будет обрабатываться последовательность сборки и компиляции проекта.
# Выбираем образ debian для сборки
FROM debian:latest AS build-env
#Загружаем необходимые зависимости для загрузки и работы flutter sdk
RUN apt-get update
RUN apt-get install -y curl git wget unzip libgconf-2-4 gdb libstdc++6 libglu1-mesa fonts-droid-fallback lib32stdc++6 python3 sed
RUN apt-get clean
RUN git clone https://github.com/flutter/flutter.git /usr/local/flutter
ENV PATH="${PATH}:/usr/local/flutter/bin:/usr/local/flutter/bin/cache/dart-sdk/bin"
#Запускаем и обновляем flutter
RUN flutter doctor -v
RUN flutter channel master
RUN flutter upgrade
#Создаем папки для дальнейшей работы
RUN mkdir /app/
COPY ./web-app/. /app/
WORKDIR /app/
#Запускаем компиляцию
RUN flutter build web
#Берем образ с nginx
FROM nginx:alpine
#Копируем скомпилированное flutter web приложение в контейнер с nginx
COPY --from=build-env /app/build/web /usr/share/nginx/html
В строчке «COPY ./web-app/. /app/» заменяем «./web-app/» на папку, в которой находится ваш Flutter проект.
В этой же папке создаём файл docker-compose.yml. Можно обойтись и без него, однако удобнее работать с контейнерами, когда все команды в Dockerfile, а остальные — в docker-compose. Пишем:
version: '3'
services:
nginx:
# Наименование контейнера
container_name: 'nginx-webserver-example'
# Путь к Dockerfile
build: ./
# Открытие портов из контейнера 80 для http и 443 для ssl и https
ports:
- '80:80'
- '443:443'
Выполните docker compose up и наслаждайтесь результатом по адресу localhost ⚙️
Пример проекта доступен по ссылке. Ставьте реакцию, если было полезно!