TIL 44: [배포] 클라이언트 빌드와 배포

동적 웹사이트와 정적 웹사이트

이 부분은 이전에 한 번 학습했던 부분인데요! 두 사이트의 주요 차이점은 '어디서 렌더링이 되느냐' 입니다. 동적 웹사이트는 Server Side Rendering을 통해 생성되는 사이트입니다. 정적 웹사이트는 Client Side Rendering을 통해 생성되는 사이트입니다. 동적이라는 단어 때문에 동적 웹사이트가 더 발전된 형태처럼 보일 수 있겠지만, 브라우저의 발달과 AJAX기술이 보편화 되면서 정적 웹사이트가 더 고도화되고 있습니다. 따라서 어떤 웹사이트를 구현하려고 하는지에 따라 동적/정적 웹사이트를 적합하게 사용하면 될 것 같습니다.

 

웹 어플리케이션을 웹에 노출시키는 작업을 말합니다. 로컬 환경에서 개발한 코드를 실제 서비스로 만들기 위해서는, 빌드와 이를 웹에 노출시키는 배포 과정이 필요합니다. 빌드를 통해 만든 정적 파일이 웹을 통해 제공(serve)되려면, 이러한 정적 파일을 제공하는 웹 서버가 필요합니다. 

 

빌드 

소프트웨어 빌드는 소스코드를 실행 가능한 결과물로 변환하는 작업을 말합니다. 빌드의 장점을 다운받아야하는 용량의 크기를 줄일 수 있다는 점입니다.Create React App으로 만든 프로젝트의 경우에는, react-scripts라는 모듈을 사용해서 빌드할 수 있습니다. npm build 명령어가 포함된 package.json 파일을 통해 가능합니다. 또는 Next.js라는 프로젝트 생성 툴이 존재하는데 next 모듈을 사용해서 빌드가 가능합니다. Next.js는 CSR과 SSR의 장점 위주로 모아놓은 Hybrid입니다. 프로젝트 생성 툴은 내부적으로 아래와 같이 다양한 툴의 조합으로 이루어져 있습니다. 아래 그림과 같이 webpack이라는 모듈번들러를 통해 index.js, util.js, Lodash, Babel, Sass 등을 묶어서 사용할 수 있습니다.

 

배포

웹 어플리케이션을 웹에 노출시키는 작업을 말합니다. 일반적으로 웹 서버라고 하면 웹 서비스를 제공하는 모든 종류의 웹 서버일 수 있으나,  특별히 정적 파일을 제공할 수 있도록 서버의 공간을 대여해주는 서비스를 호스팅 서비스라고 부릅니다. 호스팅 서비스는 단순 파일을 웹에서 접근 가능하게 해줍니다. 현재 다양한 웹 호스팅 서비스들이 있습니다. AWS, Google Cloud Storage, Vercel, Github Pages 등이 있습니다. 이번에는 코드 연결, 빌드, 배포까지의 과정을 매우 단순하게 만들어주는 Vercel을 이용하여 실습을 해보았습니다. Vercel이 단순한 이유는 GitHub와 같은 코드베이스(저장소)를 연결하여, 즉시 빌드를 실행하고, 배포까지 원클릭으로 할 수 있다는 점 때문입니다. 실제로 배포는 Vercel 서비스 내에서 이루어집니다.그리고 일정을 살펴보니 섹션3에서는 Infrastructure 자체를 제공하는 AWS를 통해 빌드 배포를 하는 것 같았습니다.참고로 동적 웹사이트나 API 서버를 제공하려면 별도의 클라우드 컴퓨팅 서비스가 필요합니다. 

 

Vercel 배포 완료 화면