안녕하세요 AI와 프로젝트를 진행하면서 배포를 직접 진행해봤는데 생각보다 헷갈릴만한 요소가 많았고, AI 또한 설명이 틀리거나 애매하게 알려줄 때가 은근 있어서 직접 제가 작성해봤습니다. 이 글이 도움이 되었으면 좋겠습니다.

이 글은 AI와 프로젝트를 진행하여 배포를 했을 때를 기준으로 진행되었으며, AI와 프로젝트를 진행했어도 배포 방법이 저와는 다를수도 있으며, 이 글이 정답이라고 단정 짓지말고 한번 글을 끝까지 읽어보고 참고해주세요 전 배포하는 과정에서 헷갈리거나 잘못된 설정을 하는 일이 없었으면 해서 이 글을 작성했음을 알려드립니다.

1. Vercel 로그인 및 회원가입 (요금제 결정)

AI와의 프로젝트는 블로그(자체사이트) 자동화입니다.

구글로 회원가입 및 로그인을 진행해주세요 (구글이든 깃허브든 선택입니다.)

당장 처음부터 유료를 쓰겠다 라는 생각이 아니라면 Hobby를 선택하시면 됩니다. 요금제는 추후에 전환이 가능합니다.

요금제를 선택하면 나오는 화면입니다. 저는 깃허브를 사용하니 깃허브를 눌러주겠습니다. 눌러주시면 그자리에 자신의 저장소가 뜨실텐데 옆에 Import 눌러주시면 됩니다.

2. 프로젝트 연동

들어가시면 이런 화면이 나오실텐데 Project Name 은 본인이 직접 수정해주시면 됩니다. 저는 Root Directory 에 칸을 눌러줍니다. 그럼 AI가 눌러달라고 요청한 폴더를 찾아서 눌러주시면 알아서 적용이 되는 모습을 볼 수 있습니다.

옆에 있는건 굳이 건들지 않고 하셔도 폴더를 선택하시면 자동으로 적용이 됩니다.

그 후에 Environment Variables 를 눌러주고 AI가 넣어달라고 요청한 키값을 넣어줍니다

이때, 저는 중요한 비밀 키 같은건 넣지않고 공개해도 되는 값만 넣었습니다.

AI가 여기에다 Key와 Value 를 넣어달라고 할겁니다. 요청대로 갯수만큼 채워주면 됩니다. 다 채운 후 add more 버튼 눌러주시면 몇개든 추가할 수 있습니다.

전부 다 추가했으니 Create Project 누릅니다.

그러면 이런 화면이 나올텐데 supabase 는 제가 사용하는 저장소입니다 AI와 의논하여 add하지 않기로 하고 바로 Deploy 눌러주세요

필요하신 분들은 add 눌러도 됩니다. 저는 굳이 연결하지 않아도 되서 안했습니다.

그러면 축하합니다 ! 문구가 뜨면서 프로젝트를 계속할지 물어보는 듯한 화면이 뜹니다. 맨 아래에 있는 '프로젝트 계속하기' 버튼 눌러줍니다.

3. 연동 후 할 일

이제 이런 화면이 뜨고 배포가 끝난건가? 싶지만 아니었습니다. 설정하고 또 다른 값들을 넣어줘야 했습니다. 여기서부터 은근 헷갈리기 시작합니다.

왼쪽 카테고리 맨밑에 Settings -> Environments 에 들어가 중앙 화면에도 Environments 가 있을겁니다. 거기서 Production을 클릭해줍니다.

여기 들어가면 main으로 되어있는데 저는 production으로 바꿉니다. AI의 제안이기도 했고, 이렇게 하면 제가 승인해야만 공개 사이트에 적용된다는 이점 때문에 이 방식을 골랐습니다.

간단하게 말하면 공개 사이트가 저의 승인이 있어야만 바뀝니다.

그 후 Settings 에서 나와서 Environment Variables 카테고리로 들어갑니다. 그 후 중앙화면은 신경쓰지말고 맨 아래 체크박스가 있어요 그걸 체크합니다. (여기서 AI는 Settings 로 들어가라고 안내해서 혼란스러웠습니다..)

중간에 가려진 값들은 나중에 추가하게 되는데 그건 다음편에서 다루겠습니다.

운영 브랜치를 Production으로 바꾸려면 저장소에 production 브랜치가 미리 있어야 합니다. 제 프로젝트는 AI가 미리 만들어 뒀습니다. 그리고 바꾼 뒤에는 Deployments에서 Create Deployment를 눌러 production 브랜치로 배포를 한 번 해 줘야 Production 배포가 생깁니다.

그러면 이렇게 배포가 되는걸 확인 됩니다. 보시면 Preview 와 Production 으로 배포가 나뉜걸 볼 수 있습니다.

Preview 는 확인용 배포이고 Production 는 배포와 동시에 실제 사이트 적용까지 됩니다.

지금은 이렇게 방문자가 쌓이고 있습니다. 무료 플랜이어도 바로 사용가능합니다. 방문자 수도 확인 가능해요

물론 이게 그냥 되는건 아니고 자신의 프로젝트에 이거에 대한 코드가 있어야하고, 통계창을 들어가서 Enable 버튼을 눌러줘야 자료수집을 시작합니다.

프로젝트 쪽 코드는 AI가 진작에 넣어뒀었습니다.

하나 참고하실 점은 환경변수를 바꾸면 다시 배포해야 적용이 된다는 점인데 이 점 또한 AI가 안내해줍니다. 위에 체크박스도 마찬가지입니다. 반드시 재배포를 해주셔야 해요 이거 또한 다음편에서 다뤄보겠습니다.

지금까지 Vercel 배포를 어떻게 했는지를 작성해보았습니다. 이 글이 적어도 도움이 되었으면 좋겠습니다. 다음편에서는 좀 더 헷갈리는 부분들이 있는데 자세하게 글 작성해보도록 하겠습니다.

추가로 이메일 설정이 꼬여서 배포가 막혔던 일이 있었는데, 그 이야기는 배포하자마자 만난 문제 두 가지에 적어 두었습니다.

다음편 주제는 도메인 및 사이트 주소 변수, 구글과 네이버 등록 까지 다뤄보도록 하겠습니다. 감사합니다