= Amazon S3에 React 앱 배포 =

== S3로 React 앱을 배포하는 방법에 대한 5분 가이드 ==

![ ](httpsmiro.medium.com/max/1400/1*h4TLlisFk7XvtREAsS7C7Q.jpeg)

따라서 React 앱을 완성했으며 어딘가에 호스팅하려고 합니다. Amazon AWS S3를 사용하여 React 앱을 호스팅할 수 있다는 것을 알고 계셨습니까? 비교적 쉽고 저렴하며 신속하게 배포할 수 있습니다.

= 시작하자! =

== 전제 조건 ==

호스팅을 시작하기 전에 관리 설정을 완료하겠습니다. 다음이 완료되었는지 확인하십시오.

**AWS 계정이 있습니다. httpsaws.amazon.com/resources/create-account/에서 AWS 계정에 가입하세요. **AWS 사용자 생성 AWS 콘솔에서 IAM 탭으로 이동한 다음 à ¢ÃÂÃÂUsersâÃÂà사이드바의 섹션.

âÃÂÃÂAdd UserâÃÂÃÂ를 클릭하고 âÃÂÃâProgrammatic accessâÃâ를 확인하십시오. Â.

![ ](httpsmiro.medium.com/max/1400/1*gMtvyUQ_X2YVYHwNfLeygg.png)

âÃÂÃÂNext: PermissionsâÃÂÃÂ를 클릭하고 여기에서 âÃÂÃÂAttach existing policies directlyâÃ를 선택합니다. ÂÃÂ. 배포 목적에 대해 âÃÂÃÂAdministratorAccessâÃÂÃÂ를 확인하십시오.

![ ](httpsmiro.medium.com/max/1400/1*UfuPz5oak9QbxX0VXlNV5g.png)

다음 버튼을 클릭하고 마지막으로 âÃÂÃÂCreate userâÃÂÃÂ를 클릭합니다.

![ ](httpsmiro.medium.com/max/1400/1*aSCgwjWRAiNQHBV_bSRlvA.png)

마지막 단계에서 액세스 키 ID와 비밀 액세스 키를 받습니다. 다운로드 및

**나중에 필요하므로 컴퓨터에 저장하십시오.

== AWS CLI 설치 ==

AWS CLI는 배포 프로세스를 단순화하는 데 도움이 되는 강력한 도구입니다.

Homebrew(macOS용)를 사용하여 AWS CLI를 설치해 보겠습니다. 아직 설치하지 않은 경우 Homebrew를 설치합니다.

*참고: Windows를 사용하는 경우 공식 문서 * *여기*에서 지침을 찾을 수 있습니다.

터미널을 열고 입력하십시오.

양조 설치 awscli.

CLI 도구가 설치되면 다음을 사용하여 AWS 계정을 구성할 수 있습니다.

AWS 구성. 여기에 이전에 다운로드한 액세스 키 정보를 입력해야 합니다. 다음과 같아야 합니다.

지역의 경우 AWS 콘솔에서 URL을 확인할 수 있으며 해당 지역이 언급됩니다. 예를 들어 내 주소는 âÃÂÃÂap-southeast-1âÃÂÃÂ입니다.

![ ](httpsmiro.medium.com/max/1400/1*TbFgHQ9ey3SwBWtadBtqSQ.png)
= React 앱 만들기 =

배포할 준비가 된 React 앱이 이미 있을 수 있습니다. 그러나 샘플 앱이 필요한 경우 다음 옵션을 사용할 수 있습니다.

- 다음을 실행하여 상용구 React 앱 생성

npx create-react-app 내 앱

- httpsgithub.com/harishv7/react-hook-form-example에서 내 샘플 React 앱(양식 예제 포함)을 다운로드합니다. 이것은 React 앱에 양식을 추가하는 튜토리얼을 위해 수행되었습니다. 여기에서 확인하십시오.

완료되면 다음을 사용하여 종속성이 모두 설치되었는지 확인하십시오.

Yarn을 설치하고 다음을 사용하여 앱을 실행합니다.

실 시작.

= S3 버킷 설정 =

이제 샘플 앱이 준비되었으므로 앱을 호스팅하도록 S3 버킷을 구성해 보겠습니다.

