돈없는 취준생은 노트북으로 배포를 한다!
가보자
사주 서비스 (Flutter 프론트 + FastAPI 백) 프로젝트를 노트북으로 땡전한푼 안 들이고 (전기세는 나가지만) 배포해보자
1. 개발 환경 정리
먼저 대략적인 프로젝트 구조는 다음과 같다
백엔드 도커파일은 백엔드 폴더 안에 있다
C:\Fortune_Project\
├── Frontend/ # Flutter 웹 앱
├── Backend/ # FastAPI 백엔드 (Docker)
└── update_duckdns.bat # DuckDNS IP 업데이트 스크립트기본 준비사항
Flutter 3.29.3 설치
Docker Desktop 설치
Windows 10/11 환경2. 노트북을 서버로 설정하기
2.1 절전모드, 자동업데이트 끄기
먼저 노트북의 절전모드를 꺼줘야한다
그리고 자동 업데이트도 일시정지 시켜주는게 좋다
서버를 잠깐만 키고 끌거면 딱히 신경 쓰지 않아도 괜찮긴 하지만 켜두고 오랫동안 둘거면 꺼둬야 한다
2.2 내부 고정 IP 설정
가정용은 보통사설 IP로 유동IP를 할당받게 된다. 로컬 네트워크에서 안정적인 접근을 위해 내부 IP를 고정해줘야한다
1. 제어판 → 네트워크 및 인터넷 → 어댑터 설정 변경
2. 사용 중인 네트워크 어댑터 우클릭 → 속성
3. "Internet Protocol Version 4 (TCP/IPv4)" 선택 → 속성
4. 다음 IP 주소 사용:
* IP 주소: 192.168.xxx.xxx 임의
* 서브넷 마스크: 255.255.255.0
* 기본 게이트웨이: 라우터주소 입력
* DNS 서버: 라우터주소 입력3. 백엔드 서버 설정
3.1 Docker 컨테이너 자동 시작
작업 스케줄러로 Docker 자동 실행 설정
사실 나는 내가 직접 서버를 켰다껐다 하기 때문에 할 필요는 없었지만 나중에 깨달아서 이미 해버린 과정이다
1. 시작 메뉴 → "작업 스케줄러" 검색하여 실행
2. 기본 작업 만들기:
* 이름: "Docker Backend Startup"
* 트리거: "컴퓨터가 시작할 때"
* 동작: "프로그램 시작"
* 프로그램/스크립트: cmd.exe
* 인수 추가: /c cd C:\Fortune_Project\Backend\environment && docker compose up -d
* 조건: "컴퓨터의 전원이 AC 전원일 때만 작업 시작" 체크 해제나는 작은 프로젝트여서 사실 항시 켜둘필요 없이 내가 직접 필요할 때 껐다켰당
위 스케줄러는 내가 설정한 트리거가 발생하면(컴터를 키면) 터미널이 켜지고 docker파일 디렉토리로 이동 후 도커 컴포즈업을 한다
FastAPI는 docs를 기본으로 제공해줘서 참 좋은거 같다.참고로 백엔드 엔드포인트는 포트 8000
4. 프론트엔드 웹 빌드 및 서버 설정
4.1 이미지 최적화
사실 배포하고 보니 Qwen이 문제가 아니라 렌더링 자체가 너무 오래걸렸다 이미지 크기가 이렇게 크게 영향을 미칠 줄은 몰랐는데...
필요없는 이미지 다 삭제하고, 이미지 압축을 해줬다
Tinypng <- 이미지 압축 사이트
4.2 Flutter web build
cd C:\Fortune_Project\Frontend
flutter build web
cd build\web
python -m http.server 5000터미널에서 쉽게 웹 빌드 먼저 해주고 포트 5000으로 잘 설정해준더
5. Nginx 리버스 프록시 설정
5.1 Nginx 설치
Nginx for Windows 다운로드
C:\nginx에 압축 해제설치는 무조건 C드라이브
5.2 Nginx 설정
설치를 잘 마치고 나면 nginx\conf\nignx.conf 파일이 있을거다
메모장을 수정해준다
?????내가 작성한거 첨부
코드를 입력하세요프론트는 5000이고 백은 8000인데 nginx를 사용하면 8080으로 통합으로 포트 1개만 열어 관리할 수 있다 개꿀
5.3 NSSM으로 Nginx 서비스 등록
Nginx도 작업스케줄러로 자동시작할 수 있지만 얘는 NSSM으로 해주는게 좋다
NSSM 설치하러 가기
최신 버전을 다운로드하고 zip파일을 원하는 곳에 압축해제한다
Nginx 서비스 등록해보자
- 명령 프롬프트를 관리자 권한으로 실행
- NSSM 폴더로 이동
cd C:\tools\nssm\win64 # 64비트 Windows용
nssm install NginxServer- GUI 창이 열리면 다음과 같이 설정
- Path: `C:\nginx\nginx.exe`
- Startup directory: `C:\nginx`
- Service name: NginxServer
- "Install service" 버튼 클릭도커도 nssm으로 설정할 수 있다는 사실을 nginx 서비스 등록하면서 알게됐다
하지만 이미 작업스케줄러로 등록해놨으니 냅두기로 한다
6. 방화벽 및 네트워크 설정
6.1 Windows 방화벽 설정
인바운드 규칙을 추가해 외부에서 내부로 들어올 수 있도록 징검다리를 잘 놔준다
제어판 → Windows Defender 방화벽 → 고급 설정
인바운드 규칙 → 새 규칙:
* 포트: TCP 8080 (Nginx)
* 포트: TCP 8000 (FastAPI)
* 포트: TCP 5000 (Flutter)
* 연결 허용, 모든 프로필 적용6.2 공유기 포트포워딩 설정
우리집은 네티스 WF2429TB로 딜라이브 거를 사용중이다
참고 : 딜라이브 네티스 WF2429 관리자페이지 포트번호 :10010
80포트는 딜라이브에서 차단하는 것 같다
처음에 80포트로 열려고 했는데 막혀서 8080으로 다시 바꿈
사용 공유기: Netis WF2429T (딜라이브 전용)
포트포워딩 규칙:
규칙 이름: (임의로 설정하면 됨)
내부 IP 주소: (내가 배포하고자 하는 노트북의 IP 주소)
프로토콜: ALL
포트번호(외부): 8080~8080 (내가 설정한 포트번호)
포트번호(내부): 8080~8080
고정 아이피로 등록: ✅ 체크하기내가 사용하는 공유기 포트포워딩에 대한 자세한 내용은 아래글을 참고
딜라이브 공유기 포트포워딩 하는 법
포트 설정하고서 잘 열렸는지 확인하려면 아래 사이트를 이용
success라고 잘 뜬다
7. DuckDNS 동적 DNS 설정
7.1 DuckDNS 도메인 생성
이제 외부에서 나의 배포 사이트 주소를 예쁘게 접속할 수 있도록 도메인을 만들자\
DuckDNS 접속 후 각자 원하는 방식으로 로그인을 해준다
도메인 생성: weenosaju.duckdns.org토큰은 어따 쓰는진 모르겠지만 일단 신경 안 써도 되고 도메인을 원하는 걸로 잘 생성해주기만 하면 된다. 아래에 글 참고
DuckDNS로 DDNS 설정하기
난 내부IP를 고정하면 유동IP가 고정되는 줄 알았다ㅎ
아무튼 DuckDNS로 도메인을 만들어주면 내 유동IP가 외부에서 봤을 때 "weenosaju.duckdns.org:8080"으로 예쁘게 보일 것이다
7.2 IP 자동 업데이트 스크립트
먼저 스케줄러를 등록하기 전에 프로젝트 파일에 duckdns를 자동으로 업데이트 시켜줄 스크립트를 작성한다
그냥 편하게 메모장 켜서 아래 글을 넣어주면 된다
위치 : C:\Fortune_Project\update_duckdns.bat (이건 내 프로젝트 파일 디렉토리)
@echo off
echo url="https://www.duckdns.org/update?domains=weenosaju&token=292537f6-9a08-4f9b-b196-272c0a371875&ip=" | curl -k -o %TEMP%\duckdns.log -K -작업 스케줄러 등록은 이전에 했던것과 같은 방식이다
작업 스케줄러 키고
이름: "DuckDNS Update"
트리거: 매일, 5시간마다 반복
동작: 위 배치 파일 실행이렇게 해주면 된다 5시간은 대강 잡은 시간텀이다
시간은 5시간으로 설정하려면 고급설정에 들어가야하는데 이 목록은 수정하기에만 있는 목록이다
그래서 일단 스케줄러 등록먼저 하고 수정하기 누른다음에 5시간으로 고급설정 탭에서 바꿔주면 끝
( 사실 이것도 안 해줘도 된다 나는 내부 IP를 고정으로 수정했으니까... 근데 뭔가 불안하고 혹시몰라서 그냥 이것도 해줬다 )
8. 로그분석
GoAccess, WSL Ubuntu
GoAccess를 사용하려면 우분투가 있어야한다
(사실 첨에 우분투 쓰기 귀찮아서 윈도우로 시작한거기도 한데)
설치과정은 아래 글 참고
GoAccess로 Nginx 로그 분석하기
여러가지 문제들
이정도로 내가 배포하면서 겪었던 대략적인 흐름을 적은 거 같다...
제일 골치아팠던 부분은 공유기 포트포워딩...
실제 공유기회사랑 내 공유기 관리하는 회사가 달라서 포트번호 찾느라 애먹었다
렌더링 느렸던 문제는 이미지 압축해서 어느정도 개선이 됐다
근데 여전히 느리긴 느리다
사람이 조금이라도 겹치면 바로 느려진다
아무래도 노트북 와이파이 환경이기도 하고
우리집 인터넷 대역폭이 좋지 않은 영향이 가장 큰 것 같다
막상 배포하고 보니 되는 줄 알았던 기능이 작동을 하지 않더라..
vs code에서 작업할 때 안드로이드 에뮬레이터로 확인을 했었는데
에뮬레이터에선 안드로이드 내부의 자체 앱이다보니 기능이 전부 지원이 됐었던 것이다
나는 웹이라 막상 배포하고 나니 웹이라 기능제한이 있던것...
그래서 이미지 공유랑 링크 공유 기능이... 이상해졌다
공유기능이 "메일쓰기"로 넘어가는 초유의 사태가 발생한다
심지어 이미지 공유도 안 돼서 하...
flutter가 밉다 아니 내가 미워...
