Vue CLI는 편리하게 필요한 모듈을 import해주고 dependency 버전관리까지 알아서 해주기 때문에 순정 webpack 구성보다 굉장히 편리합니다.
순정 웹팩의 경우 주로 webpack.config.js 같은 cofig파일을 만들어서 스크립트/접근 관리를 하곤 하는데요.
그럼 Vue CLI를 활용한 프로젝트에서는 어떤식으로 네트워크에 접근허용을 하게 하는지 알아봅시다.
방법
우선 Vue CLI로 초기셋팅을 하셔야 합니다.
이에 대한 포스팅은 이 쪽을 참조해주세요.
개발단계에서 서버를 실행시키는 명령어는 npm run serve입니다.
터미널에서 실행했을때 다음과 같은 화면이 보일겁니다.
8080포트는 네트워크 접근을 허용시키지 않습니다.
네트워크를 허용하려면 80번 포트를 써야합니다. 포트를 80번포트를 변경하는 명령어는 다음과 같습니다. npm run serve -- --port 80
뭔가 이상합니다. 분명히 포트번호를 80으로 적었는데 1024로 뜨는군요.
이는 포트번호의 분류와 연관이 있습니다.
PORT 1~1023까지는 WellKnowPort(Privilleged Port)라고해서 국제도메인기구의 관리하에 놓여져있는 포트번호들입니다. 80번 역시 이곳에 속하구요.
(좀 더 자세히 알고 싶다면 이 곳을 참조해주세요)
이를 Unix 계열 운영체제에서 실행하려면 SUDO권한(관리자권한)을 사용해야 합니다. 명령어에 SUDO를 붙여봅시다.
sudo npm run serve -- --port 80
다음과 같이 깔끔하게 실행되는 것을 확인하실 수 있습니다.
또한 같은 와이파이를 공유하고 있는 사용자 또한 접근이 허용되게 됩니다.
개발단계에서 간편하게 웹서버를 테스팅할 때 좋은 방법입니다.
