📚 이론정리/React & Next.js

✏️ Render로 배포하기(Client, Server)

서카츄 2024. 8. 17. 01:37

 

socket.io와 Express를 사용해서 채팅을 연습하려고 만들었는데,

Vercel에 배포를 하려다 보니 Vercel은 클라이언트에만 초점을 맞춘 플랫폼이고

찾아보니 서버리스를 활용하여 활용해도 됐지만 복잡한 Express의 기능을 완전히 실행하는것이 어렵다고 한다.

그래서 결국은 Express같은 백엔드 서버는 지원이 안되다보니 결국 다른 컴퓨터에서는 통신이 안되고 있었다!

AWS를 사용해도 되지만, 일단 연습이니 간단하게 서버와 클라이언트 전부 지원이 되는 Render로 배포를 시작해 보기로 했다.

 

 

 

 

 

Render 사이트

 

Cloud Application Hosting for Developers | Render

Render is a unified cloud to build and run all your apps and websites with free TLS certificates, global CDN, private networks and auto deploys from Git.

render.com

 

사이트로 들어가서 회원가입을 해준다.

 

 

 

 

 

 

 

그리고 대시보드로 가서 New를 클릭해준다.

 

 

 

 

 

 

 

 

WebService를 클릭해준다.

 

 

 

 

 

 

 

 

 

나는 깃허브에 코드가 있으니 깃허브와 연동해준다.

 

 

 

 

 

 

 

연동해주면 내 브랜치에 있는 리스트들이 나오는데,

배포할 브랜치를 선택하고 Connect를 눌러준다.

 

 

 

 

 

 

 

 

Node를 쓰고있으니 node로 세팅,

main브랜치를 배포할거니 main으로 세팅,

싱가폴은 서버가 싱가폴에 있다는 내용이라 제일 빠르고 가까운 싱가폴로 선택

클라이언트는 npm install, npm run build로 깔아주니 세팅해둔 내용 그대로 진행해주고

서버포트를 열때는 node server.js 로 열어서 저렇게 세팅을 해주었다.

환경변수는 없어서 생략하고 그대로 진행했다.

 

 

 

 

 

 

 

그럼 자동으로 배포가 진행되면서, 성공한 모습을 볼 수 있다 😁

 

 

 

 

 

 

배포가 완료되면 왼쪽 위에 링크로 들어가서 확인해 볼 수 있다.

간단하게 구현해본 내가 만든 오픈채팅 배포 완료!!!

 

 

 

 

마이그레이션으로 AWS로도 배포 연습 해봐야겠다... 총총