42. Vue - 포트 수정 및 배포

- 본 포스팅은 이전 포스팅과 이어지는 내용임을 알려드립니다. 

 

1.  개요

- 지금까지 Netlify를 이용하여 프로젝트를 관리하고 배포하는 설정을 했다.

- 마지막으로 설정해야 하는 부분이 있다면 포트번호를 수정하는 일이다. 

---

2. 명령어(스크립트) 변경

클릭하면 확대됩니다.

- 위의 사진은 package.json의 일부분이다.

- 현재 Netlify의 serverless 함수를 사용하기 위해 개발환경으로 프로젝트를 빌드를 할때 다음과 같은 명령어를 사용한다.

- npm run dev:netlify

- webpack 서버를 이용하는 개발환경 빌드는 더이상 사용하지 않기 때문에 이 부분을 변경시켜주고

- netlify 서버를 이용한 개발환경 빌드 명령문을 기본 개발환경 명령어로 변경한다.

클릭하면 확대됩니다.

---

 3. netlify.toml 수정 

클릭하면 확대됩니다.

- 조금 헷갈릴 수도 있는 부분이다. 왜 command 부분을 저렇게 변경하는 거지? 라는 의문이 들 수 있다.  

- netlify.toml에 작성한 내용은 해당 프로젝트의 기본적인 스크립트 설정과 포트번호 등의 정보를 등록하는 곳이다. 

- 개발모드의 command 부분을 npm run dev:webpack으로 바꿔준 이유는, netlify에게 해당 프로젝트의 기존 개발환경 빌드를 위해 사용하는 명령어가 "npm run dev:webpack" 이니까, 해당 명령어를 사용하면 안된다는 것을 가르쳐주기 위한 것이다.

---

4. 포트번호 변경

클릭하면 확대됩니다.

- netlify.toml을 확인해보면, 다음과 같이 포트번호를 확인할 수 있다. 

- 기존 프로젝트의 개발서버 포트는 8080이고, netlify 서버와의 통신을 위한 포트번호는 8888로 구성되어 있다.

- 여기서 netlify와 통신을 위한 포트번호를 일반적인 8080으로 수정해보도록 하자. 

 

클릭하면 확대됩니다.

- 위의 사진처럼 기본 개발서버의 포트번호를 8079로 바꿔주었다. 

- 그러면 이를 webpack에도 동일하게 설정해주어야 오류없이 잘 연결될 것이다. 

 

클릭하면 확대됩니다.

- webpack.config.js 파일을 열어 위의 사진과 같이 개발서버 옵션의 port부분을 8079로 변경한다.

- 이제 프로젝트를 개발환경으로 빌드하면 8079 포트로 실행되고 netlify 서버를 통해 최종적으로 8080 포트로 개발서버가 열리게된다. 

- 이제 npm run dev를 터미널에서 입력하면 다음과 같이 콘솔에 출력되는 것을 확인할 수 있다.

클릭하면 확대됩니다.