Vercel에서 정적사이트 도메인 변경 및 Git 시작하기

1. 도메인 변경하기

지난 글에서 우리는 이미 홈페이지를 가지게 되었습니다.

그런데 대시보드에서 자신의 프로젝트를 클릭하면, 위와 같이 주소가 엄청나게 긴 것을 볼 수 있습니다.

우리가 원한 주소가 아니죠? ㅎㅎ

자신의 도메인을 가지고 있다고 생각하고 진행하고 싶지만... 혹시나 도메인이 없거나 테스트용으로 만들고 싶다면 무료 도메인을 생성하는 것도 좋습니다. 

당연히 .com .net .me .dev 등등 인정받는 도메인을 사는 것이 제일 좋지만 그렇지 못할 경우 무료 도메인을 추천드립니다.

무료 홈페이지 주소 받기 : https://blog.wsgvet.com/free-homepage-address-freenom

클라우드플레어 가입 및 네임서버 변경하기 : https://blog.wsgvet.com/cloudflare-sign-in-and-change-nameserver

위의 글을 보고 따라하면, 자신의 무료 도메인이 생기고, DNS등록도 편하게 할 수 있습니다.

이제 자신의 도메인이 있으니, 우리가 가진 홈페이지의 주소로 바꿔줘야겠죠?

위와 같이 View Domains를 누릅니다.

위와 같이 자신의 주소를 넣고 Add를 누릅니다.

위와 같이 A레코드를 76.76.21.21 로 바꿔주는 것을 추천합니다.

또는 위와 같이 네임서버를 

ns1.vercel-dns.com
ns2.vercel-dns.com

위와 같이 변경하는 것을 2번째 선택지로 줬는데요. 네임서버 변경의 경우 48시간까지 걸릴 수 있기 때문에 A레코드를 바꿔주는 것을 추천하는 것이죠.

이제 클라우드플레어에 가봅시다. DNS 탭을 누릅니다.

위와 같이 Add record를 누른 후 Type에는 A, Name에는 @, IPv4 address에는 76.76.21.21, Proxy status에는 DNS only를 선택 후 Save를 누릅니다.

참고로 IPv4 address는 개인마다 다를 수 있으니 자신에게 맞는 IP를 넣어줘야 합니다.

이 작업을 하면 sand.ga만 홈페이지와 연결됩니다.

그래서 위와 같이 CNAME 타입에 www를 sand.ga 로 연결해줬습니다.

이렇게되면 www.sand.ga에 대해 sand.ga로 연결시켜주는 효과가 생깁니다.

이제 클라우드플레어에서 설정은 끝났습니다. 다시 Vercel에 돌아가서 

위와 같이 Refresh를 누릅니다. 그러면 ... 이 나오면서 뭔가 작업하는 것처럼 보입니다.

1~2분 기다려도 변하지 않으면 F5로 페이지를 새로고침 해봅니다.

그러면 드디어 유효한 설정, 기본 브랜치에 연결된 것을 확인할 수 있습니다.

자신의 주소를 클릭해보면 자동으로 인증서가 생성되어 접속이 잘 되는 것을 알 수 있습니다.

(옵션 설정)

www 리다이렉트는 www.sand.ga 로 들어왔을 때 sand.ga로 돌리는 설정입니다. 그렇게 하고 싶지 않다면 안하셔도 됩니다.

아까 클라우드플레어에서 생성한 www 주소도 리다이렉스 설정을 해줘야 합니다.

위와 같이 www를 붙여서 www.sand.ga를 Add 시키구요.

그 뒤에 Edit를 눌러서 Redirect to 를 누르면 자신의 도메인 주소가 나옵니다.

그것을 클릭 후 Save를 누르면 www.sand.ga로 들어와도 sand.ga로 돌려줍니다.

다만 이 셋팅은 조금 시간이 걸릴 수 있습니다. 되는 것을 기다릴 필요없습니다. 10~20분 뒤에 www가 붙은 주소로 접속해보면 자동으로 www가 없어지는 것을 볼 수 있습니다.

이제 도메인 설정은 끝났습니다.

2. Git 시작하기

도메인까지 연결했으니 이제 본격적으로 홈페이지를 자신에게 맞게 설정하는 것만 남았습니다.

먼저 Git을 자신의 컴퓨터 환경에 맞게 다운 받습니다.

https://git-scm.com/downloads 

위 링크에서 자신에게 맞는 Git을 다운받고 설치합니다.

윈도우의 경우 Git Bash, Git CMD, Git GUI 등이 설치됩니다.

우리는 Git Bash를 쓸 것입니다. 

Git Bash를 실행합니다.

먼저 계정 설정을 해줍니다.

git config --global user.name "yourid"

yourid에 깃허브 아이디를 넣습니다.    

git config --global user.email "youremail@email.com"

youremail@email.com 대신에 깃허브 이메일을 넣습니다.

이제 Git Bash에서 자신의 깃허브 계정으로 작업할 수 있게 됐습니다.

3. 깃허브 저장소 Clone

이제 깃허브에 있는 자료를 자신의 컴퓨터로 복사합니다.

Git Bash를 실행한 뒤, 원하는 폴더로 갑니다. 

저는 탐색기에 있는 내 PC 밑에 있는 문서에 gatsby라는 폴더를 생성 후 그 밑에 복사하겠습니다.

cd ~
cd Documents
mkdir gatsby

위 명령어로 문서 폴더로 이동 후 gatsby 폴더를 생성합니다. (대문자 주의해주세요!)

cd gatsby

위 명령어로 해당 폴더로 들어갑니다.

이제 Git Bash를 실행하면 그때마다 

cd ~
cd Documents/gatsby

명령어를 내려 해당 폴더에서 작업하면 됩니다.

실제 파일들은 윈도우 탐색기 왼쪽에 보시면 내 PC가 있는데 거기에 문서를 열면 바로 보입니다.

탐색기에서 직접 파일을 열고 수정하면서 작업하면 됩니다.

-----------------------------

이제 깃허브저장소의 파일을 복사할 것입니다.

git clone 자신의깃허브저장소주소

위와 같은 명령어로 자신의 깃허브 저장소에 있는 주소의 파일을 다운 받습니다.

자신의 깃허브 저장소 주소를 잘 모르겠다면, https://github.com 에 접속 후

오른쪽 위에 자신의 아이콘(아이디?)를 클릭한 뒤, Your repositories를 클릭 후 나오는 자신의 저장소를 클릭하면

https://github.com/yourid/gatsby-starter-minimal-blog

위와 같은 형식의 주소가 인터넷 브라우저 주소창에 뜰 것입니다.

저의 경우는 

git clone https://github.com/woosungchoi/gatsby-starter-minimal-blog

이렇게 해주면 되겠죠? 꼭 자신의 주소로 수정 후 명령어를 내리세요!

주소를 복사 후 마우스 우클릭 후 Paste를 눌러야 명령어를 붙여넣을 수 있습니다.

위와 같이 복사가 된 것을 확인할 수 있습니다.

윈도우에서 실제 경로는 C:\Users\자신의윈도우계정\Documents\gatsby\gatsby-starter-minimal-blog

위와 같이 존재함을 탐색기로 확인할 수 있습니다.

이제 드디어 깃허브에 있던 자료를 다운 받았습니다.

다음 글에서는 해당 파일을 직접 개발자 빌드를 하여 자신의 컴퓨터에서 실행한 뒤, 실시간으로 수정 사항을 확인하는 방법에 대해 알려드리겠습니다.