프로그래머스 데브코스 TIL - Day 24 / SPA 배포

 

✅ 오늘의 학습

- SPA 배포하기 / 404 Redirect

 

 

 

SPA의 경우 index.html은 루트에 하나만 존재하고

historyAPI를 사용하여 url을 조작하는 것이기 때문에 실제 해당 경로에는 index.html이 없다.

당장 변경되는 것 처럼은 보이지만 새로고침 시 브라우저는 변경된 url의 index.html을 찾게 된다.

 

변경된 경로에 index.html이 없을 경우 404에러가 발생하지만

루트의 index.html으로 돌아가게 만듬으로써 404 에러를 막을 수 있다.

 

로컬에서는 npx serve -s를 사용하여 자동적으로 루트의 index.html에 접근하게 할 수 있었지만

배포를 하는 과정에서는 어떻게 해야 할 지 감이 잘 잡히지 않았었는데

오늘자 강의에서 SPA의 배포 과정에 대해 다루게 되었다.

 

---

 

AWS s3 + cloudfront2

 

AWS s3

데이터를 저장하고 꺼내쓸 수 있는 온라인 스토리지 웹 서비스

 

https://s3.console.aws.amazon.com/s3/buckets?region=us-east-2

 

AWS cloudfront

정적, 동적 컨텐츠를 빠르게 응답하기 위한 캐시 기능을 제공하는 CDN 서비스

 

https://aws.amazon.com/ko/cloudfront/

 

캐싱을 지원하기 때문에 S3에 저장된 컨텐츠를 직접 접근하지 않아도 되므로
S3의 비용이 감소하며, 더 빠른 응답을 지원할 수 있다.

 

cloudfront에서는 distributions 메뉴에서 배포를 할 수 있는데
아까 S3에서 만든 도메인을 원본 도메인에 입력해주기만 하면 배포등록이 완료된다.

 

 

=>> s3과 cloudfront는 직접 해보니 따라만 했을 때 약간의 오류가 발생했고

해결은 했는데 어떤 원리로 해결이 되었는지 감이 잘 잡히지 않았다..

추가적으로 알아야할 부분들이 좀 있는 것 같아서 따로 포스트를 정리할 예정이다.

 

참고블로그1

참고 블로그2

 

 

---

😸 github pages

이전에 해본 적 있었는데 그 때는 SPA가 아니였어서 간단했었는데

이번 기회에 github pages로 SPA를 배포해보게 되었다!

 

* 참고로 공개로 설정해야만 무료로 이용할 수 있다.

 

github pages를 사용하는 2가지 방법

1. jinist94.github.io 라는 repository를 생성해서 사용하는 방법

2. 다른 프로젝트에서 gh-pages 브랜치명을 사용하는 방법 (이 방법을 진행할 예정)

 

프로젝트 안에서 gh-pages 브랜치를 만들게 되면
깃헙아이디.github.io/repository name/ 에 접근하여 페이지를 확인할 수 있게된다.

 

gh-pages 세팅 방법

 

gh-pages 브랜치 생성 후 (꼭 이 이름으로 브랜치를 생성해야 함!)

npm init -y 을 하여 초기화를 해 준다.

 

  "scripts": {
    "deploy": "gh-pages deploy -d project" // project: 배포할 폴더명
  },

root경로에 project 폴더를 생성하고 그 안에 파일을 전부 담아준다.

* 폴더명은 아무거나 해도 된다.

 

gh-pages생성

npm install gh-pages --save-dev

npm run deploy // 명령어 입력 시 배포 된다.

* npm run deploy 시 자동으로 push가 되어 원격 저장소에 저장이 되고 배포가 완료된다.

* repository - settings - pages 에서 링크를 확인할 수 있다.

 

SPA로 구현했을 경우 404 해결하기

 

