점메추 프로젝트 배포(Feat. vercel, cloudtype)

📝 현황

• 점메추 프로젝트는 한참 코드스테이츠 부트캠프를 병행하며 약 3주간 진행했던 프로젝트였다.
• React 라이브러리를 처음 배운 상태에서 진행했던 첫 프로젝트다 보니, 지금 돌이켜 보면 정말 부족한것도 많아 보인다.
• 목표했던 기능은 구현을 완료 했으나, 시간상의 문제로 배포까지는 완료하지 못한채 마무리 되었다.
• 부트캠프도 수료하였고, 이전에 완료하지 못했던 배포작업을 진행해보려고 한다.

 

🔍️ 어떤 문제로 배포에 실패했던 걸까?

• vercel과 github page 플랫폼을 이용하여 배포를 시도 했으나, 실제 네이버 API 통신을 하는 로직이 동작을 하지 않았다.

네이버 API 로직이 동작하지 않는 모습

• 사실 네이버 API는 javascript 환경에서 보안상의 이슈로 CORS를 허용하지 않는다. 따라서, 네이버에서도 javascript 환경에서 사용하려면 동일한 도메인을 갖는 Backend 서버에서 API을 호출하는것을 권장하고 있다.
• 개발 당시에는 배포까지는 고려하지 않고, CORS 에러를 회피하기 위해 http-proxy-middleware 라이브러리를 이용하였는데, 이것이 배포시 문제가 되었던 것이였다.
• 따라서, 정상적으로 배포를 하기 위해서는 Backend 서버를 구축해야만 하는 상황이다.

 

🏗️ Backend 서버를 구축해보자!

• 부트캠프 과정에서 node 플랫폼의 express 프레임워크를 배웠던 경험을 바탕으로, express를 이용하여 간단하게 서버를 구축해보려고 한다.
• 아래부터는 express 서버 구축 과정입니다!

✅ express 서버 구축 과정

1. npm install express-generator -g   // express 설치
2. cd "프로젝트 위치"   // 프로젝트의 디렉토리로 이동
3. express server   //server 폴더에 express 초기셋팅
4. npm install -g nodemon  // nodemon package 설치 (새로 수정시 마다 서버를 새로 껏다켜지 않아도됨)
5. npm install cors   // cors 미들웨어 설정위한 package 설치 

5. cors 를 import하고, 미들웨어로 등록하는 코드

6. server > bin > www 파일 포트 번호 설정

8080으로 포트 설정

• 여기 까지 한뒤 http://localhost:8080/ 에 접속해 보자

express 서버 동작 확인

 

7. 프론트에서 요청 보내는 라우트 생성 + API key 환경변수 설정
 -  server > routes > naver.js 파일 생성
 -  server > app.js 파일 수정

// naver.js 코드 일부

var express = require("express");
var Axios = require("axios");
var router = express.Router();
require("dotenv").config();

// 네이버 검색 api
router.get("/search", async function (req, res) {
  let query = req.query.query;
  let reqOptions = {
    headers: {
    // API키는 env를 통해 환경변수로 설정
      "X-Naver-Client-Id": process.env.X_NAVER_CLIENT_ID,
      "X-Naver-Client-Secret": process.env.X_NAVER_CLIENT_SECRET,
    },
    params: {
      query: `서울 ${query}`,
      display: 5,
    },
  };
  try {
    let response = await Axios.get(
      "https://openapi.naver.com/v1/search/local.json",
      reqOptions
    );

    // 성공한 경우, JSON 응답 반환
    return res.json(response.data);
  } catch (e) {
    // 에러 발생 시, 에러 정보와 상태 코드 400을 클라이언트에게 반환
    console.error("API 요청 에러:", e);
    return res.status(400).json({
      status: 400,
      message: e.message,
    });
  }
});

// app.js 코드 일부

var createError = require("http-errors");
var express = require("express");
var path = require("path");
var cookieParser = require("cookie-parser");
var logger = require("morgan");

