https로 프론트, 백을 배포하며 마주한 트러블들

해결 완료

 

프론트를 로컬 환경에서 https로 적용하기

 

mkcert로 로컬용 인증서를 만들어주고 root폴더에 가져왔다.

그리고 CRA에 기본적으로 세팅된 start 스크립트를 아래처럼 변경했다. (윈도우 환경)

    "start": "set HTTPS=true&&set SSL_CRT_FILE=cert.pem&&set SSL_KEY_FILE=key.pem&&react-scripts start",

 

 

 

github page 배포 기본 옵션

 

root 폴더의 index.html을 로드한다. 없으면 readme.md가 로드된다.

따로 빌드된 폴더가 필요하고 이를 도와주는 라이브러리인 gh-pages로 배포 완료.

자동으로 githup page배포에 맞게 빌드된 브랜치를 생성해 준다.

 

 

 

github page 배포로 인한 SPA 미지원 이슈. (새로고침시 404 오류)

 

github page를 통해서 배포했는데, 이는 CSR을 지원하지 않는다.

그로인해 새로고침시 not found로 나옴.

https://iamsjy17.github.io/react/2018/11/04/githubpage-SPA.html

https://velog.io/@summereuna/gh-pages%EC%97%90%EC%84%9C-CRA%EB%A1%9C-%EB%B9%8C%EB%93%9C%ED%95%9C-React-AppSPA-%ED%98%B8%EC%8A%A4%ED%8C%85-%ED%95%98%EA%B8%B0

위의 방법으로 해결.

 

 

 

상대경로 설정 이유 github.io/(브랜치명)

 

github로 배포를 하게되면 origin뒤에 '/[브랜치명]' 형태로 주소가 붙게 된다.

이로인해 기존 public폴더안에 두고 상대경로로 명시해둔 이미지는 로드가 되질 않는다.

 

src폴더 하위에 따로 폴더를 생성하여 이미지를 보관하고, 이를 import한 형태로 가져왔다.

public폴더가 아닌 src폴더의 하위에 들어있는 이미지의 경우는 import로 가져와야한다.

 

github page로 배포할 때 이런 방식을 유도하는 듯한 제약사항이 있어서 이렇게 수정해두었다.

 

추가로 <BrowserRouter basename="/[브랜치명]" /> 과 같이 basename을 명시해줌으로써 변경된 uri주소의 앞단에 추가된 주소를 일괄적으로 추가해줄 수 있었다.

하지만, window.location.href = '/'와 같은 옵션은 react에서 라우팅된 옵션이 아니기에 basename을 직접 기입해줘야한다.

ex ) window.location.href = '/example'  -> myaccount.github.io/example 로 링크

 

 

 

해결 중

쿠키 관리

react-cookie 라이브러리가 잘 동작하지 않는 듯하다.

cookie.get도 안되는 걸로 확인했었는데, cookie.remove도 동작하지 않는다.