Vue.js에서 JSON Server 포트 변경하기

 

 

2025.02.21 - [Vue.js 를 배워보자] - json-server를 Vue와 Nuxt에서 활용하는 방법: 실습과 예제로 풀어보기

 

안녕하세요, 개발자 여러분! Vue.js 프로젝트에서 가짜 REST API를 제공해주는 json-server를 사용하다 보면, 기본 포트인 3000이 다른 서비스와 충돌하거나 특정 포트를 사용하고 싶을 때가 있죠. 오늘은 json-server의 포트를 변경하는 방법을 알아보겠습니다. 초보자도 쉽게 따라 할 수 있도록 코드와 함께 설명해볼게요!

목표

• json-server의 기본 포트(3000)를 원하는 포트로 변경
• Vue.js 프로젝트와 연동해 사용하는 방법 확인

1. 기본 설정 확인

npm install -g json-server

설치가 완료되면, 예를 들어 db.json이라는 파일을 만들어 JSON 데이터를 준비합니다:

{
  "posts": [
    { "id": 1, "title": "안녕하세요" },
    { "id": 2, "title": "Vue.js" }
  ]
}

기본적으로 json-server db.json 명령어를 실행하면 http://localhost:3000에서 서버가 시작됩니다.

2. 포트 변경 방법

방법 1: 명령어에 --port 옵션 추가

가장 간단한 방법은 json-server 실행 시 --port 옵션을 사용하는 것입니다. 예를 들어, 포트를 4000으로 변경하고 싶다면:

json-server --watch db.json --port 4000

이렇게 하면 서버가 http://localhost:4000에서 실행됩니다. 간단하죠? 이 방법은 일시적으로 포트를 변경할 때 유용합니다.

 

방법 2: package.json에서 스크립트 수정

Vue 프로젝트에서 json-server를 자주 사용한다면, package.json에 스크립트를 추가해 관리하는 게 편리합니다. package.json의 scripts 섹션을 다음과 같이 수정하세요:

 

{
  "scripts": {
    "serve": "vue-cli-service serve",
    "json:server": "json-server --watch db.json --port 4000"
  }
}

이제 터미널에서 아래 명령어로 실행하면 포트 4000에서 json-server가 시작됩니다:

 

npm run json:server

이 방식은 팀원들과 포트를 일관되게 유지할 수 있어 협업 시 유리합니다.

 

728x90

 

방법 3: 설정 파일 사용

 

더 세밀한 설정을 원한다면 json-server 설정 파일을 사용할 수도 있습니다. 프로젝트 루트에 server.json 파일을 만들고 아래와 같이 작성하세요:

 

{
  "port": 4000,
  "watch": true,
  "static": "./public"
}

그리고 다음 명령어로 실행합니다:

json-server db.json --config server.json

이렇게 하면 server.json에 정의된 포트(4000)로 서버가 실행됩니다.

3. Vue.js와 연동

포트를 변경한 후, Vue에서 axios나 fetch로 데이터를 가져올 때 URL을 새 포트에 맞춰 수정해야 합니다. 예를 들어:

 

import axios from 'axios';

export default {
  mounted() {
    axios.get('http://localhost:4000/posts')
      .then(response => {
        console.log(response.data);
      });
  }
};

포트가 4000으로 바뀌었으니 localhost:3000 대신 localhost:4000을 사용하세요.

 

 

4. 동작 확인

터미널에서 npm run json:server를 실행한 후, 브라우저에서 http://localhost:4000/posts에 접속해 데이터가 잘 나오는지 확인합니다. Vue 앱에서도 정상적으로 데이터가 로드되면 성공!

5. 마무리

json-server의 포트 변경은 생각보다 간단하죠? --port 옵션으로 빠르게 변경하거나, package.json으로 관리하거나, 설정 파일로 커스터마이징할 수 있습니다. 프로젝트 환경에 맞는 방법을 선택해 사용해보세요. Vue.js와 함께 프론트엔드 개발을 더 효율적으로 진행할 수 있을 거예요!