배포 방법들 (w. SPA 404 페이지 처리)

1. 서버에서 직접 호스팅

2. AWS s3 + cloudfront

• Amazon S3
• 파일들을 보관하는 서비스
• js, html, css 등 파일들을 외부에서 접근 가능할 수 있게 한다
• 버킷 : 디렉터리

• Amazon cloudfront
• 외부에서 요청 받으면 해당하는 자료들을 S3 버킷에서 꺼내 제공
• 도메인 지정 가능
• 캐싱 기능
• 404에러 등 여러 에러를 해결할 수 있음
• 404 페이지 처리 : Error Pages 메뉴에서 대응 파일을 지정하고 status code를 변경

3. github pages

• github 리파지토리 > Setting > Pages에서 배포

• 404 페이지 처리 : 대응 html 파일을 해당 리파지토리 안에 404.html로 생성하면 됨

• 방법 1) username.github.io 라는 이름으로 리파지토리 생성 후 배포

• 방법 2) 그 외 리파지토리를 배포
• https://username.github.io/리파지토리이름 으로 배포됨
• custom domain로 도메인을 지정할 수도 있음(유료)
• gh-pages 라이브러리 사용하면 디렉토리가 한번에 push된다
방법1) npm install gh-pages --save-dev 실행 후 js 코드에서 함수 호출
방법2) package.json에서 아래 코드 추가 후, CLI로 배포하고 싶은 디렉토리에서 npm run deploy 실행

4. Firebase 호스팅

1. Firebase 프로젝트 생성
1. Firebase Console에서 프로젝트 추가
2. Firebase Console의 프로젝트 개요 페이지 중앙에 있는 웹 아이콘( plat_web)을 클릭하여 설정 워크플로를 시작

2. Firebase CLI를 설치 : npm install -g firebase-tools
• Firebase CLI : Firebase 프로젝트를 관리, 조회, 배포할 수 있는 다양한 도구를 제공
1. 로그인하여 인증 : firebase login
• 실행하면 localhost 페이지를 연다
2. CLI가 올바르게 설치되었고 사용자 계정에 액세스하는지 테스트 : firebase projects:list
• Firebase Console에 나열된 Firebase 프로젝트와 같아야 함

3. 프로젝트 초기화 : (루트 디렉터리에서) firebase init (hosting)
• 로컬 프로젝트 파일을 Firebase 프로젝트에 연결
• 도중에 연결할 프로젝트, 공개할 디렉토리, spa 설정 여부, github와 연동 여부 선택
• 공개할 디렉토리 안에 src, index.html 등이 들어가 있어야 함
• spa 설정으로 404페이지를 index.html로 대응할 수 있음
• 끝나면 Firebase는 자동으로 파일 2개를 생성하여 로컬 앱 디렉터리 루트에 추가함
(앞서 설정한 프로젝트 구성이 나열되어 있는 firebase.json, 프로젝트 별칭을 저장하는 .firebaserc)

4. 사이트에 배포 : (루트 디렉터리에서) firebase deploy (--only hosting)
• PROJECT_ID.web.app 와 PROJECT_ID.firebaseapp.com 라는 주소로 배포됨
• fb console에서 커스텀 도메인도 추가할 수 있음

5. Netlify

• github와 연결해서 배포. push 될 때마다 자동으로 업데이트 된다

• 한국 서버가 따로 없어서 속도가 다소 느리다는 단점이 있다

• 404 페이지 처리 : 리파지토리에 _redirects 라는 이름의 파일 생성 후 여기서 하단 코드 입력

1. New site from Git 버튼 클릭으로 사이트 추가 시작

2. github 연결

3. 배포 할 repository 선택

4. 설정
1. 배포할 브랜치 설정 (추후에 재설정 가능)
2. 이외에도 build tool 설정, serveless function 설정 가능

5. ~~~.netlify.app 으로 배포 완료. (설정에서 도메인 변경 가능)

• netlify 배포 처리 상태를 뱃지로 실시간 확인할 수 있다
• netlify에서 배포된 프로젝트 → Site configuration → (General>)Status badges 에 있는 코드를 markdown에 복붙
• 코드 ex)

6. Vercel

• 404 페이지 처리 : vercel.json 파일 생성 후 하단 코드 입력

• netlify보다 빠름, 이것도 Github와 연동 후 사용할 수 있음

• 기본으로 모든 브랜치가 배포 설정됨

1. "New Project" 클릭으로 github 리파지토리 선택

2. 요금 부과되므로 팀 설정은 skip

3. configure Project로 프레임워크 선택(없으면 other), build setting, 환경 변수 세팅 자유롭게

4. deploy 클릭 ⇒ 리파지토리이름.vercel.app으로 배포완료