개발자 도구에서 React의 소스 코드 숨기기 [3가지 방법]

코드를 프로덕션으로 옮기면 프로젝트 구조를 포함한 React 앱의 전체 소스 코드가 개발 도구(검사) 소스 탭에 표시되는 것으로 확인되었습니다. 프로덕션에서 전체 코드를 노출하는 보안 문제이거나 감사하지 않을 수 있습니다.
탐색 후 왜 이런 일이 발생하는지, 이를 숨길 수 있는 해결책을 찾았습니다.

소스 코드가 보이는 이유는 무엇입니까?

앱을 프로덕션에 배포하기 위해 빌드 파일이 생성됩니다. 빌드를 생성하는 동안 기본적으로 React 앱은 react-script 소스 맵이 활성화되어 있기 때문에 소스 ".map"파일을 생성합니다. 이 맵 파일에는 소스 코드에 대한 참조가 있습니다.

이것이 생성된 JavaScript 파일과 원본 소스 파일 간의 매핑입니다. 개발 시 원본 파일에서 오류를 쉽게 식별할 수 있습니다.

브라우저는 ".map"파일을 사용하여 브라우저에 표시되는 원본 소스 코드를 재구성합니다. 따라서 이를 방지하려면 ".map"파일을 제거해야 합니다. 해당 맵 파일을 제거하면 빌드 크기도 줄어듭니다.

어느 쪽이든 해당 맵 파일 생성을 제거하거나 방지할 수 있습니다.

.env 파일을 통해

package.json을 통해

사후 빌드 스크립트 사용

1. .env 파일을 통해

프로젝트 루트 폴더에 .env 파일을 만듭니다.

생성된 env 파일에 GENERATE_SOURCEMAP=FALSE를 추가합니다.

그런 다음 npm run build를 통해 프로젝트를 빌드하고 앱을 배포합니다. 빌드하는 동안 맵 파일 생성을 방지합니다. 이제 브라우저에서 전체 소스 코드를 찾을 수 없습니다.

2. package.json을 통해

아래와 같이 package.json 빌드 스크립트를 편집합니다.



소스 맵 생성을 false로 추가하여 package.json에서 빌드 스크립트를 수정해야 합니다.

#windows
build: set \"GENERATE_SOURCEMAP=false\" && react-scripts build
#linux
build: GENERATE_SOURCEMAP=false react-scripts build

또한 소스 맵을 false로 설정하여 맵 파일 생성을 방지하기 위해 빌드를 언급하는 또 다른 방법입니다.

3. 포스트빌드 사용하기

이 접근 방식에서는 먼저 빌드 파일을 생성한 다음 빌드를 게시합니다. build/static/js 및 build/static/css 내의 ".map"파일은 제거됩니다.

rimraf는 폴더와 파일을 재귀적으로 제거하는 데 사용됩니다. Linux의 rm -rf 명령과 같습니다.



빌드 후 스크립트"postbuild":"rimraf build/static/**/*.map"를 스크립트에 추가하고 npm build를 실행합니다. 처음에는 빌드 폴더에 빌드 ".map"파일을 만들고 빌드 후 해당 파일을 제거합니다. 프로덕션에 앱을 배포할 때 완전한 소스 코드를 찾을 수 없습니다.

결론

그래서 같은 것을 달성하는 많은 방법이 있습니다. 처음 두 접근 방식에서는 처음에 해당 맵 파일을 생성하지 않고 마지막 접근 방식에서는 생성 후 빌드 후 build/static/js 및 build/static/css 내부의 ".map"파일을 제거합니다.
브라우저의 inspect> sources 탭에서 소스 코드를 숨기고 빌드 속도를 높이고 빌드 폴더의 많은 공간을 줄입니다.

자유롭게 의견을 말하거나 제안을 해주세요😊. 이 게시물이 도움이 되었기를 바랍니다. 읽어주셔서 감사합니다.

This post was originally published here