flutter web ec2 nginx & docker

Flutter

flutter web ec2 nginx & docker

leopard4 2023. 11. 2. 18:34

flutter web을 빌드하면 web 디렉토리가 생성된다.

ec2로 옮긴다

주의사항 : nginx 관리자가 접근할수있는 권한이 있는곳으로 이동시키거나

해당 디렉토리의 권한을 상승시켜야함.

일반적인 위치는 /var/www 여기임

예를들어

/home/ec2-user/web/

여기에 둔다고 치면

ec2-user 디렉토리와 web 디렉토리

즉 경유하는 디렉토리 모두 권한이 올바르게 설정되어있는지 확인

권한상승명령어

sudo chown -R nginx:nginx /home/ec2-user/web/
sudo chmod 644 /home/ec2-user/web/index.html

sudo chmod +x /home/ec2-user

그런데 그냥 애초에 권한이 있는곳에 두는것이 좋은것같다.

sudo yum update

sudo yum install nginx

아마존리눅스는 무슨패키지 관리자인가 암튼 명령어가 틀림 구글검색

Nginx 구성

구성파일의 기본경로

sudo nano /etc/nginx/conf.d/flutter_web.conf

server {
    listen 80;
    server_name your-domain-or-ip;

    location / {
        root /home/ec2-user/web; # Flutter 웹 파일의 실제 경로로 바꾸세요.
        index index.html;
    }
}

기본경로에 없으면 이걸로

sudo nano /etc/nginx/nginx.conf

user nginx;
worker_processes auto;

error_log /var/log/nginx/error.log;
pid /var/run/nginx.pid;

events {
    worker_connections 1024;
}

http {
    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;
    tcp_nopush on;
    tcp_nodelay on;
    keepalive_timeout 65;
    types_hash_max_size 2048;

    include /etc/nginx/mime.types;
    default_type application/octet-stream;

    server {
        listen 80;
        server_name _;

        location / {
            root /usr/share/nginx/html; # 이건기본경로고 나는 /home/ec2-user/web 여기로햇으니까 이걸로 바꿈
            index index.html;
        }
    }
}

구성 저장하면 재시작

sudo systemctl reload nginx

그 외 명령어들

Nginx 서비스를 시작합니다:

sudo systemctl start nginx

부팅 시 Nginx가 시작되도록 활성화합니다

sudo systemctl enable nginx

Nginx가 오류 없이 실행되고 있는지 확인합니다.

sudo systemctl status nginx

안될시 로그확인

/var/log/nginx/error.log

로그에 경로가 이상한거같다하면

index.html 상단에 <base href="/" /> 여기 수정

vpc 인바운드 80 개방

도커로 해보기 예시

https://github.com/edwardinubuntu/flutter-web-dockerfile

Dockerfile

# Environemnt to install flutter and build web
FROM debian:latest AS build-env

# install all needed stuff
RUN apt-get update
RUN apt-get install -y curl git unzip

# define variables
ARG FLUTTER_SDK=/usr/local/flutter
ARG FLUTTER_VERSION=3.10.5
ARG APP=/app/

#clone flutter
RUN git clone https://github.com/flutter/flutter.git $FLUTTER_SDK
# change dir to current flutter folder and make a checkout to the specific version
RUN cd $FLUTTER_SDK && git fetch && git checkout $FLUTTER_VERSION

# setup the flutter path as an enviromental variable (경로를 :로 구분함)
ENV PATH="$FLUTTER_SDK/bin:$FLUTTER_SDK/bin/cache/dart-sdk/bin:${PATH}"

# Start to run Flutter commands
# doctor to see if all was installes ok
RUN flutter doctor -v

# create folder to copy source code
RUN mkdir $APP
# copy source code to folder
COPY . $APP
# stup new folder as the working directory
WORKDIR $APP

# Run build: 1 - clean, 2 - pub get, 3 - build web
RUN flutter clean
RUN flutter pub get
RUN flutter build web

# once heare the app will be compiled and ready to deploy

# use nginx to deploy
FROM nginx:1.25.2-alpine

# copy the info of the builded web app to nginx
COPY --from=build-env /app/build/web /usr/share/nginx/html

# Expose and run nginx
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

git clone https://github.com/edwardinubuntu/flutter-web-dockerfile.git

cd flutter-web-dockerfile/

docker build -t frontend .

docker images

docker run -d -p 9000:80 -t frontend:latest

# latest 생략가능

동일하게 개인프로젝트시

pubspec.yaml 옆에 Dockerfile을 생성하면 됨.

실행중인 컨테이너 접속

docker exec -it 컨테이너id /bin/bash

경량버전이라 bash가없음

docker exec -it 컨테이너id /bin/sh