Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

전남대 FE_정서윤 6주차 과제 Step2 #69

Open
wants to merge 18 commits into
base: yunn23
Choose a base branch
from

Conversation

yunn23
Copy link

@yunn23 yunn23 commented Aug 2, 2024

github pages로 배포 진행하였습니다!

🔗 배포링크

문제점

  • 로그인 버튼을 누르면 https://yunn23.github.io/react-deploy/login 으로 나오는 것이 아닌 https://yunn23.github.io/login 으로 라우팅되어 404 페이지가 발생하고 있습니다. 새로고침시 https://yunn23.github.io/react-deploy/ 가 아닌 https://yunn23.github.io/ 로 변해 404가 뜨는 오류는 해결하였지만, 위 에러가 지속되고 있습니다. 라우팅 관련 404 에러 해결을 위해 어떤 부분을 수정해야할까요?

    • 현재 새로고침 에러 및 라우팅 에러 해결을 위해 다음 사항들을 진행한 상태입니다.
      • routes/index의 createBrowserRouter에서 BrowserRouter로 변경후 basename에 레포 이름 설정
      • public/index.html에 스크립트 추가
      • public/404.html 파일 추가
  • 배포 이후 npm run start 시 localhost 3000뒤에 /react-deploy가 붙어서 주소가 출력되면서 실행이 제대로 되지 않고 있습니다. 이를 해결하기 위해 .env로 환경변수 설정을 하여 BrowserRoute의 basename을 env로 변경하였는데도 해결되지 않습니다.

  • 배포 전 로컬에서 실행시 백엔드 api가 실행되었었는데 배포 이후에는 백엔드 서버가 동작하지 않고 있습니다.

이번 기회에 배포를 처음 진행해보면서 개발환경과 동일하게 동작하지 않다는 것을 깨닫게 되었습니다 항상 문제 해결에 도움 주셔서 감사합니다!

@taehwanno taehwanno self-requested a review August 3, 2024 00:56
Copy link

@taehwanno taehwanno left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

피드백 드려요.

public/404.html Outdated
// the correct url will be waiting in the browser's history for
// the single page app to route accordingly.
(function (l) {
if (l.search) {

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://github.com/rafrex/spa-github-pages 참고하셔서 설정하신거 같네요. 원리는 404.html 를 통해 URL을 보정하는 형태인데 현재 커밋해주신 404.html에는 15번 라인에서 알 수 있듯이 window.location.search가 항상 존재해야 실행됩니다. 참고하신 저장소에서는 404.html 내용이 https://github.com/rafgraph/spa-github-pages/blob/gh-pages/404.html 처럼 변경된 거 같으니 참고해보시겠어요?

디버깅 하실 때는 문제가 생긴 부분의 근본적인 원인이 무엇인지 먼저 찾으신 다음에 가능한 해결 방식을 탐색하는게 좋아요.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

첨부해주신 링크 에 있는 코드나 새로 push한 코드 모두 넣어보고 404 에러를 수정하려했지만 계속 헤더의 [내 계정] 클릭시 https://yunn23.github.io/react-deploy/my-account 로 라우팅되었다가, 로그인 되어있지 않아 https://yunn23.github.io/login 으로 라우팅 되어 404 에러가 뜹니다. 어떻게 수정하는게 좋을까요?

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Usage instructions의 "Copy over the 404.html file to your repo as is" 섹션 보시고 처리해주시겠어요? 커스텀 도메인을 설정하지 않았기 때문에 pathSegmentsToKeep를 1로 설정해야하는거 같구요, <BrowserRouter basename="/react-deploy" />처럼 browser router의 basename을 설정해줘야하는거 같습니다.

도구의 공식 문서에서 내 상황에 맞는 안내가 어떤게 있는지 찬찬히 살펴보시고 대응하시면 조금 더 수월하실 거에요.

@yunn23
Copy link
Author

yunn23 commented Aug 3, 2024

또, 백엔드에서 넘겨준 링크는 http여서 Mixed Content 에러가 뜨는데 이 경우 백엔드 측에 https로 구현해줄 수 있는지 여쭤봐야할까요? 현재는 mixed content 에러가 떠서 배포 링크에서는 백엔드 데이터가 보이지 않는 것 같습니다.

step1, 2를 해결하고 3, 4로 넘어가려고 하다보니 시간이 많이 소요되는점 죄송합니다.

@yunn23 yunn23 requested a review from taehwanno August 3, 2024 07:52
@taehwanno
Copy link

또, 백엔드에서 넘겨준 링크는 http여서 Mixed Content 에러가 뜨는데 이 경우 백엔드 측에 https로 구현해줄 수 있는지 여쭤봐야할까요? 현재는 mixed content 에러가 떠서 배포 링크에서는 백엔드 데이터가 보이지 않는 것 같습니다.

넵~!

Copy link

@taehwanno taehwanno left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

피드백 드려요!

public/404.html Outdated
// If you're creating a Project Pages site and NOT using a custom domain,
// then set pathSegmentsToKeep to 1 (enterprise users may need to set it to > 1).
// Otherwise, leave pathSegmentsToKeep as 0.
var pathSegmentsToKeep = 0;
Copy link

@taehwanno taehwanno Aug 4, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#69 (comment) 코멘트 참고 부탁드려요.

Suggested change
var pathSegmentsToKeep = 0;
var pathSegmentsToKeep = 1;

Copy link

@taehwanno taehwanno left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

고생하셨습니다!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

2 participants