Vue 및 AWS Amplify를 사용하여 서버 없는 최초의 풀스택 애플리케이션 구축
AWS Amplify를 사용하여 유연하고 확장 가능하며 안정적인 애플리케이션 구축
이 강좌에서는 Vue 및 AWS Amplify를 사용하여 전체 스택에 서버 없는 애플리케이션을 구축하는 방법을 학습합니다.새 프로젝트를 만들고 검증기 구성 요소를 사용하여 완전한 권한 수여 흐름을 추가합니다.여기에는 다음이 포함됩니다.
AWS Amplify 소개
Amplify는 현대적인 풀 스택 서버 없는 응용 프로그램을 개발, 발표, 조작하는 것을 간단하고 즐겁게 합니다.Amplify 프레임워크(Amplify 라이브러리 및 Amplify CLI 포함) 및 AWS 클라우드 서비스 및 AWS Amplify 콘솔과의 원활한 통합을 통해 전체 응용 프로그램의 생명 주기 동안 모바일 및 프런트엔드 웹 개발자를 지원합니다.
aws-amplify
과@aws-amplify/ui-vue
를 사용할 것이다.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
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 init
<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
프롬프트가 나타나면 다음을 선택합니다.
yarn add aws-amplify @aws-amplify/ui-vue
AWS Amplify는
auth
범주를 통해 AWS Cognito에 액세스할 수 있도록 인증을 제공합니다.인증을 추가하려면 다음 명령을 사용합니다.amplify add auth
프롬프트가 나타나면 다음을 선택합니다.변경 사항을 클라우드로 밀어넣기
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
amplify push
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.
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
<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
amplify add hosting
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.
Reference
이 문제에 관하여(Vue 및 AWS Amplify를 사용하여 서버 없는 최초의 풀스택 애플리케이션 구축), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/aws/build-your-first-full-stack-serverless-app-with-vue-and-aws-amplify-13p8
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
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.
Reference
이 문제에 관하여(Vue 및 AWS Amplify를 사용하여 서버 없는 최초의 풀스택 애플리케이션 구축), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://dev.to/aws/build-your-first-full-stack-serverless-app-with-vue-and-aws-amplify-13p8
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
My Name is . I am a Developer Advocate at AWS Mobile working with AWS Amplify and AWS AppSync teams.
Reference
이 문제에 관하여(Vue 및 AWS Amplify를 사용하여 서버 없는 최초의 풀스택 애플리케이션 구축), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/aws/build-your-first-full-stack-serverless-app-with-vue-and-aws-amplify-13p8텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)