클라우드 타입(CLOUD TYPE)으로 MariaDB, Node.js, React 배포하기 - React 배포

React 배포

1. 아래와 같이 나의 스페이스에 들어가면 +가 뜨게 되는데 이를 클릭
   

2. React를 찾아서 클릭
   

3. 아래와 같이 연결할 깃허브 repository 선택, 서비스명 작성, 서비스를 넣을 프로젝트 선택

4. env 파일에 작성했던 값을 작성

   내가 env에 작성한 REACT_APP_BACK_URL은 백엔드 주소로 앞서 Node.js를 연결했기 때문에 해당 서비스의 호스팅 주소를 작성함

5. Node.js 버전은 깃허브 repository에 있는 node.js의 버전을 확인하여 동일한 버전으로 선택하고 이외 필요한 내용 작성
   

6. 하단의 deploy 클릭하면 배포 완료

CORS 오류

호스팅된 프론트 주소를 백엔드에서 막기 떄문에 호스팅된 주소를 허용하는 코드 작성 필요하여 백엔드의 index.js에 아래 코드 추가

나는 env에서 호스팅 주소를 가져오도록 작성해두어서 앞서 진행했던 Node.js 서비스의 env 작성부분에 해당 주소들을 작성한 후 다시 배포하였다.

const corsOptions = {
    origin: [
        process.env.SERVER_ADDRESS, // Node.js 호스팅 주소
        process.env.SERVICE_ADDRESS, // React 호스팅 주소
        "http://localhost:3000",
    ],
    methods: ["GET", "POST", "PUT", "DELETE"], // Allowed HTTP methods
    allowedHeaders: ["Content-Type", "Authorization"], // Allowed headers
};

app.use(cors(corsOptions));

마무리

이렇게 MariaDB - Node.js - React를 활용한 프로젝트 최종 배포 대장정을 마무리 하였다.

이번 배포 과정에서 도움을 받은 블로그글은 아래와 같다.

• halloyun.log
• 개발일지
• 오창현의 개발일지

나의 글도 누군가에게 도움이 되기를!