[삽질] - parcel build시 root 문제

1. 사건의 발단

기존 CRA를 사용해 만들던 프로젝트를 parcel 기반으로 수정하고 빌드 했는데,

이후 프로덕션 환경에서 경로 관련 문제가 발생했다.

 

1-1. 아무것도 보이지 않았다.

로컬 환경에서는 문제 없이 실행되던 프로젝트를 빌드 후 github pages에 배포했는데

github.io/~~~~ 같은 프로덕션 환경에서 로드 되지 않았다.

 

1-2. 이미지 파일 엑박

로컬 환경에서는 문제 없이 로드 되던 이미지 파일들이 프로덕션 환경에서 엑박을 시전했다.

 

 

 

2. 문제의 원인

2-1. index.html 파일 내 번들 된 xxx.css, xxx.js 의 경로가 올바르지 않았다.

CRA로 생성한 프로젝트에서는 빌드 시 다음과 같이 자동으로 index.html 파일 내 코드의 경로들이 수정됐었다.

하지만 parcel로 빌드 시 다음과 같이 자동 경로 수정이 이루어지지 않았다.

 

2-2. 이미지 파일의 경로가 올바르지 않았다.

parcel로 번들러를 변경한 후 로컬 환경에서 이미지 경로를 수정했는데

이때, 단지 로컬 환경만 고려 해 이미지 경로를 적어 놓았다. ex) /asset/....

 

CRA로 생성한 프로젝트에서는 다수의 이미지 파일을 import없이 불러오기 위해 public 폴더에 보관했고

이에 대한 경로로 PUBLIC_URL 이라는 환경변수를 사용했었다.  ex) `${process.env.PUBLIC_URL} /asset/....

환경변수에 대한 이해가 전혀 없는 상태에서 사용했기 때문에

당연하게도 프로덕션 환경에 대한 경로를 생각하지 못했다. 

 

1,2번 문제 모두 프로덕션 환경 개발자 도구의 network 탭에서 원인을 찾을 수 있었다.

 

3. 원인에 대한 공부

CRA의 root

Create React App 은 홈페이지 필드를 사용하여 빌드된 HTML 파일의 루트 URL 을 결정한다.

 

CRA 공식문서에 답이 있다... 이말이다..

 

CRA로 만들던 프로젝트에서는 package.json homepage 필드에 github 프로젝트 경로를 적어놨었기 때문에!!

그래서 빌드된 HTML 파일의 xxx.css, xxx.js 의 경로가 알아서 올바르게 바뀐 것이었다.

 

 

CRA의 router

react-router-dom의 Link 컴포넌트도 router컴포넌트의 basename prop을 사용해서 root를 정해줄 수 있다.

그래서 basename prop을 사용한 것이었다....

 

 

parcel 의 CLI parameter  [ --public-url ]

 

parcel을 사용할 때 serve, watch, build 3가지 커맨드를 쓸 수 있다.

공식 문서에는 모든 커맨드에서 사용 가능한 parameter가 정리되어 있는데,

그중 하나가 --public-url 이다.

 --public-url 을 사용하여 빌드하면

build 할 HTML 파일 내 번들될 파일의 경로 앞에 접두사로  --public url 경로가 붙는다.

 

 

 

환경변수

환경변수란?

-  개발 환경에 따라 다르게 적용되는 변수이다.

   production 환경과 development 환경에서 각각 다르게 처리되어야 할 URL과 같은곳에 환경변수를 사용하면 된다.

 

CRA와 parcel 모두 환경변수를 위해 dotenv 모듈을 사용한다.

 

 

 

parcel의 환경변수 접근

process.env 로  .env 파일에 설정한 환경변수에 접근할 수 있다.

 

 

 

NODE_ENV 환경변수의

기본값은 development 이고

build시 production으로 바뀐다.

 

 

 

4. 문제의 해결

역시나 공식문서에서 해답을 찾았다.

 

1번 문제의 해결

package.json script필드의 build 뒤에 -- public-url parameter로 내 깃헙 프로젝트 주소를 넣었다.

 

이후 빌드된 index.html 파일을 확인해보니

번들 된 친구들의 경로 맨 앞에 정상적으로 주소가 들어가 있었다.

 

 

2번 문제의 해결

처음에는 개발 환경에 따라 달라지는 NODE_ENV 환경변수를 이용해 

아래와 같은 코드를 만들어 경로를 할당했다.

물론 로컬, 운영 환경 모두에서 이미지가 잘 로드됐다.

하지만 뭔가 쿨하지 못해서 생각해서 다음 방법을 시도했다.

 

 

parcel 한글판 공식문서에 나와있는 환경변수에 대한 설명이다.

 

글을 참고하여 .env 파일을 2개 만들었다.

 

각 .env 파일에 다음과 같은 환경변수를 생성하고 값을 주었다.

 

경로에 대한 변수를 생성해서 src값으로 넣어줬다.

 

개발환경에 따라 변화하는 NODE_ENV 환경변수를 사용하여

각각의 .env 파일을 로드하기 때문에

 

결론적으로는 IMG_URL 환경변수가 달라지면서 경로를 달리 할 수 있게 되었다!!

 

 

 

 

삽질 삽질 또 삽질