[프로그래머스 데브코스_FE] 프로젝트 배포 방법

❗❗  데브코스 27일차 (09.07)

 

오늘은 프로젝트 배포 방법에 대해 학습했다.

프로젝트를 수행하여 해당 정보를 readme.md로 기록하거나,

블로그에 남겨도 좋지만, 제일 좋은 방법은 배포된 사이트를 함께 제출하는 방법이다.

제3의 이용자가 배포된 사이트를 이용하면서 조금 더 확실하게 느낄 수 있고,

면접관분들께도 훨씬 이해하기 쉽기 때문이다.

 

여러 클라우드배포 방법에는 여러 방법이 있지만, 다음과 같은 방법으로 배포를 하면서 각각의

장단점을 소개할 예정이다. 또한 이 중 하나의 방법을 채택하여 직접 배포를 할 예정이다.

 

배포를 진행할 프로젝트는 History API 기반의 SPA를 프로젝트로 import 경로, url, 404 처리를 개발자가 신경써줘야한다. 몇몇 클라우드 서비스에서는 자동으로 지원해줘서 생략 가능하다.

 

• EC2
• AWS s3 + cloudfront
• github pages
• Firebase
• Netlify
• Vercel

 

✏️ AWS EC2

aws 클라우드 서버에서 github에 있는 프로젝트를 연결해서 실행 -> aws 호스팅 설정 후 사용

쉽게 생각하면, 서버(리눅스 가정)에서 프로젝트를 실행하여 해당 ip주소로 외부에서 접근 가능

놀고있는 pc가 있다면 개인 서버로 구축하여 사용할 수 있다. (포트포워딩 필요)

 

장점

• 프로젝트 실행 환경(npx serve -s) 처럼 서버에서 동일하게 실행하여 개발 로직을 따로 수행할 필요가 없다.
• 이미 aws를 사용중이라면 제일 간단한 방법으로 배포가 가능하다.

단점

• 처음 aws를 사용한다면, 초기 서버 세팅이 만만치 않다. 제일 복잡하면서도 난이도 있는 방법이다.
• 과금 폭탄 주의 할 것!

 

✏️ AWS S3 + CloudFront

위의 방법은 실제 현업에서도 많이 사용되는 방식으로 속도와 안전성이 좋다.

 

Amazon S3 : 파일만을 제공하는 서비스이다. 정적인 요소 html, css, js, 이미지 등 정적인 파일만 제공을 한다.

CloudFront : S3만 사용할 경우 속도 문제(매번 요청 및 다운로드), 경로 문제로 인한 404 문제 등이 발생하기 때문에

이를 처리해주기 위해 보통 같이 사용된다.

 

S3에 배포 파일을 등록하고 CloudFront와 연동을 시켜준다. 그리고 에러페이지에 대한 처리 및 부가적인 기능들이 필요하면 설정을 해주고 배포된 url로 접속을 하여 사용하면 된다.

 

장점

• GUI환경으로 생각보다 쉽다.
• 속도와 안전성이 좋다.

단점

• 과금 폭탄 주의 할 것!

 

✏️ Github Pages

github pages의 기능을 이용하여 배포하는 방식으로, 개인 github blog 개설과 동일한 원리로 배포를 한다.

github에 있는 프로젝트 설정에서 Pages에서 배포할 branch를 설정해주면 된다.

그럼 위에 나와있는 url 주소를 이용하여 사용하면되는 방식이다.

 

장점

• 공짜이다.
• 프론트로 작업한 결과물을 간단하게 배포할 수 있다

단점

• 배포된 주소를 보면 /프로젝트명/~~ 으로 되어 있기 때문에 import 경로를 바꿔줘야한다.
• 위와 같은 문제로 History 이용시 경로 설정을 개발자가 수정해줘야 한다. 그외 에러도 직접 처리해야한다.

 

✏️ Firebase

 

구글에서 제공하는 툴이다. 다양한 API, 호스팅, DB등을 제공한다.

개인 사용자는 무료이고 일정 이상 트래픽 발생 시 유료가 된다. (프로젝트용으론 무료로 충분하다.)

 

장점

• DB, API, 호스팅 등 다양한 툴을 제공해서 여러가지 기능을 이용할 수 있다.
• github과 연동해서 변화가 생길 시 자동으로 배포기능 설정이 가능하다.
• 옵션 설정으로 경로 문제(404)까지 처리 가능하다.

단점

• CLI 기반으로 익숙하지 않은 사람한테는 조금 어려울 수 있다.

 

✏️ Netify , Vercel

둘다 비슷하다. AWS, Firebase보다 배포가 훨씬 쉽고 간단하다.

GitHub랑 연동해서 원하는 프로젝트를 선택하여 배포를 진행하면 된다.

장점

• 개인 사용자 무료
• 클릭 몇번만으로 배포가 아주 쉽게 진행된다.
• 옵션 설정으로 경로 문제(404)도 설정 가능하다.
• github과 연동해서 변화가 생길 시 자동으로 배포기능 설정이 가능하다.

 

매번 github pages로만 배포를 진행했었는데

이번 계기로 가장 간단한 배포 방법인 Netlify, Vercel 을 알게 되어 한번 사용해보고 싶다는 생각이 들었다.

하지만 뭐니 뭐니 해도 github 계정이 포함된 URL이 아닌가...

github pages가 익숙해서 이번 Notion Clone 프로젝트로 github pages로 배포를 진행했다.

자세한 배포방법은 따로 Article로 다룰 예정이다.!

 

📖 학습한 내용

• 배포방법
  
  • EC2
  • AWS s3 + cloudfront
  • github pages
  • Firebase
  • Netlify
  • Vercel