AWS Amplify를 사용하여 유연하고 확장 가능하며 안정적인 애플리케이션 구축
이 강좌에서는 Vue 및 AWS Amplify를 사용하여 전체 스택에 서버 없는 애플리케이션을 구축하는 방법을 학습합니다.새 프로젝트를 만들고 검증기 구성 요소를 사용하여 완전한 권한 수여 흐름을 추가합니다.여기에는 다음이 포함됩니다.

Introduction to AWS Amplify

Setting up a new project with the Vue CLI

Installing Amplify CLI

Adding authentication

Publishing your app

Cleaning up cloud services

질문이 있거나 더 많은 정보를 원하시면 연락 주세요.

AWS Amplify 소개

Amplify는 현대적인 풀 스택 서버 없는 응용 프로그램을 개발, 발표, 조작하는 것을 간단하고 즐겁게 합니다.Amplify 프레임워크(Amplify 라이브러리 및 Amplify CLI 포함) 및 AWS 클라우드 서비스 및 AWS Amplify 콘솔과의 원활한 통합을 통해 전체 응용 프로그램의 생명 주기 동안 모바일 및 프런트엔드 웹 개발자를 지원합니다.

확대 라이브러리: 본고에서 우리는 aws-amplify과@aws-amplify/ui-vue를 사용할 것이다.

Amplify CLI: 클라우드 서비스 구성 및 통합을 위한 명령행 도구입니다.

UI 구성 요소: 검증기, 사진 선택기, 앨범과 채팅 로봇.

클라우드 서비스: 인증, 저장, 분석, 알림, AWS Lambda 함수, REST와 GraphQL API, 예측, 채팅 로봇과 현실 확장(AR/VR).

오프라인 우선 지원: Amplify DataStore는 오프라인과 온라인 장면 간의 데이터를 조율하기 위해 추가 코드를 작성하지 않고 공유와 분포식 데이터를 이용하는 프로그래밍 모델을 제공한다.

AWS Amplify를 사용하면 팀은 개발에 전념할 수 있고, Amplify 팀은 전체 AWS Amplify 스택에서 최상의 모델과 실천을 실시할 수 있습니다.

CLI 확대

Amplify CLI는 반복 작업을 수행하고 클라우드 서비스의 설정 및 제공을 자동화하는 데 도움이 되는 명령 세트를 제공합니다.
일부 명령은 실행 과정에서 도움을 제공하기 위해 문제를 제시하고 합리적인 기본값을 제공합니다.이것들은 흔히 볼 수 있는 임무들이다.실행:

amplify init, 새로운 환경을 설정합니다.예: dev,test,dist.

amplify push, 클라우드에 로컬 자원을 제공합니다.

amplify status, 현지 자원과 현재 상태를 열거합니다.

The Amplify CLI uses AWS CloudFormation to manage service configuration and resource provisioning via templates. This a declarative and atomic approach to configuration. Once a template is executed, it will either fail or succeed.

Vue CLI를 사용하여 새 항목 설정

시작하려면 Vue CLI 을 사용하여 새 프로젝트를 만듭니다.이미 있으면 다음 단계로 넘어가십시오.없으면 설치하고 다음 도구를 사용하여 응용 프로그램을 만듭니다.

yarn global add @vue/cli  
vue create amplify-app

새 디렉터리로 이동하여 모든 내용을 확인한 다음 계속

cd amplify-app  
yarn serve

선결 조건

계속하기 전에instructions in our docs를 통해 AWS 계정을 등록하고 Amplify CLI를 설치 및 구성했는지 확인합니다.

확대 항목 설정

AWS Amplify를 사용하면 기본 설정 및 설정을 정의하는 다양한 환경을 만들 수 있습니다.새 항목에 대해 다음 명령을 실행하고 다음과 같이 대답해야 합니다.

amplify init

항목 이름 입력:amplify app

환경 이름 입력: dev

기본 편집기 선택: Visual Studio 코드

구축 중인javascript 프로그램의 형식을 선택하십시오

당신이 사용한 것은 무엇입니까javascript 프레임워크

소스 디렉토리 경로: src

배포 디렉토리 경로:dist

Build 명령: npm run script Build

Start 명령: npm run script serve

AWS 프로필을 사용하시겠습니까?맞다

기본값을 사용할 프로필을 선택하십시오.

확대 CLI가 새 항목과 새 폴더를 초기화합니다: 확대.이 폴더의 파일은 프로젝트 구성을 저장합니다.

<amplify-app>  
    |\_ amplify  
      |\_ .config  
      |\_ #current-cloud-backend  
      |\_ backend  
      team-provider-info.json

AWS 확대 종속성 설치

다음 도구를 사용하여 AWS Amplify 및 Vue를 설치하는 데 필요한 종속성:

