React로 개발이 끝나고 배포를 위해 가비아에서 도메인도 구매했고, aws Amplify를 이용하여 main 브랜치와 연결도 했다.
이 과정은 나중에 언젠가...
머지만 하면 도메인에 올라가는 것은 맞는데, 개발 환경 그대로 올려도 되는 건가?
다른 작업은 따로 필요하지 않는 것인가? 하는 의문이 들었다면,
절대 안된다!
개발 환경 그대로 배포하게 되면, 일반 사용자들도 개발자 도구를 통해 우리가 작성한 소스 코드와 콘솔 내역까지 모두 열람할 수 있다.
Sources > Page, Console
코드는 당연히 지켜야 하고, 콘솔 또한 백엔드 API URL을 지키기 위해서 삭제할 필요가 있다.
1. Source
우리의 소스 코드는 그대로 사이트에 올라가는 것이 아니다. 모듈 번들러를 거쳐 조각난 후에, jsx/tsx 파일을 최소화된 js 파일로 변환한 후에 웹사이트로 조합된다.
이 과정에서 에러가 발생한다면 이미 조각난 원본 소스 코드 어느 부분에서 발생한 에러인지 찾고 디버깅하기는 매우 어려워진다.
에러가 발생한 위치를 원본 소스 코드 기준으로 알려주기 위해서 React Webpack과 Babel이 jsx/tsx 파일과 최소화된 js 파일 간의 매핑을 작성하는데, 이 sourcemap 파일이 함께 배포되면 같은 원리로 개발자 도구에서 소스 코드들을 확인할 수 있게 되는 것이다.
즉 배포한 사이트에서 원본 소스 코드를 보지 못하게 하려면 이 sourcemap 파일을 생성하지 않으면 된다.
방법 1) .env 파일 수정 (모든 운영체제)
GENERATE_SOURCEMAP = false;
방법 2) package.json 파일 수정
1) window OS
"build": "set \ "GENERATE_SOURCEMAP=false\" && react-scripts build&& 연산자는 powershell에서는 작동하지 않고, cmd에서만 작동한다. `npm run build` 할 CLI를 확인하고 수정해야 한다.
2) Linux OS
"build": "GENERATE_SOURCEMAP=false react-scripts build"빌드 후 배포하는 건 마지막에...
2. Console
이제 콘솔을 지울 차례이다.
콘솔을 지우는 방법은 그리 고상하지 않다.
최상단 js (App.js) 파일에 가서 콘솔 함수를 새로 정의해주면 된다.
const dev = true ? 'production' : 'development';
if (dev === 'production') {
console = window.console || {};
console.log = function no_console () {};
console.warn = function no_console () {};
console.error = function no_console () {};
}
그러나 axios error는 위 코드를 작성한다고 해서 사라지지 않는 경우도 있다.
수동으로 console을 clear해주면 해결된다.
console.clear();
소스맵 파일과 콘솔 문제를 해결했으니 빌드 후 배포를 해 보겠다.
개발 환경에서처럼 npm start로 실행한 애플리케이션에서도 사이트가 작동은 하지만 이는 개발을 위한 애플리케이션으로, 서비스하기에는 용량도 크고 불필요한 메시지도 표기한다.
배포하기 전에 빌드해 보자.
npm run build
콘솔에 위 명령어를 입력하면 빌드가 시작된다.
프로젝트 폴더에 build 폴더가 생기고, 그 안에 index.html, logo image 등 웹사이트를 위한 자원 파일이 생긴다.
빌드 결과를 실행할 때에는 다음 명령어를 사용해 보자.
npx serve -s build
사용자가 어떤 경로로 들어오든지, ‘build’ 폴더 안에 있는 index.html 파일을 서비스하겠다는 의미이다.
serve 앱을 처음 사용한다면 설치하겠냐고 물어볼 텐데, 설치하고 실행하면 된다.
npm start와 비슷하게 http://localhost:3000/을 통해 사이트 실행이 가능하다.
npm start처럼 자동으로 사이트가 열리지는 않는다.
localhost:3000에 접속하여 개발자 도구를 켜 보자.
소스 코드가 아니라, 알아볼 수 없는 최소 js 파일만 올라와 있는 것을 확인할 수 있다.
콘솔 또한 비어 있거나 clear된 결과물만이 찍힐 것이다.
이렇게 두 가지를 모두 확인했으면 main 브랜치에 머지함으로써 배포하면 된다.
소스 코드가 털리거나 해킹당할 수 있으니 배포 전엔 언제나 보안에 유의하자.