AWS Console에서 âÃÂÃÂS3âÃÂÃÂ를 검색하고 S3 대시보드로 이동합니다. âÃÂÃâCreate bucketâÃÂÃÂ를 클릭하고 버킷에 âÃÂÃâmy-react와 같은 이름을 지정합니다. -app-2021âÃÂà(또는 원하는 다른 것).

*참고: 버킷 이름은 전체 S3에서 고유해야 합니다. 따라서 존재하지 않는 고유한 이름을 선택하십시오. 그렇지 않으면 오류가 발생합니다!* ![ ](httpsmiro.medium.com/max/1400/1*tLDgJ0HJNEUA9DwhD5XiUw.png)

라이브로 호스팅하고 있으므로 버킷에 대한 공개 액세스를 켭니다.

![ ](httpsmiro.medium.com/max/1400/1*Mqn0JUnqAvMMmimuLj7rTg.png)

나머지 설정은 그대로 두고 âÃÂÃÂCreate bucketâÃÂÃÂ를 클릭합니다. S3 대시보드에 다음과 같은 항목이 표시됩니다.

![ ](httpsmiro.medium.com/max/1400/1*pW6x0HIgq9WgauWy-SFIOw.png)

클릭하여 새로 생성된 S3 버킷으로 이동합니다.

![ ](httpsmiro.medium.com/max/1400/1*PNhe4x_fs02RmMKIQmGbng.png)

âÃÂÃÂ는 âÃÂÃÂPropertiesâÃÂÃâ를 클릭하고 원하는 맨 아래까지 스크롤합니다. âÃÂÃÂ정적 웹 사이트 호스팅âÃÂÃÂ을 참조하십시오.

![ ](httpsmiro.medium.com/max/1400/1*mRdXzoHrc1LHQ8Hy-2V4UQ.png)

âÃÂÃÂEnableâÃÂÃÂ를 클릭하고 âÃÂÃÂindex.htmlâÃâ를 입력합니다. à색인 문서 아래.

![ ](httpsmiro.medium.com/max/1400/1*3d4nQKZrRAh5SmgbL0-yhA.png)

다른 필드는 그대로 두고 âÃÂÃÂSave changesâÃÂÃÂ를 클릭합니다.

= S3에 배포 =

이제 앱을 S3에 배포할 준비가 되었습니다. 이를 수행하는 방법은 다음 CLI 명령을 사용하는 것입니다.

aws s3 동기화 빌드/ s3your-bucket-name>--acl public-read
이 명령을 package.json 파일에도 âÃÂÃÂdeployâÃÂà스크립트로 추가할 수 있습니다.

![ ](httpsmiro.medium.com/max/1400/1*BY8AO0YO7WqOUMPWA_XsVQ.png)

다음을 사용하여 앱을 빌드해 보겠습니다.

최적화된 생산 빌드를 생성하는 데 도움이 되는 원사 빌드.

다음으로 위에 제공된 CLI 명령을 실행하거나 package.json에 게시 스크립트를 설정한 경우 다음을 사용할 수 있습니다.

원사 전개.

![ ](httpsmiro.medium.com/max/1400/1*8ZbQ49dzPzGo_TkYh3_H1w.png)

이제 앱이 배포되었습니다!

앱이 호스팅되는 위치(웹사이트 링크)를 찾으려면 AWS S3 콘솔로 이동하여 생성한 버킷을 클릭합니다.

âÃÂÃÂPropertiesâÃÂà탭으로 이동하여 âÃÂÃâStatic 웹 사이트까지 아래로 스크롤합니다. hostingâÃÂà섹션과 우리의 URL이 거기에 있을 것입니다.

![ ](httpsmiro.medium.com/max/1400/1*SbuQahvHex1KetHvddN2rw.png)

그것을 클릭하면 앱이 새 탭에서 열립니다. 여기 내꺼야!

![ ](httpsmiro.medium.com/max/1400/1*LcpVXd_SeBMLbJafgOAbEA.png)

= 결론 =

React 앱을 Amazon S3에 성공적으로 배포했습니다! 이는 React 프로토타입을 신속하게 배포 및 테스트하고 다른 사람과 공유할 수 있는 훌륭한 선택입니다. 정말 쉽고 빠르게 배포할 수 있습니다.

이 튜토리얼이 도움이 되었기를 바랍니다!

즐거운 코딩하세요! ðÃÂÃÂû

*자세한 내용은 * *plainenglish.io*에서 확인하세요.