Vue클라이언트에서 node.js(express)서버로 axios 통해 api 통신하기

로컬서버에서 프론트+백을 동시에 다루고 싶다면 vue(프론트)와 node.js의 express(백)을 동시에 서버에 띄워줘야 한다.

만약 vue서버만 띄워놓고 express서버를 띄우지 않았을 경우

Could not proxy request  from localhost:8080 to http://localhost:3000.

와 같은 에러가 날 것이다. (나는 그랬다...)

그러려면 package.json의 scripts에서  express서버와 뷰를 동시에 띄워주는 npm 명령어를 선언해줘야 한다. 

나는 따로따로 띄워주기 귀찮아서 서버와 클라이언트를 동시에 실행시켜줄 수 있는 라이브러리인 concurrently를 이용했다.

npm install concurrently

설치하면 package.json의 dependencies에 concurrently가 생긴다.

그 다음 package.json의 scripts부분에 concurrently를 이용해 npm 명령어를 작성해주면되는데,

참고로 npm 명령어를 실행하기 위해서는 start를 제외한 모든 것은 npm run ~~~으로 실행해줘야 한다.

package.json 

concurrently npm 명령어1 npm 명령어2 

이런식으로 작성해주고 

해당 npm 명령어를 실행하면 (나의 경우 npm run dev) 단일 명령어로 서버와 클라이언트를 동시에 시작할 수 있다.

 

그리고 통신을 시작하기 전 간단한 환경설정을 해줄건데, vue.config.js 파일을 만들어서

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

이런식으로 작성해준다면 '/api' 의 주소로 api요청이 있을 때 어디에서 처리할지 결정해준다. 

나는 로컬에서 테스트를 했기때문에 서버 주소인 http://localhost:3000 (포트넘버3000)에서 받겠다고 선언해줬다.

pathRewrite 부분은 api/블라블라123 이라는 주소로 왔을 경우에 앞부분인 api/부분은 빼고 블라블라123 라는 주소로 받을 수 있도록 처리해줬다. 

 

환경설정이 끝났다면 이제 통신할 일만 남았따. vue와 express의 api통신을 위해 axios를 받아주자.

npm install axios

const axios = require('axios');

export const login = {
  actions:{
  	test(){
    	return new Promise(() => {
    		axios.post('api/test');
        }
    }
  }
}

그리고 store에서 axios를 require해서 받아온 후 actions를 통해 api통신할 주소를 적어서 보내고

api요청을 받아올 준비를 하자.

만약 express가 설치되어 있지 않다면 express를 먼저 설치해주고, 

npm run express

const express = require("express");
const app = express();

app.listen(3000)

app.post("/test", (req, res) => {
  console.log("통신성공~");
});

 통신성공~.