yarn add aws-amplify @aws-amplify/ui-vue

인증 추가

AWS Amplify는 auth 범주를 통해 AWS Cognito에 액세스할 수 있도록 인증을 제공합니다.인증을 추가하려면 다음 명령을 사용합니다.

amplify add auth

프롬프트가 나타나면 다음을 선택합니다.

기본 인증 및 보안 구성 사용 여부기본 구성

사용자가 Cognito 사용자 풀을 사용할 때 로그인하는 방법사용자 이름

고급 설정을 구성하시겠습니까?아니오

변경 사항을 클라우드로 밀어넣기

push 명령을 실행하면 AWS 계정에 클라우드 자원을 설정하고 생성합니다.

amplify push

새로 생성된 Cognito 사용자 풀을 빠르게 확인하려면

amplify status

To access the AWS Cognito Console at any time, go to the dashboard at https://console.aws.amazon.com/cognito. Also be sure that your region is set correctly.

자원이 만들어졌으니 사용하기 시작할 수 있습니다!

Vue 애플리케이션 구성

aws-exports.js 폴더에서 자동으로 생성된 src 파일을 참조하십시오.응용 프로그램을 구성하려면 main.ts 을 열고 마지막 가져오기에 다음 코드를 추가합니다.

import Vue from 'vue'  
import App from './App.vue'  

+ import Amplify from 'aws-amplify';  
+ import '@aws-amplify/ui-vue';  
+ import aws\_exports from './aws-exports';  

+ Amplify.configure(aws\_exports);  

Vue.config.productionTip = false  

new Vue({  
  render: h => h(App),  
}).$mount('#app')

인증서 구성 요소 사용

AWS Amplify는 응용 프로그램에서 사용할 수 있는 UI 구성 요소를 제공합니다.이 구성 요소를 프로젝트에 추가합시다
인증서 구성 요소를 사용하려면 다음을 추가합니다src/App.vue.

<template>  
  <div id="app">  
+    <amplify-authenticator> 
+      <div>  
+        <h1>Hey, {{user.username}}!</h1>  
+        <amplify-sign-out></amplify-sign-out>  
+      </div> 
+    </amplify-authenticator>
  </div>  
</template>
<script>  
+ import { AuthState, onAuthUIStateChange } from '@aws-amplify/ui-components'

export default {  
  name: 'app',  
  data() {  
    return {  
+      user: { },
    }  
  },  
  created() {  
+    // authentication state managament  
+    onAuthUIStateChange((state, user) => {  
+      // set current user and load data after login  
+      if (state === AuthState.SignedIn) {  
+        this.user = user;  
+      }  
+    }) 
  }  
}  
</script>

이 프로그램을 실행할 수 있으며, 프로그램 구성 요소 앞에 인증 흐름이 추가된 것을 볼 수 있습니다.이 흐름은 사용자에게 등록과 로그인 능력을 제공한다.

To view any users that were created, go back to the Cognito Dashboard at https://console.aws.amazon.com/cognito. Also be sure that your region is set correctly.

또는 다음을 사용할 수도 있습니다.

amplify console auth

사용자 데이터 액세스

Auth API를 사용하여 사용자 정보에 액세스합니다.이것은 약속에 보답할 것이다.

import { Auth } from 'aws-amplify';
Auth.currentAuthenticatedUser().then(console.log)

응용 프로그램 발표

AWS에 애플리케이션을 배포하고 호스팅하려면 hosting 범주를 사용할 수 있습니다.

amplify add hosting

실행할 플러그인 모듈 선택: Amazon CloudFront 및 S3

환경 설정 선택: DEV

위탁 관리 버킷 name YOURBUCKETNAME

사이트 인덱스의 인덱스 문서.html

사이트 인덱스의 오류 문서.html

이제 모든 것이 준비되었습니다 & 우리는 그것을 발표할 수 있습니다.

amplify publish

청소 서비스

프로젝트 및 AWS 계정의 모든 리소스를 지우려면 다음 명령을 실행합니다.

amplify delete

결론

축하Vue 및 AWS Amplify를 사용하여 첫 번째 풀스택 서버 없는 어플리케이션을 구축했습니다.이 강좌를 읽어 주셔서 감사합니다.
authenticator 구성 요소를 사용하거나 서비스 API를 통해 인증 흐름을 제공하는 방법과 Amplify CLI를 사용하여 서비스를 추가하고 삭제하는 등 일반적인 작업을 수행하는 방법을 배웠습니다.

읽어주셔서 감사합니다!

본 강좌나 AWS 확대판에 대해 질문이 있습니까?언제든지 연락 주세요.

My Name is . I am a Developer Advocate at AWS Mobile working with AWS Amplify and AWS AppSync teams.