배포 방법들 (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 실행

"scripts": {
  "deploy": "gh-pages -d build"
}

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 라는 이름의 파일 생성 후 여기서 하단 코드 입력

/* /index.html 200

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)

[![Netlify Status](https://api.netlify.com/api/v1/badges/e3642800-5bdb-4097-b089-0ea3a4e67431/deploy-status)](https://app.netlify.com/sites/dreamy-concha-f7c48b/deploys)

6. Vercel

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

{
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ]
}

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

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

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

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

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

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