참조 : https://sollife.tistory.com/18

1. vue-cli3로 fontend만들기

   1. vue-cli를 설치한다.

      $npm i -g @vue/cli

      $vue —version

   2. vue를 이용하여 frontend를 만든다.

      $vue create frontend

      $cd frontend

      $npm run serve ⇒ 브라우저에 localhost:8080에 접속해본다.

   3. 플러그인을 추가한다. (어떤 파일이 변경 되었는지 알 수 있다.)

      라우터 추가 $vue add router

      뷰티파이 추가 $vue add vuetify ⇒ 이쁜 템플릿 적용됨

      

      localhost:8080에 다시 접근하면 vuetify가 적용되어있는 것을 확인가능하다.

      axios 설치 $npm install axios --save ⇒ 편하게 리퀘스트를 날릴수있다.

      frontend/src/main.js 에 코드 추가하여 전역변수로 axios를 사용할 수 있게 만들어 준다.

      import axios from 'axios' 
      Vue.prototype.$http = axios
      

2. express-generator 사용하여 폴더 만들기

   $npm install express-generator -g

   $express --view=ejs backend

   $cd backend

   $npm install

   $set DEBUG=backend:* npm start

   

   localhost:3000 접근이 가능하면 백엔드 구축 성공

3. 배포 준비 ⇒ express 서버에 접속해도 frontend에 접근하듯이 된다.

   frontend에서 $npm i path — save

   frontend/vue.config.js 를 수정함.

   var path = require("path") // 이거 추가해줌
   
   module.exports = {
     outputDir: path.resolve(__dirname,"../backend/public/"),//요거 추가해서 backend랑 연동
     devServer:{
       proxy:{
         '/api':{
           taget:'<http://localhost:3000/api>',
           changeOrigin:true,
           pathRewrite:{
             '^/api':''
           }
         }
       }
     },
     transpileDependencies: [
       'vuetify'
     ]
   }
   

   이제 빌드를 해주어서 backend랑 연동시킨다. $npm run build

   그럼 backend/public에 js에 새로운 파일들이 생긴다.

   

   이제 backend설정을 건드려준다.

   backend/routes/index.js 의 코드를 수정해준다.

   var express = require('express');
   var path = require('path');
   var router = express.Router();
   
   /* GET home page. */
   router.get('/', function(req, res, next) {
     res.sendFile(path.join(__dirname,'../public','index.html'));
     //res.render('index', { title: 'Express' });
   });
   
   module.exports = router;
   

4. vue와 express가 연동되는지 확인

   backend에서 $npm start 를 실행

   localhost:3000으로 백엔드 서버에 접속했으나 프론트 엔드 화면이 뜨는 것을 확인 가능하다.