프로젝트 환경 구축

프로젝트 생성

// vue-cli version 4.x
npm install -g @vue/cli

vue create frontend

이렇게 생성된 프로젝트는 웹펙을 기반으로 동작한다.

npm run serve : 로컬 서버를 웹펙 서버로 구동
npm run build : 웹펙으로 최종결과물 반환(build)

express 서버와의 연동

vue 프론트와 express 백엔드를 연동하기 위해 webpack을 통한 vue의 번들링 결과를 epxress의 백엔드에 넘겨줘야 한다.
먼저 프로젝트에 설정되어 있는 webpack의 옵션들을 변경하려면 vue.config.js를 수정해야 한다. 우선 webpack이 실행될 때 참조하는 파일인 vue.config.js를 생성해보자. 이 후 아래와 같은 코드 작성이 필요하다.

vue.config.js

let path = require("path");

module.exports = {
    outputDir: path.resolve('../backend/pub'),
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:3000/api',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    },
}

outputDir : 프론트의 빌드 결과물을 어디에 위치시킬 지 결정
devServer.proxy : 프론트 앱과 api 서버가 같은 호스트에서 돌아가고 있지 않을 때, api 요청을 api 서버에 전달해주기 위해 사용한다.

백엔드 app.js에 코드 추가

app.use(express.static(path.join(__dirname, 'pub')));

pub 경로에 있는 파일들이 실행될 수 있도록 해준다.

백엔드 프로젝트 구조

npm run build

build 후 프론트의 번들링 결과물이 backend/pub에 생성된 것을 확인할 수 있다.

연동에 성공했다면
http://localhost:8080
http://localhost:3000
두 주소로 접속 시, 같은 화면(프론트 화면)이 띄워지는 것을 확인할 수 있다.