EB_썼으면_압축만_450번함
aws는 안정성이 뛰어나고 효율적인 관리가 가능한데다 유명하지만, 나같은 프리티어 개발자에게는 언제 과금의 위험이 생길지 모른다는 크나큰 두려움이 있다. 배포 자동화를 해도 되는데 그럼 과금당할 여지가 너무 커짐.. 그렇다고 백엔드를 수정할 때마다 압축파일을 업로드하자니 너무 번거롭다. 예전에는 이런 과정을 해결해주는 헤로쿠를 통해 배포가 가능했지만, 프리티어 서비스를 종료한 헤로쿠로는 더이상 백엔드를 무료로 배포할 수 없다. 헤로쿠의 차세대로 요즘은 Fly.io 를 많이 선택하는 것 같았는데, 찾아보니 국내에! 일정 용량의 무료 배포를 지원하는 클라우드 서비스가 있다고 해서 한번 사용해 보기로 했다. 깃허브 연결도 되고, 깃허브 액션을 통해 배포 자동화도 할 수 있다고 한다.
배포는 하루하고 반나절은 헤매야 꿀맛
EB랑 차이점이 좀 있어서 바보같은 부분에서 헤맸는데, 사실 클라우드 타입의 예시 코드를 한번이라도 뜯어봤으면 알 수 있는거였다. 포기하고 누워있다가 난데없이 클라우드타입 코드 구경하고 정답을 찾아냄 ㅠ ㅠ(그냥 프로 개발자는 어떻게 코드를 짤지 구경하려고 깃허브 마구 들어가본거였는데)
막상 완료하고 나니 나처럼 헤멜 일은 많이 없을 것 같고, 클라우드타입이 제공해준 예시 영상과 코드를 잘 보면 3분만에도 풀스택 배포가 가능할 듯 하다. 클라우드 타입의 무료 티어가 생각보다 괜찮고, 나의 수많은....... push를 한번도 과금하지 않고 견뎌준 덕분에 정말 편하게 12시간동안(큽..) 헤맸다. 초보 개발자에게는 이렇게 돈 걱정 없이 무료로 경험해볼 기회가 참 소중하다. 한편으로 클라우드타입의 컴퓨터에게 참으로 미안한 시간이었다 .... 견뎌줘서 고마워요 클탑
문제를 겪는 동안 검색으로 해결해보려 했는데 시작한지 얼마 안 된 서비스라 그런지 글이 별로 없었다. 그런데 체감상 1달만 지나도 진짜 국내 주니어 개발자는 모두 이걸 사용하고 있지 않을까 싶은..?? 터미널도 잘 되어 있어서 차세대 헤로쿠라고 불릴 여지가 충분하다. 아니 사실 훨씬 간편하고 쉽고, 한국어로 되어있다는 점에서 헤로쿠보다 2000% 나은 성능을 자랑한다. 오후 5시 30분이었는데도 질문 드리자마자 답변해주신 클라우드타입 개발자 운영자분께 정말로 감사드립니다 ... (ㅠㅠ♥)
Cloudtype으로
React 프런트 + Node.js 백엔드 배포하여 연결하기
배포 링크 : https://web-boiler-frontend-1jx7m2gld43p7bv.gksl2.cloudtype.app/register
개발 환경 : React, Node.js Express, MongoDB Atlas
모두의 플랫폼팀, 클라우드타입
클라우드타입은 클라우드 기반 애플리케이션을 빠르게 개발하고 배포할 수 있는 클라우드 애플리케이션 플랫폼입니다.
cloudtype.io
만일 몽고db 아틀라스를 이용중이라면 ① MongoDB Atlas 설정하기(Click!) 라는 글을 참고한다. 1번 과정만 하면 됨!
나머지 db는 클라우드 타입의 공식 문서 : https://help.cloudtype.io/guide
또는, 영상을 참고하면 될 것 같다. : https://www.youtube.com/watch?v=h8S0_XMvvwk
클라우드 타입은 정적 사이트 배포와 백엔드 배포를 모두 할 수 있는 클라우드 타입의 플랫폼이다! 디스코드 채널을 운영중이고, 답변이 굉장히 빨리 온다. (신기방기..) 나는 내 백엔드와 프론트 프로젝트를 모두 Private로 깃헙에 올려 관리하는 중이기 때문에, 템플릿으로 시작하기를 눌러 깃헙을 연결해 주기로 했다.
깃허브를 연결했다면, 진행하기에 앞서 설정 순서를 알아보자. 엥 이렇게 해야해? 싶을 수 있는데, axios와 express의 cors 라이브러리를 사용하고 있다면 이렇게 해야한다. 12시간동안 삽질해서 알아낸 결과다 ㅠ-ㅠ..
백엔드 배포 -> 프런트 배포 -> 프런트의 환경 변수에 백엔드 주소 기입 -> 백엔드에 cors 설정하여 github에 push하고 재배포 -> 완료 |
1. 백엔드 배포하기
* 참고
백엔드의 index.js PORT는 이렇게 설정되어 있다. port가 아니라 대문자로 PORT로 해주어야 잘되던...
const PORT = process.env.PORT || 8080;
app.listen(PORT, () => {
console.log(`Server Listening on ${PORT}`);
});
깃허브로 로그인하고, 연결하기만 하면 바로 깃허브 저장소를 선택할 수 있다. 왼쪽과 같은 창이 뜰텐데, 리전을 선택하고 넘어가기 전에 반드시 오른쪽과 같이 [설정 변경] 창을 클릭해서 나에게 필요한 환경변수를 모두 설정해 주어야 한다.
개발할 당시에 .env 파일에 적었던 모든 것을 저곳에 적어준다고 생각하면 된다! mongoURI를 통해 몽고디비의 아틀라스를 연결하고 있다면, 몽고 uri 도 저곳에 입력해 주어야 한다.
참고용으로 내가 설정한 백엔드 환경 변수들을 첨부했다. (이후 이름 다 바꿀 예정)
[배포하기] 를 클릭하면 곧장 배포가 시작된다. 저렇게 Build jop complete가 뜨고 3분쯤 지나야 실제로 적용된다.
끝나고 나면 프로젝트가 배포된 화면으로 이동할텐데, [접속하기] 버튼을 클릭하고 주소창을 복사해둔다. 이것이 나의 백엔드 도메인이 된다.
AWS에서 하던 버릇이 들어서 아 이제 또 인증 삽질을 해야하는군..싶었는데 잘보니 https였다! 클라우드 타입은 자동으로 TLS가 발급된다. 따라서 한번에 프론트와의 연결이 가능하다. (댑악..)
2. 프런트 배포하기
따라서 바로 프론트로 들어가주기로 했다. 우선, setupProxy의 타겟을 8080 포트로 바꾼다.
const { createProxyMiddleware } = require("http-proxy-middleware");
module.exports = function (app) {
app.use(
"/api",
createProxyMiddleware({
target: "http://localhost:8080",
changeOrigin: true,
})
);
};
그리고 + 버튼을 눌러, 리액트 배포를 시작한다. 근데 그전에
여기서 꿀팁 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
나는 6시간동안 cors과 POST 405 속에서 고역을 앓아야 했는데..ㅠㅠ 예시를 조금만 뜯어보면 알 수 있는 문제였다. 클라우드 타입에는 React + Spring + Maria DB를 연결한 예제가 있는데, 그곳의 리액트 프로젝트를 뜯어보니 엔드포인트를 모두 환경변수로 지정해주고 있었다. 우리도 반드시! 똑같은 방법을 사용해야만 백엔드와의 연결을 할 수 있다... 우선, React에서 백엔드에 REST api를 요청할 때 아래와 같은 방식으로 요청해야 한다.
이렇게 하기 위해서는 React 프로젝트의 루트 디렉토리에 .env 파일을 만들고, REACT_APP_어쩌구 형식으로 api의 엔드포인트를 만들어 주어야 한다.
예를 들어
/api/school/하위경로
로 api들을 요청하는 상태라면, .env 파일에 아래와 같이 입력해준다. 반드시 REACT_APP 으로 시작해야 리액트가 .env 파일을 읽을 수 있다. (리액트만 그럼)
REACT_APP_작명=/api/school
그리고 만일 나처럼 axios 라이브러리를 사용하고 있다면, { withCredentials:true } 인자를 요청에 반드시 포함시켜 주어야 한다. 모든 요청에 이렇게 해주어야 함!
axios
.post(`${process.env.REACT_APP_작명}/하위경로`, 보낼데이터, {
withCredentials: true,
})
지금까지도 중요했는데 이제부터가 진짜 중요하다. 우선 저장소를 연겨랗고, 언어를 선택한 후 애플리케이션 설정을 web으로 해 준 뒤에, [더 많은 옵션] 을 클릭한다.
Build Variables에서, React 앱에서 작성한 .env 파일의 api 환경변수를 등록해 주어야 한다. 이때, 값에는 복사해둔 백엔드 주소/api/어쩌구 형식으로 기입해야 한다..! 위에서 예시로 든 REACT_APP_작명=/api/school 를 기준으로 설명하자면,
왼쪽에는 REACT_APP_작명
오른쪽에는 복사한백엔드주소/api/school
을 입력해야 하는 것이다. 여러개의 엔드포인트가 있다면 그것을 모두 같은 형식으로 적어주어야 한다.
이제 배포하기를 눌러 배포하고, 기다리면 된다. 배포가 완료되면 [ 접속하기 ] 를 클릭해, 다시 주소값을 받아와야 한다. 아직 cors 오류를 해결하지 않은 상태이기 때문이다.
3. 프런트와 백엔드간의 통신 CORS 해결하기
Express를 사용하고 있으므로, cors 라이브러리를 통해 손쉽게. . . ^ ^ , .. .... 해결할 수 있다. 백엔드의 index.js 에 작성한다. 내가 구글 블로그에서 광명을 찾은 것 처럼, 나의 12시간이 누군가의 1분이 되기를... 아래 코드를 사용하되, 백엔드를 배포한 주소와 프론트를 배포한 주소를 잘 기입하면 된다!
const cors = require("cors");
app.use(
cors({
origin: [
"백엔드주소(ex:https://어쩌구주소.cloudtype.app)",
"프론트주소(ex:https://어쩌구주소.cloudtype.app)",
"http://localhost:8080",
],
methods: "GET,HEAD,PUT,PATCH,POST,DELETE",
preflightContinue: false,
optionsSuccessStatus: 204,
credentials: true,
})
);
git add, git commit, git push를 통해 깃허브 레포지토리에 반영해준 뒤 클라우드 타입에서 백엔드를 배포한 곳에 접속하여 [설정] 을 누르고,
아래 설정들을 추가한다.
● Publish ports : 8080/http
● Install command : npm ci --production
(Start command는 npm start를 할 때 실행되는 경로를 나타내는데, 나는 server 폴더 안에 index.js와 각종 라우터 파일들을 넣어줘서 저렇게 했다. 보통은 sever 파일 속에서 깃 레포지토리를 연결할테니, 그냥 index.js나 server.js 등 자신이 작명한 루트 서버 파일명에 맞게 적으면 될 것이다.)
그리고 [배포하기] 를 누른 후에, 10분정도 기다려준다. 너무 긴 시간이지만(ㅋㅋ) 그정도는 기다려줘야 제대로 반영된다. 사실 3분정도면 반영되는 것 같았는데, 나는 성급하게 1분만에 눌러보고 왜 안되냐고 씅냈기 때문에.. 10분정도 차분히 기다려 주었다. 개발자의 소양은 인내심,,, 나는 우유에 제티를 하나 타와서 기다렸다. 그리고 다시 프론트 프로젝트에 들어가주면...!
*참고로, 배포할 때는 console.log를 모두 지워줘야 한다. 안그러면 나처럼 저렇게... 배포 후에도 콘솔창에 콘솔 로그가 남는다. 에러를 겪으면서 메모를 하고 싶어서 콘솔을 마구 작성했기 때문에 지금은 지워준 상태이다! 배포 끝 ~ ㅠ ㅠ
배포 완료된 주소 : https://web-boiler-frontend-1jx7m2gld43p7bv.gksl2.cloudtype.app/register
후기 :
생각보다 너무 편했어서, 완성하게될 보일러 플레이트를 내 플젝 소개 풀스택 페이지 삼아 유료 호스팅을 해볼까 한다. 로컬 로그인을 구현하고 배포한 다음 당장 배포 자동화를 해볼 예정!
댓글