분류 Github

내 컴퓨터에서 정적사이트를 수정 후 Vercel에 배포하기

컨텐츠 정보

본문



1. 들어가며


이제 홈페이지(정적사이트) 파일을 깃허브에서 다운 받았습니다.


깃허브와 Vercel은 정확하게 연동이 되었지만, 내 컴퓨터와 깃허브는 아직 연결되어 있지 않습니다.


그래서 간단하게 수정 후 깃허브에 연동하여 파일을 올리는 방법부터 알려드리겠습니다.



2. branch의 이해와 생성하기


push는 내 컴퓨터의 파일을 깃허브에 보낸다는 말입니다.


먼저 Git bash를 실행 후 홈페이지 파일이 있는 곳으로 이동합니다.


지난 게시물과 같이 했다면


cd ~

위 명령어로 git bash의 최상위 경로로 옮겨줍니다. 내컴퓨터의 문서폴더로 이동합니다.


cd Documents/gatsby/gatsby-starter-minimal-blog

위 명령어를 내리면 현재 윈도우 PC의 정적사이트 홈페이지 파일경로로 가는 것입니다.



위와 같이 폴더가 이동되면 됩니다.


그런데 폴더 이름 옆에 (master) 와 같이 파스텔 색의 글자가 있습니다.


이것은 현재 깃허브 저장소의 브랜치를 표시하는 것입니다.


브랜치는 한글로 나무 줄기의 '줄기'라는 느낌으로 이해하면 되는데요. 가장 메인이 되는 줄기라고 보시면 됩니다.


master는 현재 깃허브와 연동된 Vercel에서 배포되고 있는 바로 그 브랜치입니다. 그래서 master와 바로 연동하기보다는, 내 컴퓨터에서는 pre라는 똑같은 내용의 새로운 브랜치를 만들어서 수정 후 깃허브에 보내고, 문제가 없으면 pre 브랜치 내용물을 master와 같게 만들어 줄 것입니다.


제가 해보니 이렇게 작업하는게 깃허브에서도 관리하기 편하고, vercel과 연동되어 있는 이 상태에서 최선인 것 같습니다.


다시 요약하면, pre 브랜치를 만든 후 내 컴퓨터에서 파일을 수정 후 깃허브에 보내게 되면, vercel에서 자동으로 pre 브랜치를 인식하여 바로 빌드해서 보여줍니다. 그때 에러가 없으면 master와 merge(같게 만들어주는 작업)를 하는 방식입니다. 그렇게 되면 vercel에서도 pre가 master와 같게 작업해주고, 홈페이지에서 바로 반영되게 해줍니다.


이런 내용에 대한 용어의 설명은 


https://rogerdudler.github.io/git-guide/index.ko.html


https://tagilog.tistory.com/377


위 두 링크를 보면 이해가 될 것입니다.


일단 말이 길어졌으니 바로 실습으로 이해해보도록 합니다.


git branch

위 명령어를 내리면 현재의 브랜치 목록을 보여줍니다.


* master 

위와 같이 마스터 브랜치가 있고, 지금 그 브랜치에서 작업하고 있다는 것입니다.


이제 pre라는 브랜치를 만들어 줄 것입니다.


git branch pre

위 명령어로 pre라는 브랜치를 만들었습니다.


이제 pre 브랜치로 작업공간을 옮길 것입니다.


git checkout pre

위 명령을 내리면 master에서 pre 브랜치로 작업 공간을 옮깁니다.


그리고 다시 


git branch

위 명령어를 내리면 



위와 같이 master 브랜치와 pre 브랜치가 있고, 현재 pre 브랜치에 *가 있어서 작업공간이 pre로 바뀐 것을 볼 수 있습니다. 


폴더 오른쪽에도 파스텔색으로 (pre)가 있어서 현재 공간이 뭔지 알 수 있습니다.




3. 파일 생성 후 깃허브로 보내기(push)


이제 파일을 하나 만들어볼게요. 윈도우 탐색기에서 만들어도 되고, 그냥 Git bash에서 


nano test.txt

위 명령어로 test.txt을 만들어봅니다.


그리고 12345 내용을 넣고, 컨트롤 + O, 엔터, 컨트롤 + X를 누르면 만들어집니다.


이제 파일을 깃허브에 올려야겠죠?


git add test.txt

위 명령어를 내리면 


$ git add test.txt

warning: LF will be replaced by CRLF in test.txt.

The file will have its original line endings in your working directory

위와 같은 에러 같은 것이 나오는데 당황하지 않으셔도 됩니다.


아무튼 이렇게 내 컴퓨터 로컬 저장소에 test.txt 파일을 추가해줬습니다.


그리고 commit을 해줘야 합니다. 커밋은 기록한다고 생각하시면 됩니다.


git commit -m "test file"

위와 같이 넣으면 test file이라는 내용으로 기록하겠다는 말입니다.


$ git commit -m "test file"

[pre 838fc7a] test file

 1 file changed, 1 insertion(+)

 create mode 100644 test.txt

그러면 위와 같이 1개의 파일이 변경되었고, 1줄이 추가되었다고 나옵니다.


이제 pre 브랜치 깃허브에 올리면 됩니다.


git push origin pre

위 명령어를 내리면 윈도우의 경우 깃허브에 로그인하라고 뜹니다.



위와 같이 깃허브 화면이 나오고 아이디와 비번을 넣으면, 드디어 내 컴퓨터와 깃허브가 연동이 되면서 업로드가 됩니다.



위와 같이 알아서 업로드 되는 것을 확인할 수 있습니다.


이제 깃허브에 들어가서 자신의 저장소에 들어가봅니다.



위와 같이 pre라는 브랜치가 최근에 푸쉬했고,


Branch:master를 눌러보면 pre라는 branch가 새로 생긴 것을 확인할 수 있습니다.


그리고 그 pre를 눌러보면



위와 같이 커밋이 되었고, test.txt 파일도 test file이라는 기록으로 추가된 것을 확인할 수 있습니다.



4. Vercel에서 확인하기



이제 Vercel에 가서 자신의 프로젝트에 들어가보면 제일 밑에 Preview Deployments가 있고 그 밑에 새로운 내용이 생긴 것을 확인할 수 있습니다.


즉 Vercel이 pre 브랜치가 새로 생긴 것을 인식하고, 다시 빌드 한 것입니다.


왼쪽에 Deployment의 글자를 클릭하면 알아서 빌드했고, Visit을 누르면 자신의 홈페이지와 똑같은 페이지가 나온 것을 확인할 수 있습니다. 


test.txt 파일만 올렸기 때문에 내용이 변하면 안되겠죠? ^^;;



5. 깃허브에서 병합(Merge)하기


이제 이상 없는 것을 확인했기 때문에 깃허브에 가서 master와 병합할 것입니다.



위와 같이 pre 브랜치로 바꾼 후 Compare & pull request 를 누릅니다.




위와 같이 풀 리퀘스트를 열 수 있습니다. test file에는 현재 기록될 내용


밑에는 코멘트를 원하는대로 남길 수 있고, 밑에 보면 test.txt이 생성된 내용이 나옵니다.


확인한 뒤, Create pull request 를 누릅니다.



5초 정도 기다리면 vercel에서 코멘트를 해줍니다. 자동으로 배포되었고 문제가 없다는 내용입니다.


이제 Merge pull request를 누릅니다. 그 후 Confirm merge를 누르면 최종적으로 깃허브에서 pre 브랜치가 master 브랜치로 통합됩니다.



6. Vercel에서 병합 확인하기


다시 Vercel로 가봅니다.



위와 같이 Production Deployment에 pre 브랜치로 기록되었고, 밑에 No Preview Deployments라고 아까 있던 프리뷰는 없어진 것을 확인할 수 있습니다.



지금까지 했던 과정들이 앞으로 홈페이지를 수정 후 깃허브에 기록하는 방법의 총 과정이라고 생각하면 됩니다. 처음에는 말도 많고 복잡하지만, 실제로 해보면 정말 간단하고 직관적이며 편하다는 것을 알 수 있을 것입니다.


다음에는 nodejs, yarn, gatsby-cli를 깔고 node 모듈 설치 및 내 컴퓨터에서 직접 홈페이지를 구동해보겠습니다.


관련자료

  • 서명
    우성군의 NAS를 운영하고 있습니다.

    저의 즐거움이 여러분의 즐거움이면 좋겠습니다.

댓글 3개 / 1페이지
Total 7 / 1 Page
RSS
정적사이트 생성기 Gatsby를 Nginx 웹서버로 직접 배포하기 댓글 6

Gatsbyjs 1. 들어가며정적사이트 생성기를 이용하면 DB 및 PHP가 필요없기 때문에 대부분 배포 서비스를 이용할 것입니다.특히 nextjs를 개발하고 있…

정적사이트를 내 컴퓨터에 띄우고 글 작성 후 배포하기 댓글 4

Gatsbyjs 1. 들어가며이때까지 따라오셨다면(1) 깃허브 계정과 Vercel과 연결되어 자동으로 배포되어 있고,(2) 내 컴퓨터와 깃허브 계정이 연동되어 …

정적사이트 블로그 개발을 위한 도구 설치하기 댓글 5

Gatsbyjs 1. 들어가며이제 본격적으로 블로그 수정 및 개발을 할 시간입니다.nodejs, yarn, gatsby-cli를 설치할 예정입니다.2. node…

내 컴퓨터에서 정적사이트를 수정 후 Vercel에 배포하기 댓글 3

Github 1. 들어가며이제 홈페이지(정적사이트) 파일을 깃허브에서 다운 받았습니다.깃허브와 Vercel은 정확하게 연동이 되었지만, 내 컴퓨터와 깃허브는…

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

Gatsbyjs 1. 도메인 변경하기지난 글에서 우리는 이미 홈페이지를 가지게 되었습니다.그런데 대시보드에서 자신의 프로젝트를 클릭하면, 위와 같이 주소가 엄청…

Gatsby 테마 선택 후 Vercel로 홈페이지를 배포하기

Gatsbyjs 1. 들어가며제가 여러가지 방법으로 테마를 선택 후 배포(호스팅)을 해봤는데, 이 방법이 가장 빠르고 편하며, 관리하기 좋다고 생각합니다.2. …

최근글


새댓글