[Day 24] 프로젝트 배포

Project Deploy

프론트엔드 프로젝트를 배포해서 서비스를 해주는 곳은 많다.

기본적으로 history API 기반의 SPA를 배포하려면 해당 서비스에서 404에러에 대해 처리할 수 있는 옵션이 필요하다. 

 

🔎 SPA에서 뒤로가기, 새로고침 시 404 Not Found

404에러는 SPA(Single Page Application)를 사용하면 발생하는 문제이다.

SPA는 일반적으로 웹 브라우저에서 액세스 할 수 있는 하나의 색인 파일(index.html)만 사용하는데 사용자가 새로고침 버튼을 누르거나 하면 url에 해당하는 html 파일을 찾으려고 한다.

예를 들어서 https://.../posts/18에서 새로고침을 하면 https://.../posts/18/index.html을 찾으려고 하는 것이다.

하지만 응용 프로그램이 SPA이므로 웹 서버는 파일을 검색하지 못하고 404 메세지를 사용자에게 반환한다. 

 

서버에 직접 호스팅하기

🔎 서버에 웹 사이트 호스팅하기, 🔎 생활코딩 - 웹 호스팅 github pages

인터넷에 연결된 컴퓨터를 호스트라고 한다.

이 컴퓨터의 역할은 웹 사이트를 보고 싶어하는 인터넷 상의 사용자에게 웹 페이지를 제공하는 것이다.

이런 컴퓨터를 빌려주는 사업을 호스팅이라고 하며, 웹 서버를 전문적으로 빌려주는 비즈니스를 웹 호스팅 업체라고 부른다. 

 

서버에 직접 호스팅하는 방식은 자유도가 높지만 인프라 지식이 많이 필요하기 때문에 난이도가 높다. 

 

여러 클라우드 업체에서 서버에 직접 호스팅하는 방법을 제공한다.

EC2, Google Compute Engine, Azure, Naver CLOUD PLATFORM, CAFE24, iwin, ORACLE CLOUD 등

이러한 서비스는 가상 서버를 호스팅 받아서 사용하는 것이기 때문에 요금이 발생한다.

 

AWS S3 + CloudFront

S3(Simple Storage Service)는 파일(html, css, js img 등)을 저장하는 서비스이다.

버킷을 생성하여 사용할 수 있는데 버킷은 일종의 폴더라고 생각하면 된다.

 

Amazon CloudFront란 무엇입니까? - Amazon CloudFront

CloudFront는 .html, .css, .js 및 이미지 파일과 같은 정적 및 동적 웹 콘텐츠를 사용자에게 더 빨리 배포하도록 지원하는 웹 서비스이다.

CloudFront는 엣지 로케이션이라고 하는 데이터 센터의 전 세계 네트워크를 통해 콘텐츠를 제공한다.

CloudFront를 통해 서비스하는 콘텐츠를 사용자가 요청하면 지연 시간이 가장 낮은 엣지 로케이션으로 요청이 라우팅되므로 가능한 최고의 성능으로 콘텐츠가 제공된다.

 

실전 Amazon S3와 CloudFront로 정적 파일 배포하기 | Amazon Web Services

 

클라이언트가 S3 콘텐츠에 직접 접근하지 않고 CloudFront를 통해 접근할 때의 이점

• 콘텐츠 캐싱을 통한 s3 부하 감소
• 엣지 로케이션을 통한 응답 속도 향상
• 콘텐츠 보안 유지

CloudFront는 404페이지 문제를 해결해준다. (설정 필요)

 

GitHub Pages

GitHub Pages의 가장 큰 장점은 무료라는 점이다.

 

배포를 하는 방법은 크게 두 가지가 있다.

• [유저 이름].github.io라는 레포지토리를 만드는 방법
• gh-pages라는 브랜치를 만들어서 사용하는 방법 → [유저 이름].github.io/[레포지토리 이름]으로 배포가 된다.

 

Firebase

Google의 Firebase는 애플리케이션 개발을 위한 API, DB, 호스팅, 데이터 분석 등 다양한 도구를 지원해주는 툴이다.

개인 사용자는 무료이지만 트래픽이 일정 이상 되면 비용이 발생한다.

 

Netlify

Netlify를 사용하면 배포가 아주 쉽고 간단해진다. 

개인 사용자는 무료로 이용할 수 있다. 

단, Netlify가 사용하고 있는 서버에 한국이 없어서 사이트 접속이 느리다는 단점이 있다. 

 

404에러를 해결하기 위해서는 _redirects라는 파일을 넣어주면 된다.

/*   /index.html   200

How to Create Better Redirect Rules for SPAs with Netlify

 

Vercel

Vercel도 Netlify와 유사하게 배포가 아주 쉽고 간단하다.

또한, 한국 서버가 있기 때문에 Netlify보다 사이트 접속이 빠르다. 

 

404에러를 해결하기 위해서는 vercel.json 파일을 넣어주면 된다. 

{
  "routes": [{ "src": "/[^.]+", "dest": "/", "status": 200 }]
}

Deploy SPA with react-router to Vercel

 

---

출처: 프로그래머스 프론트엔드 데브코스 

[Day 24] VanillaJS를 통한 자바스크립트 기본 역량 강화 II (1)