Перейти к содержимому
Главная страница » Деплой веб-приложений Flutter с помощью Docker

Деплой веб-приложений Flutter с помощью Docker

Одна из проблем, с которой сталкиваются многие инженеры-программисты, связана с развертыванием. Инженер может создать и протестировать приложение со всеми зависимостями от ОС Windows без ошибок. Тем не менее, развертывание одного и того же приложения в другой операционной системе, такой как Linux или Mac, может привести к ошибкам.

Контейнеризация веб-приложений Flutter с помощью Docker

До появления контейнерных технологий виртуальные машины (VMS) были стандартными решениями для решения подобных проблем. Оказывается, виртуальные машины работают медленно и не занимают много памяти, отчасти потому, что их приходится настраивать и запускать для каждого приложения.

Технология контейнеризации приложений дополняет неэффективность виртуальных машин; контейнеры представляют собой облегченные пакеты, которые позволяют приложению стабильно работать в любой операционной системе или инфраструктуре.

В этом руководстве мы подробнее расскажем о том, что значит контейнеризация приложения и ее преимуществах. Мы изучим это, установив Docker на нашем компьютере и контейнеризовав веб-приложение Flutter.

Необходимые требования

  • На вашем компьютере установлены SDK для Dart, Android и Flutter
  • Docker toolkit

В этой демонстрации я буду использовать код Visual Studio. Для эффективного запуска Docker в Windows убедитесь, что на вашем компьютере:

  • Работает в Windows версии 10
  • Имеет не менее 4 ГБ оперативной памяти

Что такое контейнеры?

Контейнерные технологии позволяют последовательно запускать приложения в распределенных средах. Эти среды могут включать:

  • Переход с ноутбука разработчика на тестовую, промежуточную и производственную среды
  • Миграция с физической машины на виртуальную в облаке

Обычно нет гарантии, что приложение работает с согласованными протоколами выполнения в этих средах. Например, вы можете создать и протестировать приложение, используя Flutter версии 2.3., но на этапе производства приложение в конечном итоге запускается на Flutter версии 5.1, и, как результат, что-то идет не так.

Контейнеры гарантируют, что приложение поддерживает настроенный протокол выполнения независимо от операционных конфигураций хост-сервера.

Это достигается за счет упаковки приложения с его зависимостями, настройками, библиотеками и другими протоколами выполнения в изолированном состоянии. Это означает, что приложение работает независимо от конфигураций сервера размещения и без каких-либо несовместимостей.

Что такое Docker?

Docker — это инструмент с открытым исходным кодом для создания, тестирования, развертывания контейнерных приложений и управления ими. На мой взгляд, это стандарт для реализации контейнеризации приложений из-за простоты переносимости и дизайна для современной микросервисной архитектуры.

Docker упрощает процесс управления контейнерами с помощью своих docker команд.

Настройка Docker

Приступим к контейнеризации веб-приложения Flutter с помощью Docker.

Как я упоминал в начале этой статьи, я продемонстрирую этот процесс в операционной системе Windows. После установки Docker в вашей системе откройте командную оболочку от имени администратора.

Выполните следующую команду, чтобы проверить установленную версию Docker:

sh 
docker -версия

Вы должны получить вывод, отображающий установленную вами версию Docker в следующем формате:

sh 
Docker версии 20.10.8, сборка 3967b7d

Далее давайте протестируем установку, выполнив базовую команду Docker в терминале.

sh 
привет, запуск Docker-мир

Ожидаемый результат для этой команды:

Ожидаемые результаты тестирования Hello World с помощью Docker

При первом запуске приведенная выше команда извлекает образ из Docker hub и запускает его экземпляр как контейнер.

Если вы используете операционную систему Linux, вам придется предоставить Docker root-доступ, чтобы использовать его в вашей IDE. Вы можете сделать это, выполнив следующие команды:

Создайте группу Docker:

sh
sudo groupadd docker

Добавьте вашего пользователя в группу:

sh
sudo usermod -a -G $ USER

Активируйте изменения, внесенные в группы:

sh
newgrp docker

Теперь убедитесь, что вы можете запускать команды Docker из командной оболочки без использования sudo команды.

sh 
привет, запуск Docker-мир

Создание контейнера Docker

Откройте веб-приложение Flutter, которое вы хотите контейнеризировать, в предпочитаемой вами IDE. Внутри корневой папки приложения создайте файл с именем Dockerfile. Убедитесь, что имя файла начинается с заглавной буквы “D”.

