프론트 배포 3번째 오류이야기이다.
저번 까지해서 assets경로에 대한 수정을 마치고 이번엔 새로운 오류가 나타났는데
GET https://www.livflow.co.kr/public/LogoText.svg 404 (Not Found)
GET https://www.livflow.co.kr/public/LogoWhale.svg 404 (Not Found)
이번 문제는 assets으로 이해도가 높아진 상태여서 좀 여러가지 해결 방안이 바로 생각이 났다.
우선 svg파일은 현재 usr/share/nginx/html에 있었다. 그니까 해결방법은 총 3개정도 있을거같다.
-
public으로 오는 요청을 html에서 찾게한다.
-
dockerfile, compose에서 빌드과정에서 public을 만들고 거기에 html파일을 마운트한다.
-
파일 경로 자체를 usr/share/nginx/html로 바꾸어본다.
-
수동으로 public파일을 만들어준다.
이렇게 방법이 떠올랐다.
차근차근 해보았는데
우선 1번은 location을 하나 추가해보았다.
location /public/ {
alias /usr/share/nginx/html/;
try_files $uri =404;
}이렇게 추가해봤는데 이상하게 퍼블릭으로 요청이 가도 퍼블릭 경로에서 파일을 계속 찾고있었다.
이렇게 1번 실패
2번을 시도해보았다. dockerfile에서 public을 만들고 거기에 dist파일을 마운트하면 이미지에서는 public에 파일이 존재하는걸 확인했지만 compose과정에서 volume build가 덮어씌워지면서
pubilc파일이 컨테이너에서는 확인 못하는 문제가 생겼다.
volumes:
build_volume:
driver: local
driver_opts:
type: "none"
device: "./dist" # 빌드된 정적 파일들이 있는 경로를 지정
o: "bind"
결국 dist파일을 html에 마운트하는데 dist파일 안에 public이있어야 컨테이너에서도 public이 생기기 때문에 이 과정을 해결하는게 더 복잡할거 같아서 2번은 넘어가기로했다.
3번은 리액트 코드를 직접확인해보고 수정해봤는데 local 에서 pulic이 있고 그걸 참고하는 코드가 있어서
<div className='flex items-center gap-5'>
<img
src='../../public/LogoWhale.svg'
alt='메인 로고'
className='animate-smoothWaveAndSlide h-[200px]'
/>
<img
src='../../public/LogoText.svg'
alt='메인 로고'
className='h-[70px]'
/>
</div> 이부분 경로를 수정하면 public이 아니라 다른데서 찾으려나? 했는데 이부분과는 상관없었다.
아무래도 local public의 경로를 참고할뿐 dist로 오면 좀 달라지는듯 하다.
그럼 이제 4번째 해결방법밖에 안남은건데
솔직히 잔머리라고밖에 생각이 안되서 안하고 싶었지만 이것도 문제 해결능력이라면 능력이라고 생각한다.
cicd과정에서 public을 추가하고 거기에 html을 마운트한다면 git action이 돌아가도
매번 퍼블릭 파일이 생기고 거기에 파일들이 존재하지 않을까 생각해서
echo ${{ secrets.SUDO_PASSWORD }} | sudo -S docker exec frontend-nginx /bin/sh -c "
mkdir -p /usr/share/nginx/html/public &&
cp /usr/share/nginx/html/*.svg /usr/share/nginx/html/public/
"이런 스크립트를 추가해보았다.
결과는 public파일이 생기고 그안에 svg파일이 전부 마운트되면서 페이지가 정상적으로 출력되었다.
이게 맞는방법인지는..모르겟지만 우선 돌아가니까!!
