vite 환경에서 기본 포트 설정하기, vite 환경에서 서버 자동으로 실행하는 방법

그동안 CRA(create-react-app)만을 사용하다가, 현직에서는 CRA보다 Vite를 더 많이 사용한다는 말에 Vite가 궁금해졌습니다. 

 

Vite는 esbuild를 사용해서 빌드 속도가 빠른 빌드 도구 입니다. 

 

빠르다는 이야기에 바로 테스트를 해보았는데 CRA보다 체감상 정말 빨랐고, 바로 vite를 사용하게 되었습니다. 

 

 

 

//package.json

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },

package.json에는 "dev"라는 명령어로 브라우저를 킬 수 있습니다. 

 

그래서 npm run dev를 하면 아래와 같은 주소에 실행됩니다. 

 

그런데 CRA환경과 다르게 자동으로 브라우저가 열리지 않고, command + Local 주소를 클릭해야 나옵니다. 

---

1. vite 환경에서 기본 포트 설정하기

 

vite는 호스트는 기본으로 localhost로 설정되고(127.0.0.1), 기본 포트는 5173 으로 설정됩니다. 

여기서 다르게 설정하고 싶다면

 

//package.json

"scripts": {
    "dev": "vite --host 0.0.0.0 --port 3001",
    "build": "vite build",
    "preview": "vite preview"
  },

package.json 파일에서 위처럼 수정하면 됩니다. 

 

위에서 포트를 3001로 수정해서 포트가 변경되었습니다. 

---

 

2. vite 환경에서 "npm run dev"로 서버 자동으로 실행하는 방법

 

//vite.config.js

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  server: {
    open: true,
  },
  plugins: [
    react(),
  ],
});

vite.config.js 파일에서

server: {
    open: true,
  },

위처럼 서버 실행을 true로 설정하면 CRA 환경에서 npm run dev 명령어를 실행한 것처럼 자동으로 브라우저까지 열립니다!

 

 

 

 

 

 

참고)

 

https://vitejs-kr.github.io/guide/why.html

Vite

https://yozm.wishket.com/magazine/detail/1620/

Vite 이야기(feat. Svelte) | 요즘IT