[25.02.10 월요일]
개인프로젝트 6일차 배포!
튜터님이 정말 옵션 하나하나 설명하며 친절하고 상세하게 알려주셨는데...
마치 수업에 나온 코드를 그대로 따라 쳤는데도 제대로 구동이 안되는 것 처럼..
뭔가 하나 부족한 상태가 되는 걸까??
vercel 배포 후 이미지가 사라졌다?
처음해보는 부족하지만 그래도 잘 구동되는 내 프로젝트를 배포했다.
두근두근~ 아뉘 근데..뭔가 미리보이는 배포상태가 쪼~ 끔 이상하다..?
메인페이지 로고가 어디갔지??
메인페이지 뿐만이 아니었다. 내부의 다른 페이지도 로컬에서 직접 지정한 이미지파일들은 모두 배포하면 보이지 않았다.
엑박을 내 사이트에서 보게될줄이야..?
로컬에서 작업할 때는 문제가 없었는데요.
찾아보니 환경변수를 설정해주고, 파일경로를 절대경로로 지정을하고..여러방법이 있었으나.. 내상황과는 맞지 않는 부분이었다.
vite를 활용하여 프로젝트를 진행중이었기에 공식문서를 보니...
https://ko.vitejs.dev/guide/assets.html
아..또, import였다.
이번 프로젝트를 진행하며 import 주의보가 열심히 울린다..ㅠ
✅ 이미지 파일 import, 파일 경로에는 {}묶어서 파일명만
// 파일 import
import pokemonlogo from "../assets/pokemonlogo.png";
.
.
.
<LogoImage src={pokemonlogo} alt="PekemonDex" />이제 배포 후에도 정상적으로 이미지가 표출 된다!
404를 여기서 보게된다구요? 새로고침했을 뿐인데요????
네??
아뉘..이건 전혀 예상 밖입니다!?
로컬에서 작업할 때 처럼 습관적으로 새로고침을 하였는데 마주한 페이지가 Not_Found 🫠
뭐가 문제인지 정확히 모르겠지만, vercel공식문서에 있는 내용은 더 모르겠고..
구글링을 토대로 시도!
- 최상위 디렉토리에 vercel.json 파일을 생성
- 아래 코드를 작성 해준다.
{
"routes": [{ "src": "/[^.]+", "dest": "/", "status": 200 }]
}- 깃헙에 push
- 재배포된 확인!
새로고침을 열심히 눌러도 404 Not_found는 마주치지 않은 것을 확인했다!
정말 이제 다 했구나~ 라고 생각했지만 끝까지 방심할 수 없다!!
배포 과정에서도 이런 난관이 생길 줄이야.. 나만 그런가 했으나 처음 배포를 진행하는 다른 팀원들도 비슷한 과정을 겪었다.
끝날 때까지 끝난 게 아닌 점!! 조금 일찍 과제를 마쳐서 풀어져 있었는데 다시 긴장했다!!
