[vuejs] (3) Nodejs와 Vite 연동

1. Vite(vuejs) 프로젝트 생성

🔗 https://velog.io/@soyul2823/vuejs-Vite에서-Vue-TypeScript

2. Nodejs + Express

🔗https://velog.io/@soyul2823/nodejs-vite-연동

Vite나 Vue 프로젝트 생성할 때 폴더 생성 후 프로젝트를 생성하였다.

처음에 Vite 폴더 안에 nodejs와 express를 설치했더니 오류가 나서 
찾아보니까 다덜 이렇게 하길래 나도 이렇게 함.
백엔드와 프론트엔드를 구분해서 하는게 맞나봄 난 잘 몰랐쟈냐

frontend는 vue.js를 사용하고 backend는 nodejs를 사용하기 위해
vite 프로젝트는 frontend라는 프로젝트명으로 생성하였고,
nodejs와 express 설치할 때 폴더명을 backend로 설정하여
test 폴더 안에 frontend와 backend 폴더 두개가 생성되었다.

3. nodejs와 vite 연동

1) vite 프로젝트 build

vite 프로젝트 경로로 이동하여 프로젝트를 빌드한다.

npm run build

2) nodejs의 server.js 수정

vite 프로젝트를 빌드하면 dist폴더가 생성된다.
nodejs를 3000번 포트로 실행했을 때 vite 프로젝트가 실행되도록 dist폴더로 경로를 설정해준다.

server.js

var express = require('express');
var path = require('path');
var app = express();

app.use(express.static(path.join(__dirname, '../frontend/dist')));

app.get('/', function(req, res) {
  res.sendFile(path.join(__dirname, '../frontend/dist', 'index.html'));
});

app.listen(3000, function() {
  console.log('App is listening on port 3000!');
});