깃헙아이디.github.io/[repository name]/ 이기 때문에
route부분에서 url의 앞 부분을 repository 이름으로 추가해주어야 한다.

 

  this.route = () => {
    $target.innerHTML = "";
    const { pathname } = window.location;
    if (pathname === "/javascript_spa_deploy_test/") {
      postsPage.setState();
    } else if (pathname.indexOf("/javascript_spa_deploy_test/posts/") === 0) {
      const [, , , postId] = pathname.split("/");
      // 이 부분도 ,을 하나 추가했다
      
      postEditPage.setState({ postId });
    }
  };
  
  
  // index.html 부분도 까먹으면 안됨.
  <script src="/javascript_spa_deploy_test/main.js" type="module"></script>

* 일일히 다 바꾸는 것 보다는 별도의 환경 변수로 넣어서 빌드할 때 넣어주는 방식을 하는게 좋다.

 

gh-pages에서 Fallback

index.html을 복사해서 같은 경로에 404.html을 만들어주면 해결이 된다.

=> 하지만 모든 404 에러들이 404.html으로 돌아가기 때문에 따로 처리를 해주어야 할 듯 하다.

 

---

🔥 firebase

이전에 firebase RealTime database와 Authentication을 해본 적 있었지만
hosting은 처음으로 사용을 해본다.

간단하게 프로젝트를 추가하고 호스팅을 추가하면 되는 구조이며

호스팅 생성시 보여주는 CLI로 설치를 해야한다.

 

firebase 초기화

npm install -g firebase-tools

firebase login
firebase init

 

초기화 내용(사실 읽어보면 다 설명되어 있음)

? Please select an option: Use an existing project
? Select a default Firebase project for this directory: javacript-spa-test (javacript-spa-test)
? What do you want to use as your public directory? project
// firebase와 연결시킬 폴더 명
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
// SPA 설정을 해서 index.html돌리는 것에 대한 여부
? Set up automatic builds and deploys with GitHub? No
// 해당 repository에 업데이트가 생기면 자동 bulid/deploy 여부

 

초기화를 완료하면 firebase.jon이 생기는데

아래와 같이 모든 경로에서 /index.html으로 돌린다는 내용을 확인할 수 있다.

public으로 지정한 폴더명을 연결하기 때문에 해당 폴더에 파일들을 담아주어야 한다.

{
  "hosting": {
    "public": "project",
    "ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

 

세팅이 되었으니 firebase deploy을 해주면 배포가 완료되고 404에러도 발생하지 않는다!

 

---

💠 Netlify

Netlify로 Github의 repository를 가지고 와서 간단하게 배포를 할 수 있었다.

예전엔 가지고 있는 파일을 드래그해서 적용해보는 방식 밖에 못해봤었는데,

사이트를 생성하는 절차안에 환경변수를 추가할 수 있는 부분이 있었고

빌드 도구를 사용하는 경우 빌드명령 설정 또한 할 수 있었다.

 

 

Netlify에서 Fallback

 

_redirect 파일을 생성하고 아래의 코드를 추가해준다.

/*   /index.html   200

 

변경 적용하기

commit, push 후

netlify의 상단메뉴 Deploys - Trrigger deploy - Deploy site 버튼을 누르면 repository가 재배포 된다.

 

관련 문서

 

---

Vercel

 

netlify와 비슷해서 비슷한 방식으로 Deploy하면 된다.

개인적으로 배포 완료 후 나오는 폭죽 떨어지는게 마음에 들었다 🎉

 

 

root에 vercel.json 파일을 생성하고 아래의 코드를 추가해준다.

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

처음 만들 때 main브랜치로 자동으로 만들어지고

vercel 브랜치를 생성하고 파일 추가 후 push하면 자동으로 vercel의 build가 이루어진다.

 

브랜치를 vercel로 지정을 해주려면 View Domains 버튼 - Git - Production Branch 에서

브랜치를 변경해주면 된다.

 

 

---

✍ 느낀 점

 

지금까지 github이나 netlify로 간단하게 배포하는 것 밖에 몰랐었는데

이번에 다양하게 배포를 하는 방법을 알게 되었다.SPA의 404처리를 어떻게 해야하는지 과제를 하면서도 궁금함이 있었는데과제가 끝나고 바로 다음 강의에서 다뤄주셔서 감사했다!

노션 과제의 코드리뷰가 끝나면 리팩토링 및 추가 기능 구현 후 배포까지 해 볼 예정이다.