ep.02) 비개발자의 Vercel 배포 생존기 (feat. 내 맥북을 배포할 뻔한)

📌 소개

저번에 작업하던것을 이어서 * * *
안녕하세요 노션 덕후 타타입니다
---
(ep.1 참고) 노션에 있는 데이터를 가지고 웹사이트에서 이름과 연락처 비밀번호를 입력하면 실시간으로 "내 자료만" 조회할 수 있는 페이지를 만들길 원하시는 의뢰자분이 계셨습니다
---
저번에 로컬에서 페이지까지는 얼추 만들었고 이제 배포해서 1차 컨펌을 받아야 해서 해봤는데요... 좀 .. 뭔가 쉽진 않았던것같은데 그냥 부끄러워도 공유해볼게요 ㅎ_ㅠ
제가 쭉 제미나이랑 작업을 해서 이번 사례글은 그 친구에게 지금까지의 대화를 사례글로 요약해달라고 해보았습니다!

강조하지만 전 정말 비개발자에 아무것도 모르는 사람이라서 개발자분들은 이 글이 좀 어이없을지도 모르겠습니다.. 예 ...(꾸벅)

📌 진행 방법

사용 도구: Anti-gravity/Gemini/Vercel

1. Vercel 배포 시도 및 오류
자신만만하게 시키는대로 다 했는데, 사이트 디자인이 다 깨지고 "Cannot GET /" 에러만 떴습니다. 제미나이 말로는 Vercel 서버가 제 파일들(CSS, JS) 위치를 못 찾고 헤매는 경로 지옥에 빠진 거래요

ALT

한국인

2. 해결책: (강제 지정) AI를 갈궈서(?) 프로젝트 구조를 Vercel 표준인 public 폴더 방식으로 싹 뜯어고치고, 서버가 딴짓 못 하게 코드로 강제 지정을 해버렸다고합니다.

[💡 해결에 결정적이었던 프롬프트]

"Vercel에 배포하니까 또 'Cannot GET /' 에러가 떠. 서버가 정적 파일 위치를 못 찾고 헤매는 것 같아. server.js 파일에 코드를 추가해서, 루트 경로('/')로 접속하면 무조건 public/index.html 파일을 보내주도록 '강제 지정' 해줘."

[💻 AI가 짜준 핵심 코드 (server.js)]

// 핵심은 이겁니다. 서버가 길을 잃지 않게 'index.html'을 강제로 쥐여주는 것!
app.get('/', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

🛠️ [번외] 개발자분들을 위한 기술 요약 (by Gemini)

(전 잘 모르지만... 제미나이가 이번 배포의 핵심은 이 3가지라고 꼭 적어달라네요!

1. 프로젝트 구조 개편: HTML/CSS 파일이 섞여 있던 걸 public 폴더로 격리해서 Vercel이 인식하게 함.

2. 서버 사이드 라우팅: express.static과 res.sendFile을 사용해 루트 경로 접속 시 index.html을 강제로 띄우게 설정.

3. 환경 변수 관리: 노션 API Key 같은 중요한 정보는 코드에 안 적고 환경 변수(.env)로 빼서 보안을 챙김.
   

📌 결과와 배운 점

1. 결과: 드디어 성공!
새벽 2시, 드디어 접속에 성공했습니다.
노션 DB랑 실시간으로 연동돼서 아주 잘 돌아갑니다. (속이 다 시원합니다!)

2. 🚨 시행착오
(잘 모르면 하나 할 때마다 무조건 물어보자......특히 쎄할때)
배포하다가 약간 조심해야겠다 싶었던 순간이 있습니다
무조건 시키는대로 yes누르고 허용 누르고 하게 되는 때가 있었거든요
AI(제미나이)가 시키는 대로 터미널에 명령어를 입력했는데, 이 녀허석이 프로젝트 폴더로 들어가라는 말도 없이 다짜고짜 vercel을 치라고 했거든요? 그래서 아무 생각 없이 명령어를 쳤는데,

? You are deploying your home directory. Do you want to continue? (y/N)
(해석: ? 너 지금 너 맥북 (홈 디렉토리) 전체를 배포하려는 거야. 진짜 할 거야? ㄹㅇ? )

저는 안그래도 불안해서 하나 할때마다 제미나이한테 캡쳐로 보여줘가면서 작업하거든요
뭔가 쎄해서 보여줬더니 얘가 진짜 호들갑떨면서
🚨 멈추세요!!! 절대 y나 Enter 누르지 마세요! 🚨 이래버리는 것...
알고 보니 제가 **홈 디렉토리(~)**에 서 있었고, 여기서 y를 눌렀다면 제 맥북에 있는 바탕화면, 다운로드 폴더, 개인 파일들이 싹 다 서버로 올라갈 뻔했습니다.

어쨌든 바이브 코딩도 너무 시키는대로 다 한다기보단 내가 코딩에 대한 지식이 잘 없다면 중간체크를 꾸준히 하면서 컨트롤 s 하듯이 계속 물어보고 하는게 안전할 것같더라고요 (이렇게 공부를 시작합니다)

📌 그래서 뭘 만들었느냐

https://illab-help.vercel.app/

🔑 더미데이터로 로그인해보기

저도 이번 작업을 하면서 Supabase에 대해 알게 되었는데요!
가벼운 작업이나 노션 연동을 원하시는 의뢰 건은 기존처럼 노션 기반으로 해드리고,
제가 직접 의뢰를 받는 페이지는 Supabase를 쓰는 게 훨씬 낫겠다 싶더라고요.

저 같은 비개발자도 이렇게 뚝딱거리면서 직접 만들어 볼 수 있다는 게, 여튼 한 번 더 감사한 일인 것 같습니다...! 앞으로도 재밌게 가지고 놀면서 사례글 적어볼게요. 후후.....

앞으로의 계획

일단 모바일은 아직 좀 덜 만들어진거같아서 그 쪽 더 손보고,,, 스근하게 사용하도록 전달 후에
저는 노션 작업 의뢰 받는 페이지를 제작 하도록 하겠읍니다....