var indexRouter = require("./routes/index");
var naverRouter = require("./routes/naver"); // naver api 요청보내는 라우트 임포트

~

app.use("/naver", naverRouter);  // ~/naver 주소로 미들웨어 등록

~

• 여기 까지 진행 후http://localhost:8080/naver/search?query=강남구중식 url로 접속해보자.

네이버 API가 정상적으로 동작하는 모습이다.

• 프론트에서 요청을 보내면 express 서버에서 네이버 api 요청을 보내 정상적으로 데이터를 응답받고 있다. 해당 응답을 다시 프론트쪽으로 보내주면 완성인것이다!

8. 프론트쪽 코드도 express 서버로 요청을 보내도록 코드를 수정

// Recommendation.jsx 코드 일부

const fetchData = async () => {
      try {
        const response = await axios.get(
          "http://localhost:8080/naver/search", //express 서버로 요청을 보냄
          {
            params: {
              query: `${inputValue} ${food} `,
            },
          }
        );
        const randomItems = getRandomItems(response.data.items, 2); // express 서버에서 네이버 api를 통해 받은 응답값을 받아서 가공

 

 

✅ express 서버 배포 과정

• 위의 과정을 거쳐 express 서버 구축은 성공적으로 완료하였다.
• 하지만, 위의 코드는 내가 local 서버를 계속 열고있을때만 api 통신 로직이 동작하기 때문에, 정상적으로 프로젝트를 배포하기 위해서는 서버 또한 배포해야하는 과정이 남아있다.
• 어떤 배포 플랫폼을 이용할까 고민하다가, AWS EC2는 한번 해봤기 때문에 다른 플랫폼을 찾아보았다.
• 그 중, 클라우드타입(cloudtype) 이라는 플랫폼을 발견하였다.
• 무료이며, 개발용으로는 충분한 스펙과 TLS인증서, 그리고 github과의 연동되어 간편한 배포 방식 등의 메리트가 있어 해당 플랫폼을 선택하게 되었다.

클라우드타입 무료 지원 목록

 

 

• 실제 배포 과정은 간단한 편이라 사진으로 대체하도록 하겠습니다.

1. + 버튼을 눌러 배포할 프로젝트를 선택한다

2. node 서버를 배포해야 하기 때문에 node.js 선택

3. github와 연동이 가능하니, 연동하도록 하자.

5. 연동 성공, 나머지 설정을 완료해주도록 하자.

6. 포트번호, install command, start command를 설정해주고 배포하기 버튼 클릭한다.

7. 정상적으로 빌드가 완료되었다.

도메인 주소

• 배포 서버 도메인 주소가 나왔으니, 프론트 API 통신 url을 localhost:8080 에서 위의 도메인 주소로 바꾸도록 하자.

// Recommendation.jsx 코드 일부

const fetchData = async () => {
      try {
        const response = await axios.get(
        // 배포 서버 도메인으로 변경
          "https://port-0-lunch-recomandation-euegqv2blnmkyp8j.sel5.cloudtype.app/naver/search",
          {
            params: {
              query: `${inputValue} ${food} `,
            },
          }
        );
        console.log(response);
        const randomItems = getRandomItems(response.data.items, 2);

 

🚨 배포 과정 중 Error

• 배포 과정중 여전히 express 서버에서 네이버 API 요청이 정상적으로 이루어지지 않는 에러가 발생하였다.
• 원인은 바로 서버에서 API key를 환경변수로 빼놓은것을 배포시에 적용을 안했기 때문이다!

프로젝트 설정에서 환경변수인 API KEY값을 입력해주도록 하자.

 

🌱 배포 결과 

• client는 vercel로 배포하였고, server는 cloudtype을 통해 배포에 성공하였다.
• 점메추 프로젝트  < 클릭하여 배포된 프로젝트를 확인 할 수 있습니다.
• 배포는 성공하였으나, 아직 부족한 점이 많은 프로젝트라 같이했던 팀원분과 상의해서 더 나은 버전으로 찾아 볼 수 있으면 좋겠습니다!

프로젝트 배포에 성공한 모습