Flutter Web 배포 (With docker-compose & nginx)

방법1

docker-compose.yml(Flutter) + Dockerfile을 통해 Flutter Web build 후 Nginx에 올려 배포 (빌드 후 배포)

docker-compose.yml

version: '3'
services: 
  flutter:
    build: 
      context: . # Dockerfile 상대 경로 (docker-compose.yml 기준)
    ports:
      - "80:80" 
    environment:
      - TZ=Asia/Seoul
    restart: always
    networks:
      - test_network
networks:
  test_network:
    driver: bridge

Dockerfile

- flutter 설치 => flutter web build => nginx로 배포 

# 이미지의 기반이 되는 베이스 이미지를 지정
FROM debian:latest AS build-env

# 필요한 패키지 및 종속성을 설치
RUN apt-get update
RUN apt-get install -y curl git wget unzip gdb
RUN apt-get clean

# Flutter를 다운로드하고 설치 (Flutter 공식 GitHub 이용)
RUN 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 도구를 사용하여 시스템 설정을 확인
RUN flutter doctor -v

# Flutter를 업그레이드
RUN flutter upgrade

# 앱 소스 코드를 컨테이너 내부로 복사하고 작업 디렉토리를 설정
RUN mkdir /app/
COPY . /app/
WORKDIR /app/

# Flutter 웹 앱을 빌드
RUN flutter build web

# Nginx 베이스 이미지를 사용하여 두 번째 스테이지를 생성
FROM nginx:1.24.0

# 앞서 빌드한 Flutter 웹 앱을 Nginx의 정적 콘텐츠 디렉토리로 복사
COPY --from=build-env /app/build/web /usr/share/nginx/html

방법2

docker-compose.yml(Nginx) + nginx.conf를 통해 기존에 빌드한 Flutter Web(index.html)을 Nginx에 올려 배포
(빌드된 걸 배포)

docker-compose.yml

- build한 Flutter Web의 파일 위치와 nginx.conf 파일에서 지정한 index 경로가 일치해야 함 

version: '3'
services: 
  nginx:
    image: nginx:latest
    ports:
      - "80:80"
    volumes:
      - ./project/build/web:/usr/share/nginx/html 
      - ./nginx.conf:/etc/nginx/nginx.conf 
    environment:
      - TZ=Asia/Seoul
    restart: always
    networks:
      - test_network
networks:
  test_network:
    driver: bridge

nginx.conf

- etc/nginx/nginx.conf = 컨테이너 생성 시 nginx.conf의 기본 경로

user  nginx;
worker_processes  auto;
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;
events {
    worker_connections  1024;
}
http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    server {
        listen 80;
        server_name nginx-test; 

        root /usr/share/nginx/html; 

        index index.html;

        location / {
            try_files $uri $uri/ /index.html;
        }
    }
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;
    keepalive_timeout  65;
    include /etc/nginx/conf.d/*.conf;
}