[React] 웹 페이지 배포하기

새롭게 제작한 웹 페이지를 배포하게 되었다. 기존에 배포했던 경험은 Github Page를 이용해서 호스팅을 진행한 뒤, 커스텀 도메인을 연결하는 방식을 사용했다. 

 

하지만, 실무에서 이용되는 웹 페이지인 만큼 현재 가장 많이 사용되고 있는 웹 페이지 배포방법을 사용하자! 라는 생각으로 React로 만든 웹 페이지를 배포하는 다양한 방법에 대해서 정리해 보기로 했다.

 

1. Netlify

---

Netlify는 정적 웹 사이트나 앱을 무료로 호스팅할 수 있게 해주는 클라우드 플랫폼이다. 정적 파일을 저장하고 CDN(Content Delivery Network)를 통해 사용자에게 빠르게 제공된다. 또한, 서버리스 컴퓨팅 및 엣지 컴퓨팅의 서비스와 기능을 제공하여 프론트엔드의 코드와 함께, 버전제어, 구축 및 배포되는 서버리스 기능을 제공한다.

서버리스 컴퓨팅

서버리스는 개발자가 서버 또는 백엔드 인프라를 프로비저닝하거나 관리하지 않고도 애플리케이션을 설계하고 실행할 수 있는 클라우드 컴퓨팅 애플리케이션 개발 및 실행 모델입니다.

 

 

장점

• 쉬운 사용성 :  Netlify는 사용하기 쉬운 인터페이스와 직관적인 설정을 제공하고, GitHub, GitLab, Bitbucket 등과의 연동을 통해 코드 변경 사항이 자동으로 감지되고 빌드 및 배포된다. 이를 통해 개발자는 복잡한 설정 없이도 웹 페이지를 신속하게 배포할 수 있다.
• Continuous Deployment(지속적 배포) : Git과 연동되어, 변경 사항이 발생할 때 마다 자동으로 빌드와 배포가 실행된다! 개발자가 별도의 작업을 진행하지 않아도 변경사항이 실시간으로 업데이트 되기 때문에, 코드의 수정이 용이하다. 
• SSL 인증서(HTTPS) : Netlify에서 호스팅되는 모든 사이트에 대해 기본적으로 SSL 인증서(HTTPS)가 제공된다. 보안 상의 이점을 제공하며 신뢰성 있는 웹사이트 운영에 이점이 있다.

---

단점

• 서버사이드 로직 제한 : Netlify는 보통 정적 호스팅에 초점을 둔 서비스이기 때문에 서버사이드 로직을 직접 실행하기 위해서는 별도의 서비스를 사용해야한다.
• 확장성 제한 : Netlify는 작은 규모의 프로젝트나 정적 웹 사이트에 적합한 플랫폼이다. 따라서 많은 트래픽을 처리해야하는 경우에는 다른 클라우드 호스팅 솔루션을 고려해야한다.
• 복잡한 백엔드 요구사항 :  Netlify는 주로 프론트엔드의 개발과 호스팅에 초점이 맞춰있기 때문에, 복잡한 백엔드 요구사항이 있는 경우, 다른 클라우드 서비스와의 조합이 필요할 수 있다.

---

사용법

우선, 접속하면 바로 Github, GitLab, Bitbucket을 이용하여 빠르게 로그인하고 바로 배포할 레포지토리를 선택할 수 있게 되어있다. 나는 깃허브로 로그인을 진행한 후 이전에 만들어뒀던 병원 소개페이지를 배포할 예정이다. 

---

로그인을 완료한 후, 아래 표시해둔 버튼을 클릭하면, 저장소를 가져올지, 새롭게 제작할지에 대해 묻는다. 나 같은 경우는 이미 만들어둔게 있으니 import를 선택하였다.

---

이후, 어디서 저장소를 가져올지 선택할 수 있다. 본인이 가져오기를 원하는 곳을 선택하여주면 된다. 나는 깃허브를 선택하였다. 이후 내 저장소목록에서 가져오기를 원하는 저장소를 클릭한 후, 가져오도록 하였다.

---

모두 선택하고 배포하기 버튼을 누르면 아래와같이 진행중인 상황을 보여주는 화면이 나오게 된다. Production deploys 아래에 있는 버튼을 클릭하면 해당 페이지의 배포진행 세부사항과 완료를 확인할 수 있다. 

