Postman 없이 api 호출해 db table 만들기 (2) 백-프론트엔드 연동하기

지난 게시글에서 table의 기본 형태를 만들어주었다.

table에 db의 값을 넣어서 보려면

api를 호출헤서 해당 위치에 각각의 값을 넣어주면 되겠지

 

 

api를 호출하려면 backend project랑 frontend project부터 연결해주어야겠지

vue를 node에 배포해주자

 

 

vue의 최상위 폴더인 frontend 폴더에 vue.config.js 파일을 만들자

var path = require("path")

module.exports = {
    outputDir: '../backend/public',
    devServer: {
        proxy: {
            '/api': {
                target: " http://localhost:3000/ ",
                changeOrigin: true,
                pathRewrite: {
                    '/api': ''
                }
            }
        }
    }
}

 

터미널에 npm run build 해주면 아래처럼 파일 생성된다

 

 

여기까지가 vue를 배포 가능한 형식으로 만들어주는 단계

node를 실행했을 때 vue도 같이 실행되려면

⇒ vue에서 만든 frontend에 접근할 url을 지정해줘야 한다

 

 

 

backend/routes/index.js

const Router = require('koa-router')
var router = new Router();

router.get('/', function (req, res, next) {
    res.sendFile(path.join(__dirname, '../public', 'index.html'));
})
//결과값으로 public에 있는 index.html을 반환
//index.html은 아까 위에서 우리가 배포가능한 형태로 바꾼 Vue!

 

 

 

 

 

자 그러면 잘 연동되었는지 확인을 해야겠지

backend/src/app.js에서 아래의 코드로 연동 확인하자

// 연동 확인
async function CheckConnection(req, res) {
    try {
        await sequelize.authenticate();
        console.log('Connection has been established successfully.');
    } catch (error) {
        console.error('Unable to connect to the database:', error);
    }
}
CheckConnection()

 

 

 

 

연동 성공 

연동이 되었으니 frontend에서 api를 쓸 수 있다는 말....?!

 

 

 

 

 

 

 

 

 

https://velog.io/@shelly/vue-node-%EB%B0%B0%ED%8F%AC-vue%EC%99%80-node-%EC%97%B0%EB%8F%99%ED%95%98%EA%B8%B0

[vue + node 배포] vue와 node 연동하기