(Vue.js) node.js (express) 서버에 배포

Vue.js로 작업한 프론트엔드 작업물을 node.js express 에 배포하는 방법입니다

아래와 같은 구조로 작업한 상태라고 가정합니다

디렉토리 구조가 다르다면 ouptutDir등을 적절히 입력하면 됩니다

$ tree -L 1
.
├── front
└── server

• front: Vue.js 프론트엔드
• server: Node.js express 백엔드

 

1. 배포 위치 수정 

- vue.config.js 수정 

const path = require('path')

module.exports = defineConfig({
	// ...
    outputDir: path.resolve('../server/public'),
    // ...
})

2. 배포 

npm run build

위 명령어를 수행하면 프론트를 구성하는 파일들이 ../server/public 위치에 배포됩니다

 

3. 서버 코드 수정

- routes/index.js 수정 ('/' 접근에 대한 응답을 front에서 배포한 페이지로 연결)

var express = require('express');
var router = express.Router();
var path = require('path')

router.get('/', function(req, res, next) {
    res.sendFile(path.join(__dirname, '../public/index.html'));
});

module.exports = router;

 

4. server 재실행

num start

서버 재실행 후 서버 주소로 접속했을 때 배포한 화면이 나오면 성공입니다