React 및 AWS Amplify를 사용하여 서버 없음: 개발 환경 설정

wikipedia에 따르면 서버 계산이 없는 것은 클라우드 계산 집행 모델이다. 그 중에서 클라우드 공급자는 서버를 충당하고 기계 자원의 분배를 동적 관리한다.이것은 일반적으로 클라우드 공급자나 제3자 서비스 공급자에게 서버, 확장 또는 업그레이드 서버 및 기타 기능을 제공하지 않고 인코딩 업무 논리에 전념하여 생산이 준비된 응용 프로그램을 단독으로 구축할 수 있다는 것을 의미한다.거의 모든 종류의 응용 프로그램이나 백엔드 서비스를 구축하고 고가용성 응용 프로그램을 실행하고 확장하는 데 필요한 모든 것을 처리할 수 있습니다.
이런 운행 응용 프로그램의 모델은 우리에게 조작 원가를 낮추고 개발 시간을 단축하는 등 몇 가지 장점을 제공했다.서버가 없는 것과 장점에 대한 자세한 내용은 this article on serverless architecture을 참조하십시오.

이 문장을 읽으면 나는 무엇을 배워야 합니까?


이 글은 머지않아 발표될 더 많은 내용을 포함하여 서버 없는 구조와 각종 AWS 서비스로 React 응용 프로그램을 구축하는 방법을 가르쳐 드리겠습니다.우리는 인증, RESTAPI 생성 및 사용, 분석 및 관리 등 분야를 포함할 것이다.단일 클라우드 공급업체의 서비스를 동시에 이용하다.CLI 도구와 UI 구성 요소를 제공하여 AWS에서 서버 없는 애플리케이션을 손쉽게 구축할 수 있는 AWS Amplify을 사용합니다.
이 글에서 AWS를 구축하기 위해 개발 환경을 설정하는 방법을 가르쳐 드리겠습니다.이것은 이 시리즈의 미래 게시물의 초급 도서가 될 것이다.

AWS Amplify 시작


AWS Amplify은 서버 없는 응용 프로그램을 구축하는 도구를 제공하는 라이브러리입니다.몇 줄의 코드만으로 각종 AWS 서비스와 응용 프로그램을 통합할 수 있다.UI 구성 요소를 사용하여 개발을 가속화할 수도 있습니다.AWS 서비스 또는 Amplify 라이브러리를 사용하려면 AWS 계정이 필요합니다.만약 네가 없다면, 지금은 sign up이 될 수 있다.등록하면 AWS 무료 레이어를 즉시 액세스할 수 있으며 추가 비용 없이 사용할 수 있습니다.

Amplify CLI 설치 및 구성