---

Open Production 이라는 버튼을 눌러보면, 배포가 잘 진행된 것을 확인할 수 있다!

장점과 단점을 고려해본 결과, Netlify는 소규모 정적 웹페이지 프로젝트에서 강점을 드러내고, 백엔드가 중요한 웹페이지에서 사용하기에는 문제가 있다고 판단되었다. 그래서 더 찾아 본 결과, Vercel을 알게 되어 추가로 알아보게 되었다.

---

 

2.Vercel

 

---

Vercel은 정적 웹 사이트, 앱을 배포하고 호스팅하기 위한 클라우드 플랫폼이다. Next.js와 같은 프레임워크와 통합되어 사용하기에 좋다. 정적 웹 사이트와 높은 수준의 서버리스 기능을 제공하고, 모든 설정을 수동으로 할 필요 없이 사용하고 싶은 소스를 정하고 배포하면 나머지 빌드 과정이나 운영은 Vercel이 모두 처리해주기 때문에 개발자 친화적이다.

 

 

장점

• 쉬운 배포 : Vercel은 Git 저장소와 연동되어 코드 변경 사항이 감지되면 자동으로 빌드 및 배포된다. 이로 인해 개발자는 복잡한 설정 없이도 빠르게 웹 페이지를 빠르게 업데이트 할 수 있다.
• 글로벌 CDN : 글로벌 CDN(Content Delivery Network)를 사용하여 전 세계 사용자들에게 최적화된 성능을 제공한다.
• 프레임워크와 통합 : Next.js, Create React App과 같은 프론트엔드 프레임워크와의 통합을 제공한다.
• 도메인 관리 : 도메인 구매, DNS설정, HTTPS 인증서 등을 손쉽게 관리할 수 있다.

---

단점

• 서버 사이드 렌더링 제한 : Vercel은 주로 정적 사이트와 서버리스 함수에 최적화되어있다. 복잡한 서버 사이드 렌더링(SSR)로직을 구현해야 하는 경우 제한적일 수 있다.
• 백엔드 기능 제한 : Vercel에서 서버리스 함수를 지원하지만, 이는 복잡한 백엔드 로직에 대한 제약이 될 수 있다. DB 연결과 같은 작업들이 복잡해지며, 다른 클라우드 호스팅 솔루션을 사용할 필요가 생길 수 있다.
• 가격 정책 : 많은 양의 트래픽을 처리하거나 고급기능을 필요로 하는 경우 추가 비용이 발생할 수 있다.
• 커스터마이징 가능성 : Vercel은 사용하기 쉽지만, 그로 인해 CI/CD 파이프라인 설정 등에서의 유연성의 부족 등의 문제가 있을 수 있다.

---

사용법

1. Vercel 계정 생성

Vercel에서 기본적으로 Github, GitLab, Bitbucket을 통한 로그인을 지원해주기 때문에, 기존 저장소에 연결할 에정이라면 해당 계정으로 로그인을 진행하면 된다.

2.배포할 프로젝트 가져오기

이후, 아래 Import Project를 클릭해, 배포를 원하는 프로젝트를 import해준다.

원하는 프로젝트를 선택한 다음, 자신이 만든 프로젝트의 Framework를 선택해준다.

 root directory는 src의 바로 상위에 있는 폴더를 선택해주면된다.

나 같은 경우는 빌드 설정에서 아무것도 선택하지 않은 상태로 바로 deploy작업을 진행해주었더니, 바로 build에 들어가고 배포 준비단계로 들어갔다. 이후 1분정도의 시간이 지난 후 배포가 완료되었다.

아래와 같이 잠깐의 시간이 지나면 배포가 완료되며, 웹사이트가 성공적으로 배포되게 된다! 정말 1분도 안걸리는 작업만에 배포가 끝났다. 

---

결과

결론적으로는 두 사이트 모두 배포에 관해서는 정말 편리하고 간단하게 진행할 수 있었다. 하지만 부가적인 서비스와 트래픽, 백엔드와의 협업을 고려한다면 Vercel을 선택해서 배포를 진행하는게 좋겠다는 결론이 나오게 되어 Vercel을 통해 배포를 진행하기로 결정하였다.

 

다양한 배포도구가 이후 더 출시되게 되면, 다시 한번 정리하는 글을 써보도록 할 예정이다.