vue3를 사용하여 게시판 화면을 개발하다가 데이터베이스와 통신하며 데이터를 조회하거나 수정 등의 기능이 필요해서
프록시 서버를 구축해보기로 했다.
node.js의 기능 중 express를 프레임워크로 사용하여 구축하였다.
프론트서버 + express(백엔드 서버) + Database 구성이기 때문에 Databas가 미리 설치 및 구성이 되어있어야 한다.
단순 테스트이기 때문에 서버를 외부로 나누진 않고 모두 로컬 PC 에서 진행했다.
vue 3
Node.js v20.12
Mysql 8.0
express 서버를 만들기 전에 먼저 프론트에서 클라이언트의 요청을 proxy를 통해
express 서버로 전달되게 설정했다.
테스트했던 프론트엔드 라이브러리가 Vue3 였기 때문에 vue.config.js를 수정한다.
http://localhost:3000 주소가 express가 통신하는 주소가 된다.
프론트엔드 역할을 하는 서버의 package.json에도 proxy 설정을 추가해줘야 한다.
프론트 서버에서의 프록시 설정이 완료되었고, 실제로 프록시를
사용하는 코드를 작성한다.
axios 모듈을 사용했으며, 라우팅 목록에 '/test' 는 없기 때문에 프록시 주소로 요청하게 된다.
이제 백엔드 서버를 만들기 위해 다른 디렉터리에서 새 프로젝트를 시작한다.
먼저 익스프레스와 마이에스큐엘 패키지를 다운 받는다.
> npm install express mysql
package.json 파일의 "scripts" 부분에 "start" 명령어를 사용할 수 있게 추가한다
express와 데이터베이스를 연동시키기 위해 먼저 데이터베이스 접속 정보를
database.js 파일을 생성하여 작성한다.
index.js 파일을 만들고 아래와 같이 전부 작성한다.
이제 통신을 테스트하기 위해 express 서버를 가동시킨다
> npm start
'express server listening on port 3000' 이라는 메시지가 출력되면서
터미널이 입력 불가 대기 상태가 된다.
프론트 서버에서 작성한 requestAPI 메서드를 실행 시키면 아래와 같은 내용이 express 터미널에 출력된다.
Database의 내용이 정상적으로 조회되면 proxy를 통한 express 백엔드 서버 구축이 성공한 것이다.
express 코드를 수정할 경우 express server를 재시작 해주어야 수정한 코드가 반영된다.
결과 화면
axios를 사용할 때 post 방식으로 파라미터를 전달 할 때는 리퀘스트의 .body를 통해 파라미터를
받을 수가 있다.
express 서버의 터미널에 body의 내용이 콘솔로 출력된다.
