화면은 뜨는데,,, SPA 프로젝트의 가장 큰 문제,,, 그거슨 "새로고침 404"
또 한번 나는 눈물을 훔치고 마는데,,,
진짜 하루종일 배포만 잡고 있으니 누구든 붙잡고 해결해달라고 애원하고 싶었다ㅋㅋㅋㅋ,,,
그리하여 탄생하게 된 React, Vite, TypeScript 프로젝트 Azure WebApp 배포하기 시즌 2
필요없는 소스가 있을 수도 있지만 이것저것해서 페이지가 정상 구동 된다는 것이 중요하니까 ^^...!
또 다시 와라랅 적어보겠음
public 폴더에 Web.config 파일 추가
이건 chatGPT 가 알려준 내용인데 새로고침 404가 SPA의 라우팅 처리 방식 때문에 발생한다는 것은 다들 알 것이다.
이에 GPT는 일치하지 않는 모든 요청에 대해 항상 index.html 파일을 반환하도록 구성해야된다고 web.config 파일을 추가할 것을 제시했다.
web.config 는 사용자 정의 웹 서버로 특정 재작성 규칙을 사용해 프로젝트 루트에 이 파일을 추가하면, 모든 경로에 대해 index.html을 반환할 수 있다고 한다.
그리하여 작성된 파일은 다음과 같다.
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="React Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
</conditions>
<action type="Rewrite" url="index.html" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>일반 설정 수정
기존에 있던 일반 설정에 --spa 가 추가되었다.
Action Deploy 중 401 에러
찾아보니 이건 사용자 인증 문제? 같았다.
해결 방법은 깃헙 액션에 등록되어 있는 yml 파일의 publish-profile를 갱신하는 것이였다.
웹 앱에 들어가서 게시 프로필 다시 설정을 먼저 누른 후 다운로드를 받는다.
이후 다운된 파일 내용을 전체 다 복사하여 깃헙 시크릿을 들어가, 기존 있던 publish-profile에 다 넣어주면 된다. (수정하라는 뜻)
Azure에서 리디렉션 URI 설정하기
우리 프로젝트의 경우는 카카오 소셜 로그인을 사용해서 Azure에서 리디렉션 URI 를 설정해주었다.
Azure Active Directory를 상단 검색바에 입력하고 앱등록에서 내 애플리케이션을 찾아준다!
react로 만든 프로젝트여서 단일 페이지 애플리케이션을 선택했다.
별도의 다른 설정은 안했고 카카오 리디렉션에 입력되어 있는 URI를 똑같이 넣어주었다.
vite.config.js 수정
vite.config.js 파일에 base 구성 옵션을 추가해두었는데 바보 같이 제대로 모르고 설정해서 프로젝트가 경로를 잘못 찾고 있었다 ꒰(๑•᷅ﮧ•᷄ )꒱ว⊹
base 구성 옵션은 개발 및 프로덕션 모두에서 제공될 때 프로젝트의 기본 경로를 지정한다.
기존 옵션에서 base: '/'로 변경하였고 이렇게 설정하면 프로젝트가 도메인의 루트 경로에서 제공된다는 것을 의미하게 된다.
우리 프로젝트의 경우 도메인의 하위 경로가 없으므로 "/" 로 하였다.
어찌저찌 또 큰 산을 넘었다 휴 ^^;;
개발보다 배포랑 더 오랜 시간을 보낸거 같은 건 기분 탓..일까...?
(글 한번 날려먹었어서 좀 대충 쓴 감이 없지않아 있는)
아무튼 이번에도 "내가 해냄"
