Vercel을 통해서 클라이언트 배포 연습하기

초짜의 개발 공부·2021년 9월 28일
0

vercel

목록 보기
1/1
post-thumbnail

빌드


웹 앤은 정적 웹페이지와 AJAX기술덕에 점점 규모가 커지고 고도화되기 시작했다. 이러한 큰 파일들을 이루기 위해서는 모듈화로 이루어져 있다. 사용되는 모듈이 엄청 많은데 하나로 묶어주는 작업을 번들링(bundling)이라고 한다. 하지만 브라우저에서 자체적으로 해석이 불가능하기 때문에 브라우저가 해석할 수 있도록 만들어주는 작업들을 수반하다.
이러한 과정을 "소프트웨어 빌드" 라고 하고 소스코드를 실행 가능한 결과물로 변환하는 작업을 뜻한다.
빌드 과정은 배포에 필수적이라고 하며 다양한 빌드 툴이 있다.


빌드 툴


모듈을 설치하면 자동적으로 깔리지만 그래도 기본적인 역할을 알아둬야 나중에 수정할 때 문제를 착아낼 수 있다.


  • webpack: 모듈 번들러
  • babel: TypeScript, JSX 등과 같이 브라우저가 지원하지 않는 언어를 JavaScript로 바꿔주는 컴파일러
  • ESLint: 자바스크립트 Code convention 및 문법 검사기
  • Sass, less: CSS Preprocessor



빌드를 통해 만든 정적 파일이 웹을 통해 제공하기 위해서는 정적 파일을 제공하는 웹 서비스가 필요하다. 그 중 정적 파일을 제공할 수 있도록 서버의 공간을 대여해주는 서비스를 호스팅 서비스라고 부른다. (동적 웹사이트나 API서버를 제공하려면 별도의 클라우드 컴퓨팅 서비스가 필요하다.) 이번 시간은 클라이언트 웹 앱만 배포할 것이기 때문에 호스팅 서비스를 이용해 본다.



다양한 웹 호스팅 서비스


  • Amazon Web Service (AWS) S3
  • Google Cloud Storage
  • Vercel
  • GitHub Pages
  • Netlify
  • Heroku



Vercel를 이용해서 클라이언트 배포하기


vercel은 아주 편리한 호스팅 서비스인다. 깃헙과 같은 코드베이스를 연결하여 바로 빌드를 실행할 수 있고 원클릭으로 끝낼 수 있다.


1. 제일 먼저 회원가입을 해준다.
지난 시간에 한 번 해보았기 때문에 배포 기록이 남아있는 상태이다.



2. New project를 클릭해서 원하는 깃헙 레포를 선택한다.
바로 import를 눌러 주면된다.
(깃헙아이디로 로그인해서 깃헙과 연결된 레포를 이용해서 연습해보려고 한다.)



다른 계정을 선택해도 된다. 원하는 레포를 import를 누르면 다음과 같은 화면이 뜬다.


3. 팀을 만들어도 되고 개인으로 할 거면 스킵해주면 된다.


4. 리액트로 만든 파일이기 때문에 Framework는 Create React App을 선택한다. build command는 빌드에 필요한 CLI 명령어를 뜻하는데 기본값으로 설정되어 있어서 따로 설정하지 않고 넘어가고 맨 아래에 Deploy버튼을 누르면 된다.


아래의 사진을 보면 콘솔 창에 많은 요청이 오는 것을 확인할 수 있다.




Congratulation 이라는 문구와 함께 성공적으로 배포가 됐다는 것을 확인할 수 있다. 이제 go to Dashboard를 눌러서 도메인을 확인하자.



1) DEPLOYMENT를 클릭해, 배포 현황과 관련된 CLI 출력을 볼 수 있다.
2) DOMAIN을 눌러, 실제 배포된 URL에 접속할 수 있다.
3) STATE를 통해 현재 배포 상태에 대한 확인이 가능하다.



그럼 도메인에 접속해보면 배포된 사이트를 확인할 수 있다. Vercel는 정말 몇 분만에 빠르고 간편하게 빌드를 체험하게 해주었다.


0개의 댓글