1.Frontend 설정

시작전 프론트쪽의 환경설정 세팅을 해보겠습니다.

frontend/config/index.js

      // 8080 api로 요청이 왔을 경우 3000/api 사용
      proxyTable: {
          '/api': {
              target: 'http://127.0.0.1:3000/api',
              changeOrigin: true,
              pathRewrite: {
                  '^/api': ''
              }
          }
      },

프록시 설정을 수정합니다.
이는 ‘http://127.0.0.1:8080/api’로 요청이 왔을때 ‘http://127.0.0.1:3000/api’를 프록시로 사용하게 해줍니다.
자세하 옵션을 아래 사이트에서 확인이 가능합니다.
http://vuejs-templates.github.io/webpack/proxy.html

frontend/main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue';
import App from './App';
import router from './router';
import axios from 'axios';

Vue.prototype.$http = axios;
Vue.config.productionTip = false;

new Vue({
  el: '#app',
  render : h => h (App),
  router
});

main.js에는 기본적으로 사용할 vue,router,axios를 임포트 해줍니다.

2.Backend 설정

backend/app.js

var createError = require('http-errors');
var express = require('express');
var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');

var index = require('./routes/index');
var api = require('./routes/api.js');

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));

app.use('/', index);
app.use('/api', api);


// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

app.js 파일에는 기본적으로 사용할 express를 로드해주고 라우터도 추가합니다.

backend/routes/index.js

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

/* GET home page. */
router.get('/', function (req, res, next) {
    // res.sendFile(path.join(__dirname, '../public', 'index.html'));
    res.send('Hello World');
});

module.exports = router;

npm start

npm server를 시작한 뒤 http://localhost:3000에 접속하게 되면 ‘Hello World’ 문구를 확인할 수 있습니다.
이제 준비는 끝났습니다.