[React + Node.js + Mongo DB Atlas] Netlify(프론트엔드 배포) + Elastic Beanstalk(백엔드 배포) 배포하고 연결하기

풀스택 앱을 배포하는 과정을 연습해보기 위해 진행했는데, 아무리 찾아도 제대로 정리해놓은 글이 없어서.. 내가 작성하기로 했다. React 와 Node.js의 Express 프레임워크를 이용해 만든 프론트, 백엔드를 각각 다른 툴로 배포하여 연결할 것이다. 프론트엔드는 Netlify, 백엔드 배포는 AWS의 Elastic Beanstalk를 이용한다. DB는 몽고DB의 Atlas를 이용하였다. 만고의! 삽질 끝에 확실한 방법을 찾은 것이니 그대로 따라하기만 하면 된다.. ㅠㅠ * AWS 프리티어(무료)에 가입했다는 전제로 진행한다 * 개발 환경 Frontend : React Backend : Node.js Express DB : MongoDB Atlas 배포 환경 Frontend : Netlify Bac..

• format_list_bulleted AWS/Elastic Beanstalk
• · 2023. 1. 15.
• textsms

[AWS 3S] Node.js 에서 .env 파일을 이용하여 S3 버킷 이용하기 ( 버킷에 파일 저장 + 버킷 객체 목록 읽기 )

앞서 프론트에서 진행했을 경우의 위험성을 살펴 보았다. 우리는 가난하기 때문에 과금을 감당할 수 없다. 과금당하지 않기 위해 .env 파일을 만들어, 소중한 key값을 환경변수에 등록하고 사용해보자. 이 글은 Express를 기본적으로 사용할 수 있다는 전제로 진행하지만, 전체 코드와 부분 부분 Node.js를 설명하는 글을 첨부하였기 때문에 조금 서툴더라도 따라할 수 있을 것이다. aws 서비스를 이용하려면, 내가 '이 서비스를 이용할 자격이 있는 사람임' 을 알려주어야 한다. 공식 가이드에서는 다음과 같은 5가지의 방법을 제시하고 있다. 서버(EC2)로부터 IAM Roles를 얻어 연동 서버의 ~/.aws/credentials 경로의 파일에 자격증명 입력하여 연동 환경변수에 자격증명을 저장하고 연동 ..

• format_list_bulleted AWS/S3
• · 2023. 1. 2.
• textsms

[AWS S3] React 에서 버킷 속 객체 리스트 불러오기 ( ListObjectsV2 )

내가 만든 특정한 이름의 버킷에 저장되어있는 모든 버킷을 불러와보자. 마찬가지로 백엔드에서 처리할 필요 없이, 프론트단에서 할 수 있다.(사실 이렇게 하면 안된다. 이유는 뒤에서 설명..) JS환경에서 진행하며, 공식 문서와 함께 스크린샷으로 진행 방법을 상세히 안내하였으니 차근차근.. 빠르게 따라와도 해낼 수 있다. 전체 코드는 언제나처럼 제일 하단에 작성하였다. [더보기]를 클릭하면 된다. AWS 공식 문서는 깔끔하고 악랄하다. React 문서를 읽으면서 우와 공식문서 짱이다 했는데 AWS를 읽으면서는 8지옥을 도는 것 같았다.. 거미그물 같은 곳이라 한번 들어가면 걸려서 못 나온다. 한국어로 읽어도 잘 모르겠는데, 아직 번역되지 않은 문서들이 많기 때문에 읽으면 읽을수록 모르는 미궁에 빠지는 경험을..

• format_list_bulleted AWS/S3
• · 2023. 1. 2.
• textsms

[AWS 3S] React에서 S3에 이미지 업로드하기

처음 웹개발을 배우는 사람들은, 파일 저장을 배울 때 이렇게 배웠을 것이다. '백엔드에 formData를 전달해, 로컬 서버(내 컴퓨터)에 파일을 저장한다' 고 ...(나도 그랬음) 하지만 S3는 내 컴퓨터가 아닌 외부 서버이다. 즉, 남의 컴퓨터에 파일을 저장한다는 뜻이다. 따라서 굳이 백엔드로 전달해 어쩌구 라이브러리를 써서 설정한 다음 내 컴퓨터(로컬)에 저장하고 뭐시기.... 라는 긴 과정을 거칠 필요가 없다. aws의 aws-sdk 라는 라이브러리를 설치해 사용 방법 대로만 해주면, 프론트엔드에서 바로 S3로 파일을 전송해 저장할 수 있다. S3의 버킷은 우리에게 URL 형태의 파일을 제공해주므로 그를 돌려받아 페이지에 바로 뿌릴 수도 있다. 물론 multer와 aws-sdk, multer-3s..

• format_list_bulleted AWS/S3
• · 2023. 1. 1.
• textsms

[AWS S3] AWS 버킷 생성과 권한

13. React와 Node.js를 이용해 이미지를 AWS S3에 저장해본다. 그런데, S3란 무엇일까? 아마존 S3는 아마존 웹 서비스에서 제공하는 온라인 스토리지 웹 서비스이다. 아마존 S3는 웹 서비스 인터페이스를 통해 스토리지를 제공한다. S3의 풀네임은 Simple Storage Service이다. S가 세개 있다고 해서 3S로 축약되었다. 직역하자면 '간단한 스토리지 서비스' 인데, 어렵게 설명할 필요 없이 그냥 '파일 서버 역할을 해주는 서비스' 이다. S3에 이미지나 파일을 저장하면, '아무에게나 제공할 수 있는 URL' 형태로 돌려받을 수 있다. 개인이 가지고 있는 S3 스토리지 하나를 '버킷'이라고 한다. 직역하면 바구니이다. 즉 S3 버킷은 나만의 파일 바구니를 만들어서 물건을 넣어두..

• format_list_bulleted AWS/S3
• · 2023. 1. 1.
• textsms