Amplify CLI는 애플리케이션에 AWS 서비스를 생성하고 구성할 수 있는 도구입니다.그 목적은 이동과 웹 응용 프로그램 개발을 간소화하는 것입니다.CLI는 AWS CloudFormation 및 중첩 스택을 사용하여 푸시 구성을 클라우드에서 실행하기 전에 로컬에서 구성을 추가하거나 수정할 수 있습니다.
노드가 필요합니다.CLI를 사용하려면 js(8.11 이상)와 npm(5 이상)을 설치합니다.설치되지 않은 경우 Node.js download page을 방문하십시오.node를 설치하면 npm도 제공하지만, node를 방금 설치하면 download npm을 각각 설치할 수 있습니다.
명령줄에서 npm install -g @aws-amplify/cli을 실행하여 CLI를 설치합니다.yarn을 사용하여 CLI를 설치하지 마십시오. 알려진 문제가 있기 때문입니다.Amplify CLI를 설치한 후에는 필요한 AWS 자격 증명 및 영역을 지정하도록 구성해야 합니다.다음 지침에 따라 CLI를 구성합니다.
  • 명령줄을 열고 명령 amplify configure을 실행합니다.그러면 브라우저에서 AWS 콘솔이 열리고 로그인하지 않은 경우 계정에 로그인해야 합니다.
  • 에 로그인한 후 명령줄로 돌아가 Enter 키를 누릅니다.
  • 시스템에서 AWS 영역을 선택하라는 메시지가 표시됩니다.하나를 선택하고 Enter 키를 누릅니다.
  • 그런 다음 CLI와 함께 사용할 새 AWS IAM(인분 및 액세스 관리) 사용자의 사용자 이름을 지정할 수 있습니다.사용자 이름을 입력하고 Enter 키를 누릅니다.Enter 키를 누르면 브라우저가 열리고 AWS 콘솔의 IAM 대시보드로 이동합니다.
  • 은 IAM 대시보드에서 새 사용자를 생성해야 합니다.사용자 이름 필드는 콘솔에 입력한 사용자 이름과 선택한 Programmatic Access 액세스 유형을 미리 채웁니다.Next: Permissions 버튼을 클릭하여 다음 페이지로 이동합니다.
  • 은 기본적으로 선택한 Administrator Access 정책을 유지하고 Next: Review 버튼을 클릭합니다.
  • Create User 버튼을 클릭하여 사용자를 만듭니다.사용자를 만들면 액세스 키 ID와 비밀 액세스 키를 얻을 수 있습니다.CLI를 설정해야 하므로 이러한 정보를 유지합니다.
  • 에서 명령행을 반환하고 Enter 키를 누릅니다.
  • 액세스 키 ID를 입력하라는 메시지가 표시됩니다. 값을 복사하여 붙여넣은 다음 Enter 키를 누릅니다.
  • 의 또 다른 알림은 기밀 접근 키를 묻는 것을 보여 줍니다.값을 복사하여 붙여넣은 다음 Enter 키를 누릅니다.
  • 이제 로컬 시스템에서 AWS 구성 파일을 만들거나 업데이트할지 묻는 메시지가 표시됩니다.이 프로필에 기본값을 사용합니다.Enter 키를 눌러 기본값을 선택하고 AWS 구성 파일을 생성합니다.

  • React 응용 프로그램 만들기


    이제 Amplify CLI가 구성되어 React 응용 프로그램을 만들 수 있습니다.React 응용 프로그램을 Create React App으로 부트합니다.이것은 우리로 하여금 코드를 작성하는 데 전념할 수 있게 한다. 왜냐하면 그들은 우리를 위해 미리 설정할 수 있기 때문이다.React 항목을 만들려면 다음 명령을 실행합니다.
    $ npx create-react-app serverless-react
    
    이것은 react 프로그램에 필요한 파일을 포함하는 폴더 serverless-react을 만들 것입니다.다음에 해야 할 일은 확대 항목을 초기화하는 것이다.이를 위해 아래 설명에 따라 조작하십시오.
  • 은 명령줄에서 cd serverless-react을 실행하여 디렉터리를 프로젝트로 전환합니다.
  • 실행 명령 amplify init.이것은 당신에게 몇 가지 문제에 대답하라는 것을 알려 줄 것입니다.
  • 코드 편집기를 선택하고 Enter 키를 누릅니다.
  • 다음 그룹은 당신이 구축하고 있는 응용 프로그램의 유형을 확인하기 위해 질문을 제시합니다.JavaScript를 선택하고 React를 선택한 다음 Enter 키를 눌러 기본값을 사용합니다.
  • amplify init 명령은 CloudFormation 스택을 사용하여 클라우드에 배포 리소스를 설정하고 Amplify 프로젝트를 준비합니다.이것은 자원의 설정 상세 정보를 프로젝트 디렉터리에 끌어들인다.이 구성 정보는 AWS 서비스를 프로젝트에 추가하고 서비스 구성을 업데이트하는 데 사용됩니다.프로젝트 디렉터리의 루트 디렉터리에서 .amplifyrc 파일과 확대 폴더를 찾을 수 있습니다.그것들은 우리가 사용할 자원에 대한 클라우드 정보 설정 정보를 포함한다.
    이 프로젝트의 마지막 점은 확대 라이브러리를 프로젝트에 추가하는 것입니다.이 라이브러리는 몇 줄 코드에 AWS 서비스를 쉽게 통합할 수 있도록 모듈과 UI 구성 요소를 제공합니다.npm에서 다음 명령을 실행합니다.
    $ npm install -S aws-amplify && npm install -S aws-amplify-react
    

    그것은 소포이다


    서버 없는 컴퓨팅은 운영 비용과 개발 시간을 낮추는 등 이점을 제공합니다.이것은 우리가 코드에 전념하여 사용자에게 업무 가치를 제공할 수 있도록 하며, 서버를 구축하고 유지하는 것을 걱정할 필요가 없다.AWS는 수많은 서버 컴퓨팅 서비스 공급업체 중 하나입니다.이러한 서비스를 구성하고 통합하는 데는 몇 가지 절차가 필요하지만, AWS Amplify의 구축은 AWS에서 서버 없는 응용 프로그램을 구축하기 쉽도록 하는 것이다.이것은 몇 개의 명령을 사용하여 서비스를 만들고 설정하는 도구를 제공하고 라이브러리 구성 요소를 제공하여 우리의 코드를 통해 이 서비스와 쉽게 상호작용할 수 있도록 한다.이 시리즈의 첫 번째 글은 AWS Amplify를 사용하여 서버 없는 응용 프로그램을 구축하는 방법을 소개합니다.Amplify CLI를 설정하고 Amplify 프로젝트를 생성했습니다.

    Originally published on my blog.

    좋은 웹페이지 즐겨찾기