TODO 프로젝트의 기본기능은 모두 만들었습니다.
여기서 더 추가될수 있는 기능은 로그인 정보 체크시 암호화를 하거나 애니메이션을 추가할 수 있습니다.
그러나 현재 예제에서는 가장 기본적인 방법으로 진행하였습니다.
이제 모든 기능은 완료하였으니 배포를 하여야 합니다.

현재 서버는 express의 서버와 vue 서버가 동시에 실행되고 있습니다.
vue 앱을 배포하여 express 서버만 사용할 수 있도록 하겠습니다.

1.Vue 앱 배포 설정 (frontend/config/index.js)

build 수정

  build: {
    // Template for index.html
    index: path.resolve(__dirname, '../../backend/public/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../../backend/public'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

    /**
     * Source Maps
     */

    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }

빌드될 파일과 경로를 선언해 줍니다.

build

npm run build

터미널에서 해당 명령어를 입력하면 환경설정의 폴더대로 결과물이 배포됩니다.

2.배포된 파일 실행 (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'));
});

module.exports = router;

이제 express 서버를 실행하면 index.html 파일이 실행됩니다.
http://localhost:3000으로 접속하면 제대로 실행되는걸 확인할 수 있습니다.
빌드된 파일들을 웹서버 공간에 올리게 되면 접근이 가능합니다.