1을 해결하면서 혹시 모를 오류를 방지할 .nojekyll도 같이 넣는 방법도 찾아보겠습니다.
gh-pages에 빌드한 파일에 CNAME과 .nojekyll 넣기
yarn deploy를 하면 일어나는 과정을 자세히 살펴 봅시다.
predeploy에 할당된 내용이 먼저 실행됩니다. : 어제 설정대로면 npm run build 가 실행되서 react-scripts build가 실행됩니다. create-react-app에서 미리 설정한 웹팩 설정, 바벨 설정대로 빌드가 진행 되겠죠. 이 과정에서 build 폴더 안의 내용물은 삭제되고 깔금하게 정리된 결과물이 나오게 됩니다.
deploy에 해당된 내용물이 실행 됩니다. : gh-pages -d build, -d(driectory) 옵션에 따라 build에 있는 것들만 gh-pages 브랜치에 올라갑니다. 문제는 여기서인데, 이 명령어는 기존 파일과 비교해서 쓸모없는 파일을 다 지우도록 설정되어 있습니다. 근데 문제는 지금은 필요한 파일인 CNAME까지 삭제해버린다는 거죠.
우리는 1과 2 사이에 build 폴더 안에 CNAME과 .nojekyll을 추가하고, 2가 진행될때 파일을 삭제 안하고 올리게 해야 합니다.
CNAME과 .nojekyll을 추가하는 명령어 만들기
일단 제 컴퓨터는 윈도우10입니다. 리눅스에서는 테스트 하지 못했습니다. 문제가 없었으면 좋겠네요.
일단 CNAME 파일과 .nojekyll을 만드는 제일 쉬운 방법은 echo와 표준 입출력입니다.
echo www.custom.domain > CNAME ehco > .nojekyll
그런데 &&으로 묶어서 predeploy에 넣으면, 저 표준 입출력 방향 때문에 명령어가 원하는 대로 작동을 안합니다. 저는 각각 따로 커스텀 명령어를 할당하고 다시 묶어 줬습니다. 다시 package.json으로 돌아와서이렇게 해주면, 잘 작동하지 않아요. 당연합니다. builld 폴더에 이 두 파일이 들어가야 하는데, 저 명령어는 그 위 프로젝트 폴더에서 돌리테니깐요. 그러니 아래와 같이 바꿔줍시다.
"scripts": { … "cname": "echo www.custom.domain > CNAME", "nojekyll": "echo > .nojekyll", "predeploy": "npm run build && npm run cname && npm run nojekyll", … },
"cname": "echo www.custom.domain > build/CNAME"
작동안해요. 오류납니다. build/ 뒤에 확장자가 없는 파일이 있으니, 애가 디렉토리 인줄 알고 에러 뿜더라고요. 전 여기서 3시간 가까이 고민했습니다. CNAME.txt로 만든 뒤 확장자 바꾸려고 난리치기도 했고, 별별 난리를 다했는 데, 안 먹혔어요. 근데 답은 단순했습니다.
gh-pages 옵션 정리 및 명령어 완성
남아 있는 다른 문제는 gh-pages에 --add(현재 저장소와 비교해서 파일을 함부러 삭제하지 않음) --dotfiles(.으로 시작하는 파일들 무시하지 않고 전부 올림) 옵션을 추가해줍시다. 이 옵션 찾는 것도 꽤 걸렷어요. 근데 사실 저장소 readme에 다 적혀 있더라고요. 근데 너무 작게 적혀있어요. --add옵션은 최초 이후엔 빼도 잘 작동하더라고요
이렇게 하면 해결될 것 같지만, 여전히 JS와 각종 파일들은 404를 보냅니다. 전 리액트로만 제작된 앱이라, 하얀 화면만 볼 수 잇었죠. <noscript>에 설정된 내용이 안 보이는 걸 보니 브라우저 자바스크립트는 켜져 있었습니다.
원인을 찾지 못하고 HTTPS 연결을 껐다 켰다 해보고 별의 별 난리를 다 하면서 성질 버리고 있던 참에 다른 사람의 도움으로 발견을 했습니다. 바로 JS,ico 등을 아예 이상한, 반복되는 url로 요청을 보내고 있었다는 것을요.
- 즉, 우리는 package.json의 홈페이지 설정을 잘못했다는 것을 알 수 있습니다. 여기서 또 시간을 날렸는데, 답은 단순했습니다. 바로 홈페이지 부분에 / 만 입력하는 것이었습니다. 너무나 단순한데, 그 만큼 충격이 컸습니다.그렇게 완성된 package.json입니다. 이 단순한 걸 위해 이렇게 고생하다니, 정말 허탈하더군요. 아직은 단순한 상자 밖에 없는 페이지이지만, 이걸 만드느라 삽질한 충격은 너무나 컸습니다.
사실 이 글의 결론은 저 20줄도 안되는 packge.json 안에 들어갈 정도로 단순하고, 문제의 직접적인 원들은 다 합쳐도 몇 글자 안됩니다. 그래도 저를 반나절 넘게 괴롭히고 있었죠. 이 내용은 제가 못 찾은 것일 수도 있지만 영어로 검색해도 찾지 못했거든요.
여러분이 저와 같은 문제 상황에 쳐했을 때, 하루를 다 버리고 속이 쓰릴 수도 있어요. 솔직히 이 글 쓴다고 누가 읽을 것 같지도 않고, 굳이 github-page에서 준 url을 안 쓸 이유는 없지만, 저와 같은 상황에 쳐했을 때, 이 글을 읽고 상황을 해결하실 수 있으면 좋겠습니다.2021년 내용추가 : cra의 static 폴더에 CNAME 파일과 .nojekyll 파일을 넣고, 디플로이 옵션에 gh-pages --dotfiles 을 넣어주면 아래 방안을 더 쉽게 대체할 수 있습니다.
문제의 그 페이지, 아직 완성되려면 한참 남았다. 현재는 기본적인 컴포넌트 이름만 정한 상태입니다. 딱봐도 대충 만들었잖아요.
Github pages에서 커스텀 도메인 설정하기
Github pages에서 커스텀 도메인 설정하기는 글이 많습니다. 솔직히 언급 안해도 됨. 하지만 그래도 적어야죠.
Github 저장소 세팅에서 Github Pages에 커스텀 도메인을 연결해주는 항목이 있습니다. 여기서 사용할 도메인을 입력하면 자동으로 CNAME 파일을 커밋해 줍니다.
- 그리고 가입한 DNS 서비스에서 마저 연결 설정하면 끄읕
여기서 모든 일이 잘 풀렸으면 제가 이 이후 글을 쓸 이유가 없었고 이 글은 그냥 언제나 처럼 개발일지 타이틀을 달고 올라왔을 것입니다.
gh-pages와 커스텀 도메인 설정 : 멘탈이 터져가는 과정
저번에 소개한 gh-pages는 굉장히 편리한 패키지 입니다. Github는 gh-pages 브랜치를 감지하면 자동으로 호스팅을 해줍니다. 이 패키지는 빌드 된 내용을 자동으로 브랜치 파서 커밋과 푸쉬까지 다해줍니다
다른 많은 패키지들 처럼, packge.json에서 옵션을 지정할 수 있습니다. 우리는 주소가 바뀌었으니, 이 파일에서 홈페이지 주소를 바꿔 줍시다.
{ … "hompage" : "recruit.gistory.me" … }
그리고 올려줍시다. 저번 시간에 우리는 커스텀 커맨드를 만들어 놓았고, 그대로 실행합시다! yarn deploy
1을 해결하면서 혹시 모를 오류를 방지할 .nojekyll도 같이 넣는 방법도 찾아보겠습니다.
gh-pages에 빌드한 파일에 CNAME과 .nojekyll 넣기
yarn deploy를 하면 일어나는 과정을 자세히 살펴 봅시다.
predeploy에 할당된 내용이 먼저 실행됩니다. : 어제 설정대로면 npm run build 가 실행되서 react-scripts build가 실행됩니다. create-react-app에서 미리 설정한 웹팩 설정, 바벨 설정대로 빌드가 진행 되겠죠. 이 과정에서 build 폴더 안의 내용물은 삭제되고 깔금하게 정리된 결과물이 나오게 됩니다.
deploy에 해당된 내용물이 실행 됩니다. : gh-pages -d build, -d(driectory) 옵션에 따라 build에 있는 것들만 gh-pages 브랜치에 올라갑니다. 문제는 여기서인데, 이 명령어는 기존 파일과 비교해서 쓸모없는 파일을 다 지우도록 설정되어 있습니다. 근데 문제는 지금은 필요한 파일인 CNAME까지 삭제해버린다는 거죠.
우리는 1과 2 사이에 build 폴더 안에 CNAME과 .nojekyll을 추가하고, 2가 진행될때 파일을 삭제 안하고 올리게 해야 합니다.
CNAME과 .nojekyll을 추가하는 명령어 만들기
일단 제 컴퓨터는 윈도우10입니다. 리눅스에서는 테스트 하지 못했습니다. 문제가 없었으면 좋겠네요.
일단 CNAME 파일과 .nojekyll을 만드는 제일 쉬운 방법은 echo와 표준 입출력입니다.
echo www.custom.domain > CNAME ehco > .nojekyll
그런데 &&으로 묶어서 predeploy에 넣으면, 저 표준 입출력 방향 때문에 명령어가 원하는 대로 작동을 안합니다. 저는 각각 따로 커스텀 명령어를 할당하고 다시 묶어 줬습니다. 다시 package.json으로 돌아와서이렇게 해주면, 잘 작동하지 않아요. 당연합니다. builld 폴더에 이 두 파일이 들어가야 하는데, 저 명령어는 그 위 프로젝트 폴더에서 돌리테니깐요. 그러니 아래와 같이 바꿔줍시다.
"scripts": { … "cname": "echo www.custom.domain > CNAME", "nojekyll": "echo > .nojekyll", "predeploy": "npm run build && npm run cname && npm run nojekyll", … },
"cname": "echo www.custom.domain > build/CNAME"
작동안해요. 오류납니다. build/ 뒤에 확장자가 없는 파일이 있으니, 애가 디렉토리 인줄 알고 에러 뿜더라고요. 전 여기서 3시간 가까이 고민했습니다. CNAME.txt로 만든 뒤 확장자 바꾸려고 난리치기도 했고, 별별 난리를 다했는 데, 안 먹혔어요. 근데 답은 단순했습니다.
gh-pages 옵션 정리 및 명령어 완성
남아 있는 다른 문제는 gh-pages에 --add(현재 저장소와 비교해서 파일을 함부러 삭제하지 않음) --dotfiles(.으로 시작하는 파일들 무시하지 않고 전부 올림) 옵션을 추가해줍시다. 이 옵션 찾는 것도 꽤 걸렷어요. 근데 사실 저장소 readme에 다 적혀 있더라고요. 근데 너무 작게 적혀있어요. --add옵션은 최초 이후엔 빼도 잘 작동하더라고요
이렇게 하면 해결될 것 같지만, 여전히 JS와 각종 파일들은 404를 보냅니다. 전 리액트로만 제작된 앱이라, 하얀 화면만 볼 수 잇었죠. <noscript>에 설정된 내용이 안 보이는 걸 보니 브라우저 자바스크립트는 켜져 있었습니다.
원인을 찾지 못하고 HTTPS 연결을 껐다 켰다 해보고 별의 별 난리를 다 하면서 성질 버리고 있던 참에 다른 사람의 도움으로 발견을 했습니다. 바로 JS,ico 등을 아예 이상한, 반복되는 url로 요청을 보내고 있었다는 것을요.
- 즉, 우리는 package.json의 홈페이지 설정을 잘못했다는 것을 알 수 있습니다. 여기서 또 시간을 날렸는데, 답은 단순했습니다. 바로 홈페이지 부분에 / 만 입력하는 것이었습니다. 너무나 단순한데, 그 만큼 충격이 컸습니다.그렇게 완성된 package.json입니다. 이 단순한 걸 위해 이렇게 고생하다니, 정말 허탈하더군요. 아직은 단순한 상자 밖에 없는 페이지이지만, 이걸 만드느라 삽질한 충격은 너무나 컸습니다.
사실 이 글의 결론은 저 20줄도 안되는 packge.json 안에 들어갈 정도로 단순하고, 문제의 직접적인 원들은 다 합쳐도 몇 글자 안됩니다. 그래도 저를 반나절 넘게 괴롭히고 있었죠. 이 내용은 제가 못 찾은 것일 수도 있지만 영어로 검색해도 찾지 못했거든요.
여러분이 저와 같은 문제 상황에 쳐했을 때, 하루를 다 버리고 속이 쓰릴 수도 있어요. 솔직히 이 글 쓴다고 누가 읽을 것 같지도 않고, 굳이 github-page에서 준 url을 안 쓸 이유는 없지만, 저와 같은 상황에 쳐했을 때, 이 글을 읽고 상황을 해결하실 수 있으면 좋겠습니다.
- 대체 뭐가 문제일까요? diff를 해봅니다. CNAME 이 날라갔네요.
- 뭔가 이상하지만 CNAME은 복잡한 파일이 아니니 만들어서 도전합시다
- 대체 뭐가 문제일까요? 하나하나 파해쳐 봅시다.
