크롬을 이용해 나만의 도메인 주소로 로컬 서버 띄우기

최근 크롬이 업데이트 되면서 (제 크롬은 오늘자 맥버전 68이네요) 로컬 서버를 아주 쉽게 띄울 수 있게 되었습니다.

심지어 자기가 원하는 도메인으로 설정도 가능하고, 페이지를 띄워놓고 브라우저에서 수정 및 저장까지 가능합니다!

사실 서버를 띄우려면 이것저것 셋팅 해야될것도 많고, 한번에 여러개를 띄우기도 번거롭기도 하고 그렇죠.

주소도 localhost:포트번호로 사용해야 되구요.

그렇다고 작업한 파일을 그냥 열었을 경우, React js등으로 작업되고 빌드된 페이지는 열리지 않죠.

서버를 띄우지 않고 스태틱한 파일을 그냥 열면 최종본을 확인할 수 없습니다. 오류가 나요.

그럼, 이제 어떻게 하는지 알아봅시다.

우선 적당한곳에 폴더를 만들어 줍니다. 저는 my_local_servers 라고 만들었어요.

그 다음, 이 폴더 내부에 내가 원하는 도메인으로 폴더를 만들어 줍니다.

(제가 테스트 해보니까 본래 존재하는 url은 안되네요, daum.net, never.com 같은..)

아주 간단한 테스트를 위해 ibra.daum.net 을 만들어보죠. (Daum에 이런 서비스는 없겠죠..?)

index.html 과 common.css 를 만들어 주고요..

완료되었으면 크롬 - 개발자 도구 - Sources - Overrides 에 가서 + Select folder for overrides 를 눌러줍니다.

부모 폴더인 my_local_servers 를 추가해주면, 이런 화면이 나타납니다. 여기서 "허용" 버튼을 눌러주세요.

추가가 되었으면, 주소창에 ibra.daum.net 을 입력.

짠!

순식간에 서버하나를 띄운 효과를 볼 수 있습니다. daum.net 으로요.

한가지 더 놀라운 점은 이곳에서 바로 코드를 수정하고 저장할 수 있다는 것입니다.

ibrahimovic -> zlatan 으로 바꾸고 Command + S 를 눌러주면 바로 파일도 변경되고, 

새로고침하면 변경사항을 확인할 수 있습니다!

간단한 테스트를 마쳤으니 이제 React js로 만든 서비스를 하나 띄워보겠습니다.

제 블로그에 있는 React 강좌 tutorial 에서 만든 웹툰 서비스를 띄우기 위해, ibra.webtoon.com 으로 정했습니다.

build 된 파일들을 ibra.webtoon.com 폴더에 넣고, 동일한 방법으로 띄워보겠습니다.

잘 동작 하네요!

윈도우 크롬에서도 정상 동작 합니다. 참고해주세요.

크롬으로 쉽고 빠르게 로컬 서버 띄우는 법을 알아보았습니다. 또한, 이같은 방법을 이용하면 동시에 원하는 개수만큼의 서버를 띄운 효과를 볼 수 있습니다. my_local_servers 내부에 있는 모든 폴더들을 별도의 과정없이 주소로 접근 가능합니다.