[Flutter] Linux에서 Flutter Web 호스팅 하기

요즘 앉아서 먹기만 하는 빈도가 증가하다보니 몸에 타이어가 2센치가량 늘어나게 되었다.

여름도 오고 슬슬 다이어트 시작을 해야될 듯 하다.

 

이번 포스팅에서는 Linux기반 서버에서 Flutter로 작성한 Web어플리케이션을 호스팅하는 법을 알아가 보도록 하겠다.

 

우선 우리가 준비해야할 사항들은

1. Flutter로 작성된 프로젝트 (2.0 이상)

2. 리눅스 기반 서버 (ubuntu, debian, centOS 포함)

 

이게 끝이다.

 

자 그러면 먼저 Flutter 로 작성된 프로젝트를 웹 앱으로 빌드해주도록 해하자

프로젝트 콘솔에 flutter build web 을 입력하도록 하자.

flutter build web

그러면 이런 모습으로 웹버전으로 빌드가 완료된다.

 

그리고 빌드된 폴더로 이동하자.

프로젝트 폴더>build폴더 안에 들어가게 되면 web폴더를 볼 수 있고 

해당 폴더 내부는 이렇다

 

웹에서 호스팅을 하게 되면 index.html을 실행하게 된다.

현재상태에서는 저걸 아무리 켜봐야 빈화면밖에 안뜰것이다. (로컬호스트로 호스팅모드가 된게 아니기때문)

 

이제 저 web이라는 폴더를 통째로 리눅스로 이동해주면 된다.

나는 리눅스로 파일을 옮길때 filezilla를 이용하는데 본인이 편한방법으로 winSCP를 사용하거나 해서

리눅스 내부에 원하는 위치에 옮겨두도록 하면 된다.

중요한건 저 폴더가 저장된 위치를 잘 메모해두어야 한다

나의 경우는 /home/veiz/project에 web폴더가 존재하게 되어있다.

 

이제 리눅스 콘솔로 이동해서 아래 명령어로 nginx를 설치한다.

sudo apt-get install nginx

 

 

이제 nginx의 구성파일을 편집해줘야 한다.

아래 명령어를 입력해서 편집기로 default파일을 열어본다.

sudo nano /etc/nginx/sites-enabled/default

 

default 파일 내부

server{
        listen 80;
        listen [::]:80;

        root /home/veiz/project/web;
        index index.html index.htm;

        server_name _;

        location / {
                try_files $uri $uri/ =404;
        }
}

 

저기서 root 오른쪽부분은 내가 저장해둔 플러터 웹파일의 경로이다 저렇게 지정해두고 ctrl+o, ctrl+x를 통해 저장및 종료를 하자.

 

그리고 nginx 구성파일이 정상 작동되는지 테스트를 하자

콘솔에 이렇게 입력한다

sudo nginx -t

요렇게 뜨면 구성파일 구조가 정상이라는 뜻이다.

 

이제 nginx를 재시작해주자

sudo systemctl restart nginx
또는 
sudo systemctl reload nginx

 

아 참.

만약 외부 인터넷에서 접속을 하고싶다면 

공유기나 라우터 포트포워딩을 해당 리눅스의아이피:80번포트 로 지정해두어야 외부에서도 접근이 가능하다

 

이제 외부아이피를 입력하고 들어가면 정상적으로 호스팅이 완료된 것을 볼 수 있다.

 

땨라아아아안~~

 

로컬호스트로 웹접속을 한게 아니라

전혀 다른 외부 PC에서 서버로 접속한 모습니다.

 

만약 연결이 안된다면 

리눅스에서 80번 포트에 대한 방화벽 해제 또는 80번 포트에 대한 포트포워딩이 잘 이루어졌는지 확인하자.