= 30분 안에 AWS로 React 애플리케이션 호스팅 =
이 튜토리얼은 이미지가 매우 많고 완전한 초보자를 대상으로 합니다. 완전한 권한 부여 시스템을 사용하여 웹 사이트에서 React 애플리케이션을 호스팅하는 방법을 설명합니다. Mobilehub CLI(Command Line Interface)를 통해 AWS MobileHub의 기능을 호출합니다. 자습서에는 AWS 서비스에 대한 기술이 필요하지 않으며 React 상용구 애플리케이션을 설정하는 방법도 보여줍니다.
이미 React 애플리케이션이 있는 경우
**awsmobile-cli를 설치하고 애플리케이션에 추가하는 섹션 2로 건너뛸 수 있습니다.
= 시작하기 전에 컴퓨터에 몇 가지 설정이 필요합니다 =
**컴퓨터에 설치된 Node 8.x 환경**
- Javascript 애플리케이션 서버용 런타임 환경입니다. NPM(노드 패키지 관리자)이 뒤따릅니다.
- NPM은 React, AWS Amplify, AWS-JS 커넥터 패키지와 같은 노드 패키지를 설치하는 데 사용되며 기본적으로 해당됩니다.
- httpsnodejs.org/en/download/
**AWS 프리 티어 계정
- 프리 티어를 통해 AWS 서비스에 무료로 액세스할 수 있습니다. 이 자습서에서는 이것으로 충분합니다. 그러나 각 서비스에는 매월 사용 제한이 있으며 이로 인해 실제 비용이 발생할 수 있습니다.
- httpsaws.amazon.com/free/
**AWS CLI(Command Line Interface)를 설치하여 콘솔에서 직접 AWS 서비스를 호출** **이 과정에서는 React 제작자인 Facebook의 상용구를 사용합니다 **선택한 편집기
- 대부분의 프로그래밍 언어와 프레임워크를 실행할 수 있는 수정이 용이한 경량 편집기인 Visual Studio Code로 시작하는 것이 좋습니다.
프로 팁:VS Code의 설치 과정에서 환경 경로 이름에 추가하는 상자를 선택하십시오. 이렇게 하면 âÃÂÃÂcode filename.jsâÃÂà또는 âÃÂÃ를 입력하여 터미널에서 VS Code를 열 수 있습니다. Âcode .âÃÂà전체 프로젝트에 대한 youâÃÂÃÂ. ** 터미널 youâÃÂà 편안하다
- 대부분의 개발자는 자신의 컴퓨터에 Git을 설치해야 합니다. 이를 통해 많은 개발자가 터미널로 이동하는 Git Bash에 액세스할 수 있습니다.
의 시작하자!
**1. React 애플리케이션을 생성하고 터미널을 통해 프로젝트 폴더로 진입**
터미널을 입력하고 응용 프로그램을 저장하는 폴더를 찾습니다. âÃÂÃÂdevâÃÂÃÂ라는 폴더를 제안합니다.
npx create-react-app 프로젝트 이름&& cd 프로젝트 이름
또는
npm -g install create-react-app create-react-app 프로젝트 이름
여기서는 상용구를 기반으로 React 애플리케이션을 만듭니다. âÃÂÃÂnpxâÃÂÃÂ는 npm 서버를 사용하여 원격 패키지를 호출하는 노드 도구입니다. 두 번째 코드 스니펫은 다음을 사용하여 로컬에 create-react-app을 설치합니다.
*npm -g install create-react-app* **그러면 애플리케이션이 생성됩니다. create-react-app으로 항상 최신 상태를 유지하려면 npx를 사용하고 애플리케이션을 생성하는 것이 좋습니다. create-react-app으로 항상 최신 상태를 유지하려면 npx를 사용하는 것이 좋습니다. **2. awsmobile CLI를 컴퓨터에 설치하고 프로젝트에서 실행**
이 시점부터 코드 편집기에서 React 애플리케이션에 주의를 기울여야 합니다. /awsmobile과 같은 폴더가 추가되고 package.json 파일에 일부 추가됩니다.
터미널 창에서 다음을 입력합니다.
npm 설치 -g awsmobile-cli
awsmobile-cli를 전역적으로 설치합니다. AWS Mobile Hub 콘솔에서 일부 작업을 수행한 후 이를 사용합니다.
프로젝트 안에 있는지 확인하고 입력하세요.
AWS 모바일 초기화
기본 브라우저에서 AWS가 자동으로 열릴 때까지 각 설정에서 Enter 키를 누르십시오. 아직 로그인하지 않은 경우 프리 티어 계정으로 로그인하십시오.
이렇게 하면 awsmobile-cli가 올바른 AWS 계정에 연결되어 있음을 확인할 수 있습니다. 터미널로 돌아가서 Enter를 눌러 계속하십시오.
AWS는 애플리케이션을 제어할 사용자를 설정해야 합니다. Enter 키를 계속 누르면 awsmobile-cli에 의해 자동으로 수행됩니다.
이 작업을 완료하면 AWS IAM으로 이동하게 되며 여기에서 âÃÂÃÂNextà ¢ÃÂà완전성을 향한 길! 두 번째 단계에서는 필요한 AWS의 모든 기능에 대한 사용자 액세스 권한을 부여하는 âÃÂÃÂAdministrator AccessâÃÂÃÂ를 자동으로 선택해야 합니다.
완료되면 AWS에 한 번만 표시되므로 비밀 자격 증명과 함께 .csv 파일을 다운로드하는 것이 매우 중요합니다. 이 키는 터미널 창의 다음 단계에서 사용됩니다.
이렇게 하면 AWS MobileHub 애플리케이션이 성공적으로 생성되고 자동으로 aws-amplify가 설치됩니다.& aws-amplify-react를 로컬 React 프로젝트로
이 프로세스가 완료되면(~1분) 다음을 입력할 수 있습니다.
모바일 콘솔
기본 브라우저에서 Mobile Hub 애플리케이션을 볼 수 있습니다. âÃÂÃÂawsmobileâÃÂÃÂ를 입력하여 다양한 작업 목록을 볼 수도 있습니다. 여기에서 브라우저를 사용하여 Cognito 로그인을 추가하지만 awsmobile CLI에서 추가할 수 있습니다.
**삼. 실제로 Cognito 로그인 및 호스팅 추가**
마지막 단계에서는 AWS MobileHub 콘솔을 통해 프로젝트에 AWS Cognito를 추가합니다. 기본적으로 이미 활성화되어 있는 호스팅을 확인할 수도 있습니다.
호스팅을 테스트하려면 콘솔에서 기능을 클릭하고 제공된 URL을 클릭하십시오. 여기에 있는 콘텐츠는 AWS의 템플릿이지만 곧 React 애플리케이션으로 덮어쓸 것입니다.
**Cognito 사용자 로그인을 추가하려면 아래로 스크롤하여 âÃÂÃÂUser Sign-inâÃÂÃÂ을 찾아 클릭합니다. **이렇게 하면 인증 시스템과 함께 Cognito 사용자 풀이 활성화됩니다. 이메일 주소 또는 전화 번호에서 âÃÂÃÂEmailâÃÂÃÂ를 사용하여 로그인 시 이메일을 사용자 이름으로 강제 적용합니다. 또는 사용자 이름을 사용하고 âÃÂÃÂEmailâÃÂà+ âÃÂÃÂUsernameâÃ를 활성화할 수 있습니다. ÂÃÂ는 사용자가 선택할 수 있도록 합니다. 어느 쪽이든 이메일로 확인 코드를 받게 됩니다.
AWS는 등록 확인 코드를 이메일로 보내는 데 비용을 청구하지 않지만 SMS를 보내는 데는 실제 비용이 들기 때문에 이메일을 받습니다.
그 결과:
Cognito에서 작업 >편집을 클릭하면 사용자 및 고급 보안 기능을 관리하기 위한 Cognito 콘솔이 표시됩니다. 이 단계에서 수행한 일부 설정은 되돌릴 수 없지만 언제든지 사용자 풀을 삭제하고 새 풀을 생성할 수 있습니다.
이것으로 MobileHub 내부의 AWS Cognito 구성이 완료됩니다. 코드를 추가할 시간입니다. 얼마나 많이? 5줄! 그리고 그 중 3개는 React에서만 수입됩니다.
= React 프로젝트에 설정을 추가하고 웹사이트에 게시 =
터미널에서 언제든지 awsmobile pull 또는 awsmobile push를 사용하여 각각 AWS MobileHub 콘솔에서 온라인으로 애플리케이션으로 변경 사항을 가져오거나 터미널의 awsmobile CLI를 통해 수행된 로컬 변경 사항을 푸시할 수 있습니다.
이 사용 사례에서는 변경 사항을 가져오려고 합니다. 터미널로 돌아가서 다음을 입력하십시오.
VS Code로 돌아가면 이제 프로젝트가 수정된 것을 볼 수 있습니다. ./awsmobile/backend/mobile-hub-project.yml에서 로컬 구성을 확인할 수 있습니다.
또한 ./package.json에서 이전에 수행한 awsmobile init에 의해 추가된 두 개의 강조 표시된 라이브러리를 찾을 수 있습니다.
이제 이를 사용하여 Cognito 로그인 창에서 애플리케이션을 래핑합니다. ./src/index.js를 열고 다음을 수정합니다.
이에:
'반응'에서 반응 가져오기;
'react-dom'에서 ReactDOM 가져오기;
import index.css';
앱에서 앱 가져오기';
registerServiceWorker에서 registerServiceWorker 가져오기';
aws-exports에서 awsMobile 가져오기';
'aws-amplify'에서 Amplify 가져오기;
import { withAuthenticator } from "aws-amplify-react"Amplify.configure(awsMobile);
const AppWithAuth = withAuthenticator(App)ReactDOM.render(
('root
registerServiceWorker
And youâÃÂÃÂre done! Try to run your application from your terminal with
npm start
and see it be loaded into the browser with a sleek GUI created by AWS:
From here you can register, login or reset users, and as an admin you can see the users who are registering.
**To add hosting simply go to your terminal and type
awsmobile publish
If you get this warning, abort the publish, run awsmobile pull and run awsmobile publish again:
When this process is done, your hosted website automatically opens in your default browser:
**There, youâÃÂÃÂre done
= Pitfalls in the process =
If the application says âÃÂÃÂNo user poolsâÃÂÃÂ, make sure your MobileHub console has Sign-In activated, and that youâÃÂÃÂve called awsmobile pull from your terminal. This updates the aws-exports.js file which is then added to Amplify.configure() in React. Also, remember to import that file!
**Further challenges** **Use the ** **aws-amplify authentication documentation ** **to add a signout button to your application
Hint: YouâÃÂÃÂll need to import Auth and call its signOut function.
import { Auth } from aws-amplify-react
**Add your custom domain name to the hosted website**This is done through CloudFront, which you can access in MobileHub âÃÂÃÂHosting and StreamingâÃÂÃÂ. Read the docs provided if you want assitance:
== Using Custom URLs for Files by Adding Alternate Domain Names (CNAMEs) - Amazon CloudFront ==
Describes how to add an alternate domain name, known as a CNAME, to use your own domain name instead of the defaultâÃÂæ
docs.aws.amazon.com
**Add Google Login**Delete your Cognito User Pool and add one with Facebook/Google providers. This can be a bit tricky as you need to get e.g. Google Web App Client ID from the google terminal to make this work. **Hope you enjoyed this very detailed introduction to AWS MobileHub. ItâÃÂÃÂs a lot of fun once you get the hang of it, and creating a Serverless backend for your frontend project has never been as easy
공유 웹 호스팅#7