[사진블로그 제작기 -1] vercel 템플릿 사용하기

소연·2024년 2월 17일

Vercel next.js

기술 리뷰

목록 보기

5/5

개요

사람들이 올린 다양한 next 프로젝트 템플릿들을 사용해서 vercel로 간단하게 배포까지 할 수 있다는 사실을 알게됐다.

그래서 평소에 만들어보고 싶었던 사진블로그 템플릿을 찾아보고 배포까지 해본 과정을 기록한다.

과정

마음에 드는 템플릿 찾기

템플릿 제작자가 만들어둔 README 읽고 그대로 따라하기

템플릿 제작자가 READ ME를 친절히 작성만 해뒀다면, 크게 어렵지 않다.
그러나 처음 하다보니 vercel에서 환경변수 설정, CLI로 배포하는 일들이 낯설어서 헤맸다.

마음에 드는 템플릿 찾기

https://vercel.com/templates/next.js/photo-blog
템플릿 구경하다가 마음에 쏙드는 사진 블로그 양식을 발견했다.
(사진 메타데이터들이 함께 업로드 되는 모습이 왠지 프로페셔널한 사진블로그처럼 보이게 해준다.)

템플릿 명은 Photo Blog with Admin Panel이라고 한다. framework와 css 라이브러리 종류, database 등 해당 템플릿을 구성하고 있는 스택이 간단히 적혀있다.

리드미 따라하기

github에서 클론한 다음에 각자 배포하는 방식일 줄 알았는데 그냥 위 이미지에서 deploy 버튼 하나만 누르면 거의 모든게 끝났다. deploy를 누르면 다음의 단계를 거쳐서 배포를 할 수 있다.

1. 자신의 git 레포 만들기

2. Add Storage

본 사진 블로그는 storage가 두 개 필요한 것 같은데 두가지 모두 무료 trial로 계정당 하나 생성 가능했다.

3. 환경변수 등록하기

생성된 vercel 프로젝트 > Settings > Environment Variables에서 프로젝트 환경변수를 추가할 수 있었다
이 프로젝트의 경우 수동으로 등록해주어야 하는 환경변수는 총 다섯가지였다.
ADMIN_EMAIL, ADMIN_PASSWORD, NEXT_PUBLIC_SITE_DOMAIN, NEXT_PUBLIC_SITE_TITLE, AUTH_SECRET
어드민 페이지가 포함된 템플릿이라 환경변수로 내가 로그인할 어드민 계정을 지정해줘야 했음. 나머지는 왜 필요한건지 아직 잘 모르겠다..

4. vercel CLI에서 배포하기

리드미에는 3번까지만 설명이 나와있었는데, 필요한 환경변수를 모두 등록해도 페이지가 배포되지 않아서 당황했었다. 근데 알고보니 따로 배포 작업을 해주긴 해야했었다. 방법은 크게 두가지가 있는데, 1번에서 생성한 레포에 push를 하거나, vercel CLI로 배포하거나 둘 중 하나였다. 나는 두 번째 방법으로 진행했다.
sudo npm install -g vercel
vercel login
> login to Vercel github
----------------------------
git clone [내 레포 주소]
cd [프로젝트명]
vercel --prod

내 로컬에 vercel이 깔려있지 않았기 때문에 우선 vercel을 설치하고 로그인하는 작업부터 진행했음. 그리고 내 프로젝트로 이동해서 vercel --prod하면 배포 완료이다.

결과물 + 벌써 한도초과 😇

https://phozign-sozign-soyeons-projects-5324a232.vercel.app/
템플릿은 정말 맘에 든다. 영어밖에 안되지만 태그도 달 수 있고, 사진 올리면 자동으로 메타데이터들이 등록됨. 뷰도 grid, scroll 조정할 수 있고 사진 올리는 것도 admin 페이지에서 편하게 가능!