Node+Express 서버와 Vue 연동하기

1. nodejs 최신버전 설치 링크

Node.js

2. 프로젝트 이름으로 된 폴더 생성 후 해당 폴더로 에디터 실행 (vscode 사용했음)

3. nodejs 서버 세팅

npm install express  # nodejs 웹 프레임워크
sudo npm install -g nodemon  # 수정될때마다 자동으로 서버 재실행해주는 모듈. 
# -g : 글로벌로 설치해서 다음 프로젝트부턴 다시 설치할 필요 없게끔

 

server.js

const express = require('express');
const app = express();

app.listen(8080, ()=>{
    console.log('server on');
})

저장 후 터미널에서 

nodemon server.js

위 명령어를 실행하면 콘솔에 server on을 출력해준다. 

이제 localhost:8080 으로 접속해보면

이렇게 뜬다면 서버를 제대로 실행시킨거임

확인했으면 Vue 세팅을 위해 Ctrl + c로 서버를 닫아주자.

 

4. Vue 세팅

npm install -g @vue/cli  # vue 설치

vue create 프로젝트명
# 프로젝트명은 app으로 진행
# ex) vue create app
# 옵션은 Default [Vue 3] 선택

cd 프로젝트명  # vue 프로젝트로 이동
npm run serve  # vue 실행

 

npm run serve 명령어를 실행하면 localhost:8080으로 접속했을 때

위 화면이 나온다면 vue 세팅도 끝났다.

 

5. NodeJS Express 서버와 Vue 연동하기

이제 각각의 node-express 서버와 vue 클라이언트가 만들어졌는데 

이 둘을 합치는 과정은 다음과 같다.

1. vue 프로젝트 빌드 뜨기
2. nodejs 서버로 접속했을 때 path 모듈을 통해 위에서 빌드된 vue의 index.html로 라우팅하기

먼저 터미널에서 vue 폴더로 이동 후 아래 명령어 실행

npm run build

그럼 dist 폴더가 만들어지면서 그 안에 index.html이 생기는데

이게 우리가 만든 vue 프로젝트를 압축해 하나의 index.html 파일로 만든거다.

 

server.js

const express = require('express');
const app = express();
const path = require('path');  // path 모듈 사용

app.listen(8080, ()=>{
    console.log('server on');
})

app.use( '/', express.static( path.join(__dirname, 'app/dist') ));  
// 이 부분이 없으면 아래코드에서 index.html을 로드하지 못한다.
app.get('/', (req, res)=>{
    res.sendFile(path.join(__dirname, 'app/dist/index.html'));  
})
// 기본 경로 '/'을 통해 빌드된 dist/index.html 파일을 로드시킨다.

server.js에 위처럼 코드를 추가한다. 

 

마지막으로 서버를 실행해서 아까처럼 vue를 실행한 화면과 똑같이 나온다면 연동 성공

cd ..
nodemon server.js