[Flutter] Docker와 Nginx로 EC2에 플러터 웹 배포하기

| |
도커와 nginx를 이용하여 AWS EC2에 플러터 웹을 배포해보자


개요

플러터로 작성한 PWA 또는 웹페이지를 docker의 nginx 이미지를 통해 컨테이너화 시키고, 이를 AWS EC2에 배포해보자.


Nginx 설정파일 작성

프로젝트 폴더의 루트 경로에 다음과 같은 nginx.conf 파일을 작성한다.

1
2
3
4
5
6
7
8
server {
    listen 80;
    location / {
        root /app/build;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
}

주석과 같이 해당 파일에선 서버에 배포된 서비스가 사용할 포트와 오픈할 웹 html 파일의 경로를 명시해준다. try_files 속성의 역할은 Single Page Application, 일명 SPA를 위한 것인데, React나 Vue와 같은 라이브러리로 개발한 웹사이트들은 라우팅을 통해서 URL이 변경될 때 그에 따른 새로운 html을 반환하여 페이지를 보여주는 방식이 아니라 한 페이지에서 컴포넌트들을 변경하는 식으로 화면을 보여준다. Flutter도 이와 같은 SPA 성격을 갖고 있으며, 이 속성을 nginx 설정 파일에 등록해야 페이지 라우팅 시에도 일관되게 index.html을 참조한다. 해당 속성을 적용하지 않으면 다른 경로로 페이지가 라우팅될 때 html을 찾을 수 없다는 오류가 발생한다.


Dockerfile 작성

동일하게 프로젝트 폴더의 루트 경로에 Dockerfile 을 작성한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
FROM nginx

RUN mkdir /app
WORKDIR /app

RUN mkdir ./build
ADD ./build/web ./build

# meta data 변경 (필요 시에만)
COPY ./meta_data/ /app/build/web

RUN rm /etc/nginx/conf.d/default.conf
COPY ./nginx.conf /etc/nginx/conf.d

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

빌드 후 nginx를 통해 배포하는 과정에서 필요한 작업들을 나열해놨다고 보면 된다. 중간에 메타데이터를 변경해주는 부분이 있다. 웹을 배포하면 빌드 직후의 메타 데이터를 그대로 활용하기보다 웹사이트 제목, 설명, 썸네일 이미지, 아이콘 등등 다양한 메타데이터들을 변경해 줄 것이다. 또한 만약 Google Analytics 등과 같은 서비스를 사용한다면 일일이 html의 head 태그 부분에 코드를 추가해주어야 한다. 이러한 과정 또한 dockerfile을 통해 자동화 할 수 있다. 프로젝트 폴더 루트 경로에 meta_data 라는 이름의 폴더에 여러 메타 데이터들이 적용된 index.html, manifest.json, favicon.ico 등을 넣어두고 위와 같이 dockerfile을 작성해주면 도커 이미지 빌드 시에 자동으로 메타 데이터들을 교체해준다.


Flutter 빌드

1
$flutter build web

플러터 웹으로 빌드하면 /build/web 경로에 빌드 결과물이 나타난다. 이를 docker를 통해 AWS EC2에 배포해보자.


Docker 이미지 빌드 및 푸시

본 작업을 진행하기 전에 작업 환경에 docker가 설치되어 있고, docker hub에 로그인이 되어있어야 한다.

먼저 프로젝트 폴더 루트 경로에서 도커 이미지를 빌드해준다.

1
$docker build -t 도커계정명/프로젝트이미지명 .

그러면 작성했던 Dockerfile에 기반하여 도커 이미지가 빌드된다.

빌드가 무사히 완료됐으면 자신의 도커 허브에 이미지를 푸시한다.

1
$docker push 도커계정명/프로젝트이미지명


AWS EC2에서 Docker 컨테이너 실행

AWS EC2 인스턴스를 하나 생성하고 해당 인스턴스에 docker를 설치한다. Docker 설치 방법은 EC2 인스턴스의 AMI에 따라 방식이 다르므로 여기서는 생략한다.

도커 설치 및 실행 후 로컬에서 푸시했던 도커 이미지를 인스턴스로 가져온다.

1
$docker pull 도커계정명/프로젝트이미지명

마지막으로 EC2 인스턴스에서 해당 이미지를 도커 컨테이너에 올려 실행한다.

1
$docker run -p 80:80 -dt 도커계정명/프로젝트이미지명

명령어에 대해 간략히 설명하면, 인스턴스의 80 포트와 컨테이너의 80 포트를 연결시키고, 백그라운드 작업으로 docker daemon을 이용해 도커 이미지를 컨테이너에 올려 실행시키겠다는 것이다.


여기까지 완료한 뒤 EC2 인스턴스의 퍼블릭 IP 주소에 접속하면 본인이 개발한 플러터 웹앱이 정상적으로 배포되었음을 확인할 수 있다!

0%