클라우드 타입으로 React 프로젝트 배포하기(with. express.js, mariadb)

교육과정에서 AWS에 배포하는게 있었다. 따로 인스턴스를 학생들에게 주고 거기에 jenkins와 k8s를 통해서 배포 자동화까지 이어지는데 도저히 모르겠어서 그만둘까 하던 도중, 배포는 꼭 해보고 싶어서 다른 배포 사이트를 찾아봤더니 국내에서 운용하는 cloudType이라는 배포 서비스를 찾았다.
몇몇 블로그에서 사용후기도 보았고 개발자분과 디스코드로 대화도 된다고 해서 한번 사용해보기로... 무료티어도 있어서 도전!

참고한 블로그는 참고 블로그 여기였는데 나와 프로젝트 구조가 거의 비슷해서 참고했다. 블로그 글에서는 백엔드 -> 프론트 -> 환경변수 설정하고 백엔드 재배포라는데 따라해서 문제는 없으니 일단 백엔드부터 배포해보자.

백엔드 배포

일단 나는 백엔드와 프론트엔드를 따로 깃허브 레포지토리를 생성하였다. 먼저 백엔드 레포지토리를 연결하고 node.js를 선택한 뒤 프로젝트 버전을 선택한다. 기본은 16으로 설정되어있는데 나는 20이라 20으로 변경하였다.

그 외에 env 파일에 설정한 값을 추가해준다.
port 번호도 기존에 쓰던 port로 해줬다.

start 커맨드는 서버 실행 커맨드를 적어줬다.

그리고 배포하기를 누르면 잘된다! 아까 말했듯 포트번호를 2번 기입한 것과 자잘하게 깃허브 파일이 덜 올라간거에서 오류가 났던거 외엔 수월하게 배포하였다.

만약 오류가 난다면

오른쪽 하단의 터미널 버튼으로 확인이 가능하다.

막상 올리고 났더니 프론트부터 하는게 더 편한거 같다는 생각이...

프론트 배포

일단 이렇게 작성하고 배포를 해보았다. 실행중이라는 문구는 뜨지만 조금 더 기다리면 화면이 잘 뜬다!

참고로 리액트에서 .env파일을 불러올때는 앞에 REACT_APP을 써줘야 인식한다. 이것만 바꿔주고 따로 dotenv를 import 하지 않았다.

배포 한 후에 cors 오류가 나서 backend 단의 app.js 를 수정했다.

app.use(
    cors({
        credentials: true,
        origin: [
            "https://port-0-note-backend-85phb42blv0rx7ex.sel5.cloudtype.app",
            "https://web-note-front-85phb42blv0rx7ex.sel5.cloudtype.app",
            "http://localhost:3000",
        ],
        exposedHeaders: ["Authorization"],
    })
); // 모든 출처에서의 요청 허용

프론트와 백배포 주소를 추가해줬다.

mariaDB 배포

일단 DB 만드는 법은 너무 쉽다...문서 그대로 따라하고 테이블을 만들어주면 된다.

https://docs.cloudtype.io/guide/databases/mariadb

backend env에 db 값들을 설정해주고 추가로 배포된backend의 환경변수 설정에 배포한 mariadb 값을 넣어주면 된다.