Intro
cdn 서비스를 연동해보고 싶다는 마음에서 어쩌다 netlify 배포까지 왔는지를 적는다.
왜 netlify를 사용했는가?
기존에도 남들이 볼 수 있도록 나만의 사이트를 만드는 것이 목표였다.
처음에는 많이 쓰이는 aws를 사용했다.
무료라곤 하지만 사람이 살다 보면 aws 존재를 가끔 잊는데 그러다 보니 달마다 돈이 야금야금 빠져나가서 중단했다.
무료면서 배포 단계가 쉬운 방법이 없을까?
개인적으로 cafe24 호스팅도 해봤는데 (https://velog.io/@jinvicky/cafe-24에-리액트-프로젝트-배포하기)
front-end 위주로 올릴 것이라면 netlify를 강력 추천하고 싶다.
- Cafe24는 1년 호스팅을 위해 약 1만원을 지불했는데, netlify는 무료이다.
- 따라하기 아주 쉽다. 심지어 기본적으로 main에 푸시될 때마다 자동 배포가 된다!
netlify로 어떻게 배포를 했는가?
netlify를 배포하나? 아니면 netlify lambda function을 배포하나?
람다 함수 배포 삽질해봤는데 결국 lambda function은 sqlite3 사용에 없어도 된다는 거.
1. netlify 회원가입을 한다.
https://velog.io/@easyxxu/React-netlify-배포하기
회원가입과 github 프로젝트 선택 후 deploy하는 과정을 미리 봐두면 좋다.
난 빌드 명령어에 CI = 추가하지 않고 npm run build 만으로 가능했음.
2. 프로젝트 개발을 하고, github에 프로젝트를 올린다.
이 내용은 추후에 별도 정리 예정이다. sqlite3를 쓰는 것이 목표였는데,
과거의 내가 뭘 잘못 알아서 next.js를 써야만 sqlite3가 가능한 줄 알았다;; (당연 아니다)
주말 반나절, 구상, 월요일 반나절.. 등으로 3일에 걸쳐서 블로그 인덱스 페이지만 만들었다.
망할 절대 경로 alias 이슈를 또 겪었어서, 나를 멕인 include 속성도 따로 또 적어야겠다.
3. netlify에서 github과 연동해서 프로젝트를 배포한다.
이 부분 별로 할게 없었는데, build 명령어만 npm이냐, yarn이냐 따라서 달리 설정해주면 되기 때문이다. 나의 경우 npm run build를 입력함.
이슈를 하나 말해보면 sqlite3 의 db파일 연동?
sqlite3는 DB를 파일로 관리한다
이 친구는 관계형 DB 그런것이 아니라서 별도의 서버가 필요하지 않지만,
.db 파일에 테이블 관련 데이터를 계속 덮어쓰는 구조인데, 이것을 프로젝트 빌드 시 인식하지 못하는 이슈가 있었다.
원인
내 .db의 경로를 인식하지 못함.
해결
src 폴더 내부에 db 폴더 등을 하나 만들고 내부에 .db 파일을 위치시킨다.
// pages/api/users.js
import sqlite3 from "sqlite3";
import { open } from "sqlite";
// 데이터베이스 연결을 여는 함수
async function openDb() {
return open({
filename: "src/db/my-database.db",
driver: sqlite3.Database,
});
}(next 프로젝트를 만들 때 src 폴더를 만들어 내부에 폴더를 넣을 것인지, src 폴더 없이 갈 것인지 선택할 수 있다. alias 설정할 거 생각하면 먼저 고려하고 들어가야 한다.)
회고
다시 생각해보니 위치는 관계없고 그냥 내가 헤맨거 같은데
netlify 선택 시, 장단점은 무엇인가?
무료라고 하지만 한계가 어디까지인지 의심해봐야 한다.
netlify의 경우 월별 총합 배포시간을 한정해두고 있다. 또한 용량이 크다면 netlify는 좋은 선택이 아닐 것이다.
Outro
실제 배포 결과물입니다.
https://jinvicky-commission.netlify.app/