Теперь добавьте следующий код в Dockerfile:

sh 

# Установка операционной системы и зависимостей
ИЗ ubuntu:20.04

ЗАПУСТИТЕ apt-получите обновление 
ЗАПУСТИТЕ apt-, ,, python3
ЗАПУСТИТЕ apt-очистите 

# загрузите Flutter SDK из репозитория Flutter на Github
ЗАПУСТИТЕ git clone https://github.com/flutter/flutter.git /usr/local/flutter

# Задайте путь к среде flutter
ENV PATH="/usr/ local/flutter /bin:/usr/local/flutter/bin/cache / dart-sdk/bin: ${PATH}"

# Запустить flutter doctor
ЗАПУСТИТЕ flutter doctor 

# Включить flutter web 
ЗАПУСТИТЕ flutter channel master
ЗАПУСТИТЕ flutter upgrade
ЗАПУСТИТЕ flutter config --включить-web 

# Копирование файлов в контейнер и сборка
ЗАПУСТИТЕ mkdir /приложение/
КОПИРОВАТЬ . /приложение/
РАБОЧИЙ каталог /приложение/
ЗАПУСТИТЕ flutter build web 

# Запишите открытый порт
ПРЕДОСТАВЬТЕ 5000

# make server startup script executable и запустите веб-сервер
ЗАПУСТИТЕ ["chmod", "+x", "/app/server/server.sh"]

ТОЧКА ВХОДА [ "/app/server/server.sh "]

В приведенном выше файле Dockerfile мы начали с установки операционной системы (Ubuntu) и необходимых зависимостей.

Затем мы загрузили Flutter SDK и указали путь к SDK в environment path (это также то, что вы бы сделали, если бы настраивали Flutter на своем локальном компьютере).

После этого мы скопировали наше приложение в контейнер и собрали его с помощью Dockerfile.

Наконец, мы представили port=5000, с помощью которого мы будем обслуживать приложение из контейнера. Затем мы запускаем HTTP-сервер с помощью server.sh скрипта.

Затем создайте подпапку в корневой папке приложения. Назовите папку server, затем создайте server.sh файл внутри server папки и добавьте следующий код.

sh 

#!/bin /bash

# Установка порта
ПОРТ=5000

# Остановить любую программу, запущенную в данный момент на заданном порту 
echo "подготовка порта" $PORT '...' 
fuser -k 5000/ tcp 

# переключение каталогов 
сборка компакт-диска/web/

# Запуск сервера 
echo 'Запуск сервера с порта' $PORT '...' 
python3 -m http.server $ PORT

В server.sh файле мы устанавливаем порт на 5000 тот же, что мы указали в Dockerfile.

Затем мы используем команду fuser для завершения любого другого процесса, запущенного в данный момент на порту 5000, чтобы сделать его доступным для нашего приложения. Наконец, мы запускаем сервер.

Создание образа Docker

Откройте терминал из корневой папки приложения и выполните следующую команду:

docker build . -t flutter_docker

Файл образа Docker виден в вашем представлении на диске

При этом будет создан образ Docker с именем flutter_docker. Вы можете просмотреть этот образ из установленного настольного приложения Docker. Вы также можете просмотреть изображение с помощью команды docker images.

Запустите контейнер изображений

Выполните следующую команду:

docker run -i -p 8080:5000 -td flutter_docker

Эта команда привязывает port 5000 настроенные в контейнере приложения к TCP port 8080, доступным из браузера.

Ожидаемая структура проекта

Структура вашего проекта должна быть в этом формате к моменту завершения настройки:

Теперь вы можете просматривать приложение через локальную среду хостинга

Перейдите к просмотру приложения на localhost:8080 в вашем браузере.

Заключение

В этом руководстве мы узнали о преимуществах контейнеризации приложения. Мы продемонстрировали, как настроить Docker на нашем компьютере, и приступили к запуску нашего существующего приложения из контейнера Docker.

С Docker вам не нужно беспокоиться о том, что ваше приложение выйдет из строя из-за несовместимости сред его хостинга. Вы можете узнать больше о Docker из официальной документации.

Цель состоит в том, чтобы ваше приложение было достаточно гибким для независимой работы на своем хостинге. Как мы продемонстрировали на примере приложения Flutter, вы также можете контейнеризировать приложения, созданные с помощью других инструментов.

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *