React 로 Netlify 배포 해보기.. feat.Heroku

저번에 안되었던 문제를 드디어 알게되었다.

바로 프록시 서버는 개발 환경에서만 된다는 것이었다.

 

서버 구축하기 싫어서 우회하려고 했더니 결국은 서버를 만들게 되었다.

CORS 오류가 자꾸나서 홈페이지 배포는 성공했지만 공공API를 읽어오지 못하는 것이었다. (이것 때문에 3시간을 헤매었다)

+ http 프로토콜로 제공됨..

 

그래서 어떻게 해야하나 알아보다가 헤로쿠라는 사이트가 있다고 해서 사용해보기로 하였다.

https://devcenter.heroku.com/articles/heroku-cli#install-the-heroku-cli

The Heroku CLI | Heroku Dev Center

위의 방법대로 터미널에 다운 받아준다.

brew tap heroku/brew && brew install heroku

 

 

 

이제 서버를 구축해볼 차례이다..

 

npm init -y

package.json 파일 만들어주고

 

npm install express nodemon concurrently

익스프레스 등 다운, concurrently는 리액트와 익스프레스를 동시에 실행시켜주는 모듈이라고 함

 

// express 모듈 불러오기
const express = require('express');

const app = express();
const port = 5001;
app.listen(port);

app.use('/api/data', function(req, res) {
    res.json({ testing: 'Hello' });
});

console.log(`server running... ${port}`);

http://localhost:5001/api/data 에 접속해보면 json으로 보낸 객체를 확인할 수 있다.

 

위의 과정을 거친 후 깃에 올려준다!

 

헤로쿠 연동하기

heroku login

해당 명령어를 입력 후 아무 키나 눌러서 헤로쿠에 로그인해줄 수 있다.

heroku create 프로젝트이름
git remote -v

로그인 한 다음 프로젝트명을 지어서 만들어주고 깃과 연동시켜준다.

 

git push heroku main

 

이렇게 일단 로컬에서 데이터를 가져와서 다시 뿌려주는 것은 성공했다!

하지만... 헤로쿠가 왜 빌드가 안되는 것인가...?

구글링하는 중이지만 며칠 째 해결하지 못하고 있어서 fly.io 를 사용해야하나 많은 고민을 하고 있다.

 

 

 

참고 :::

https://velog.io/@kskim625/React-Express-Heroku-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0

React + Express >> Heroku 배포하기

https://velog.io/@recordboy/Express-React-%EC%97%B0%EB%8F%99-%EB%B0%8F-Heroku%EC%97%90-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0

Express + React 연동 및 Heroku에 배포하기

https://xiubindev.tistory.com/115

나를 너무나 힘들게 했던 CORS 에러 해결하기 😂