웹페이지 배포 방법, 서버와 클라이언트 (+ git 자격증명)
예전에 배운 내용 블로그에 다시 기록하는 중..✍
이번 포스팅에서는 웹페이지를 배포하는 방법에 대해 기록하려고 하는데, 그 전에 서버와 클라이언트의 관계를 알아야하기 때문에 그것부터 설명하고, 추가적으로 git 자격증명을 받는 방법까지 서술하도록 하겠다.
서버와 클라이언트
우리가 브라우저에서 특정 웹페이지로 이동하기까지는 우리가 모르는 수많은 과정이 존재한다.
예를 들어, 티스토리에 들어오기 위해 'tistory.com'이라는 주소를 브라우저에 입력했다고 가정해보자.
1. 브라우저는 tistory.com 의 ip주소를 찾기 위해 DNS를 조회한다.
2. DNS 서버는 tistory.com 이라는 영문 주소를 IP 주소로 변환해서 브라우저에 제공한다.
3. 브라우저가 DNS 서버에게 받은 IP 주소를 가지고 웹 서버에 http 요청을 보낸다.
4. 웹 서버는 요청받은 웹페이지를 처리하고 응답하여 관련 HTML, CSS, JS 파일을 브라우저에게 제공한다.
5. 브라우저는 웹 서버에서 받은 데이터를 해석해서 tistory.com 페이지를 우리에게 보여준다.
즉, 아래 사진처럼 웹 브라우저는 '클라이언트'로서 요청(request)하는 존재, 서버는 브라우저에게 공급(response)하는 존재가 되는 것이다.
💡 여기서 잠깐!
DNS는 Domain Name System의 약자로, IP 주소를 찾아주는 역할을 한다.
앞서 설명했듯, 유저가 도메인을 입력하면 DNS가 해당 도메인에 맞는 IP 주소를 찾아서 사이트에 연결해준다.
웹페이지 배포 원리
우리가 vscode를 이용해서 직접 만든 웹페이지는 Netlify를 통해 배포할 수 있다.
Scale & Ship Faster with a Composable Web Architecture | Netlify
Realize the speed, agility and performance of a scalable, composable web architecture with Netlify. Explore the composable web platform now!
www.netlify.com
웹페이지를 배포하는 가장 쉬운 방법은 우리가 작업한 웹페이지 관련 파일들을 폴더 형태로 netlify에 업로드하는건데..
이 방법은 아주 치명적인 단점이 존재한다.
- 단점1 - 만약 페이지에 수정사항이 발생하면, 파일을 새로 만들어서 업로드하고 예전 버전은 전부 삭제해야하기 때문에, 유지/보수가 굉장히 번거로워진다.
- 단점2 - 컴퓨터에서 프로젝트 폴더를 잃어버리면 다시 다운로드 받을 수 없어서 복구가 불가능하다.
그러므로 프로젝트 파일을 github에 push해서, github repo를 통해 서버로 업로드해서 배포하면, 파일 내용이 github에 백업되어있기 때문에 분실해도 찾기 쉽고 유지/보수도 편리하다.👍
Git 자격 증명하기
사실 지금부터 서술할 과정은, git을 최초 설치한 이후에 컴퓨터와 github repo의 연결이 잘 되었다면 굳이 필요없을 과정이지만, 살다보면 직접 자격증명을 해야하는 경우도 있을 것 같아서 기록하려고 한다.✍
1. github 오른쪽 상단 개인 페이지 아이콘 클릭하여 [settings]
2. 좌측 제일 아래쪽의 [Developer settings]
3. 좌측 [Personal access tokens]에서 tokens (classic)
4. 우측 Generate new token (classic) 클릭 후 비번 입력하면 아래 화면이 뜬다.
5. Note에 토큰 이름은 마음대로 지정 가능.
6. 유효기간은 보안이 중요하면 짧은 기간으로 설정, 갱신의 번거로움을 해소하려면 ‘없음’으로 설정.
7. Select scopes 에서 허용범위 지정 → 저장소(repo)만 전체 선택하고 [generate token]하면 발급 완료!🙌
8. [제어판 > 사용자 계정 > 자격 증명 관리자 > windows 자격 증명 > 일반 자격 증명 추가]로 들어가기
- 인터넷 주소- git:https://github.com
- 사용자 이름- github 아이디
- 암호- 앞선 과정으로 발급받은 토큰
입력하고 확인 누르면 git 자격증명이 끝난다.
웹페이지 배포 방법
프로젝트 파일을 vscode에서 add, commit, push 명령어로 github에 업로드했다면 웹페이지 배포는 아주 쉽다.
1. netlify에 로그인하고 개인 페이지의 [sites > add new site > import an existing project]
2. [deploy with github]하고 권한 허용, netlify와 github 연결하기
(github 비번을 입력하거나 github 어플로 인증코드를 입력해야 한다.)
3. github에서 가져온 저장소가 netfily에 보이면, 해당 저장소 선택하여 사이트 이름 입력후 중복확인하고 최하단 deploy 클릭하면 배포 완료!🙌
참고로 이미 배포된 사이트의 이름을 변경하고 싶다면, 해당 사이트를 클릭하고 Site configuration > Site details > Change site name에서 변경할 수 있다.
→ 이걸 어떻게 알게 됐냐면, 웹페이지형 포트폴리오 만들면서 토이 프로젝트로 가볍게 만들어 놓은 것들을 배포할 필요성을 느껴서 배포했는데, 이름을 어떻게 지어야하나 고민하다가 정말 대충 지어둠. 나중에 잊지 말고 수정해야지!😉
