Giới thiệu Aws Amplify (Phần 1)
I. Giới thiệu chung
Như chúng ta đã biết, cloud platform đã trở thành xu thế lập trình phổ biến từ nhiều năm nay,
việc sử dụng các service như:
– Google Cloud Storage hay Amazon S3 để lưu trữ file
– Google Cloud Datastore/Cloud Bigtable hay Amazon DynamoDB để lưu trữ dữ liệu không cấu trúc(NoSQL)
– Google Cloud Stackdriver Logging hay Amazon CloudWatch Logs đễ ghi log
…
gần như đã trở thành kỹ năng quen thuộc với mỗi developer.
Cùng với sự phổ biến của cloud platform, thì thời gian gần đây kiến trúc serverless trên nền tảng cloud cũng đang là 1 chủ để khá nóng với những lợi ích như:
– Giảm bớt khâu maintain hệ thống, giúp khách hàng tiết kiệm chi phí và giảm sự phụ thuộc vào bên cung cấp dịch vụ outsourcing
– Tính năng tự động scale hệ thống để tương thích với lượng truy cập bất thường từ users
– Dễ dàng tích hợp với các service mới đang ngày càng được mở rộng trên nền tàng cloud
Nhưng kiến trúc này cũng đòi hỏi developer ngoài việc biết sử dụng các dịch vụ cơ bản của cloud như đã nêu ở trên, thì cũng phải có ít nhiều kiến thức về các cloud service cần thiết khác dùng để setting kiến trúc serverless.
Ví dụ như trên môi trường AWS, để setting được kiến trúc serverless, bạn cần biết cách setting lambda, api gateway, cognito, cloudfront và có thể là cả cloudformation nữa.
Một bài toán đặt ra là làm sao để 1 frontend developer vốn chỉ quen với các code Js hay native app(iOS, Android) có thể ngay lập tức xây dựng được 1 ứng dụng serverless theo yêu cầu của khách hàng?
Cũng có thể đặt vấn đề theo 1 cách khác là: Giải pháp nào để xây dựng một ứng dụng nặng về giao diện và cloud service với chi phí thấp nhất và thời gian nhanh nhất?
Ví dụ:
Khách hàng yêu cầu tạo 1 website vẽ biểu đồ điện tim đồ của bệnh nhân với dữ liệu lấy từ AWS Athena. Với cách tiếp cận thông thường, chúng ta cần xây dựng team dev cới các thành viên sau:
– frontend dev chịu tránh nhiện xây dựng giao diện
– backend dev xây dựng API lấy dữ liệu từ AWS Athena và trả về cho tầng frontend
– devops dev cài đặt cấu hình web server, quản lý deploy, release, mornitoring.
– cloud dev tạo/quản lý tài nguyên trên AWS
Sau khi release hệ thống cho khách hàng xong thì vẫn cần giữ lại ít nhất 1 dev để maintain hệ thống. Với dự án to thì cấu trúc team như này có thể vẫn cần thiết, nhưng với dự án nhỏ thì sẽ khá là cồng kềnh và tốn kém.
AWS Amplify có thể sẽ là lời giải cho bài toán này. Một frontend dev dành 1, 2 tuần tìm hiểu về AWS Amplify, đọc thêm một chút về AWS SDK cho Athena
là có thể tự mình thực hiện tất cả các role nêu ở trên.
II. Vậy AWS Amplify là gì?
1. Kiến trúc
Dưới đây là kiến trúc hệ thống cho Web/or đa nền tảng.
2. Thành phần
AWS Amplify cho iOS:
AWS Amplify cho Android:
- AWS Amplify CLI:
Tạo/quản lý serverless backend, web hosting. Gen code tự động - AWS SDK cho Android
AWS Amplify cho Web/Đa nền tảng:
- Amplify CLI:
Tạo/quản lý serverless backend, web hosting. Gen code tự động - Amplify JavaScript library:
Thư viện hỗ trợ truy cập AWS resources - UI component libraries:
Thư viện UI tương thích với React, React Native, Angular/Ionic, Vue - AWS SDK cho JavaScript
3. Tính năng và tiện ích
Tính năng:
Tiện ích:
III. Bắt đầu học AWS Amplify từ đâu?
IV. Viết demo đơn giản
Giống như trên sơ dồ trên phần kiến truc, với amplify chúng ta có thể chọn 1 trong 3 cách sau để viết ứng dụng:
+ Sử dụng Rest API
+ Sử dụng GraphQL API
+ Hoặc chúng ta có thể sử dụng kế hợp cả Rest API và GraphQL API
Rest API và GrapQL API thì đều hỗ trợ kiến trúc serverless, nhưng có những ưu nhược điểm, chi phí vận hành infra, usecase khác nhau.
Rest API (API Gateway + lambda) thì đã khá quen thuộc với anh em VTI thông qua các bài viết của Mạnh. Nên trong nội dung bài viết này mình sẽ viết demo dùng GraphQL API, anh em hãy xem các steps thực hiện và tự đánh giá xem ưu nhược điểm của việc sử dụng Amplify với GraphQL API như thế nào nhé.
1. Khái quát về demo:
Mình sẽ xây dựng 1 Blog website đơn giản với các chức năng sau:
- Create, View, Update, Delete Blog(Group bài viết)
- Create, View, Update, Delete Post(Bài viết)
- Create, View Comments
- Quản lý Users đơn giản với SignUp, LogIn. Chỉ những những User đã Login với được truy cập hệ thống.
Các steps bên dưới được thực hiện trên môi trường Mac/Unix
2. Cài đặt nodejs, amplify cli, create-react-app:
- Install nodejs:
https://nodejs.org/en/download/package-manager/
- Install amplify cli:
$npm install -g @aws-amplify/cli
- Install create-react-app (một plugin hỗ trợ tạo dự án react)
$npm install -g create-react-app
- Check version:
npm list -g –depth=0
/usr/local/lib
├── @aws-amplify/cli@1.5.1
├── create-react-app@2.1.8
└── npm@6.9.0
3. Vào workspace, tạo project mới:
$cd /Users/apple/source
$create-react-app phu-blogs
=>Sau bước này, project sẽ đc tạo với cấu trúc như sau:
4. Vào project vừa tạo, init amplify:
- Bạn cần cung cấp Access key ID và Secret access key dùng để truy cập vào tài khoản AWS của bạn. Bạn dùng các key này, và chọn aws region để setting aws profile trong máy local như hướng dẫn sau:
https://docs.aws.amazon.com/en_us/cli/latest/userguide/cli-chap-configure.html - Profile đã được setting sẽ được dùng trong lệnh init amplify.
- Init amplify:
$cd /Users/apple/source/phu-blogs
$amplify init
? Enter a name for the project: phu-blogs
? Enter a name for the environment: dev
? Choose your default editor: Visual Studio Code
? Choose the type of app that you’re building: javascript
Please tell us about your project
? What javascript framework are you using: react
? Source Directory Path: src
? Distribution Directory Path: build
? Build Command: npm run-script build
? Start Command: npm run-script start
Using default provider awscloudformation
For more information on AWS Profiles, see:
https://docs.aws.amazon.com/cli/latest/userguide/cli-multiple-profiles.html
? Do you want to use an AWS profile? Yes
? Please choose the profile you want to use: phu-blogs-dev
=>Sau bước này, trong sourcode của project sẽ có thêm thư mục amplify, và trên aws cloudformation console sẽ được thêm 1 stack cha dùng cho việc tạo tài nguyên aws dùng trong project.
5. Add graphql api:
$amplify add api
? Please select from one of the below mentioned services: GraphQL
? Provide API name: phuGraphqlApi
? Choose an authorization type for the API: Amazon Cognito User Pool
Using service: Cognito, provided by: awscloudformationThe current configured provider is Amazon Cognito.
Do you want to use the default authentication and security configuration? Default configuration
How do you want users to be able to sign in when using your Cognito User Pool? Username
What attributes are required for signing up? Email
Successfully added auth resource
? Do you have an annotated GraphQL schema? No
? Do you want a guided schema creation? Yes
? What best describes your project: One-to-many relationship (e.g., “Blogs” with “Posts” and “Comments”)
? Do you want to edit the schema now? No
- Sau bước này, schema với nội dung sau được sinh ra:
amplify/backend/api/phuGraphqlApi/schema.graphql
type Blog @model {
id: ID!
name: String!
posts: [Post] @connection(name: “BlogPosts”)
}
type Post @model {
id: ID!
title: String!
blog: Blog @connection(name: “BlogPosts”)
comments: [Comment] @connection(name: “PostComments”)
}
type Comment @model {
id: ID!
content: String
post: Post @connection(name: “PostComments”)
}
- Chúng ta sẽ sửa schema trên 1 chút như sau
- thêm content Post, để chứa nội dung bà viết
- thêm owner vào Comment để biết ai là người tạo comment đó
- thêm @auth(rules: [{allow: owner}]) vào Comment để giới hạn chỉ cho phép sửa, xoá comment của chính mình
type Blog @model {
id: ID!
name: String!
posts: [Post] @connection(name: “BlogPosts”)
}
type Post @model {
id: ID!
title: String!
content: String
blog: Blog @connection(name: “BlogPosts”)
comments: [Comment] @connection(name: “PostComments”)
}
type Comment @model @auth(rules: [{allow: owner}]) {
id: ID!
content: String
owner: String
post: Post @connection(name: “PostComments”)
}
- Check lại trạng thái local của amplify
$amplify status
Current Environment: dev
| Category | Resource name | Operation | Provider plugin |
| ——– | ————— | ——— | —————– |
| Auth | cognito335cc9a5 | Create | awscloudformation |
| Api | phuGraphqlApi | Create | awscloudformation |
=>Trạng thái như trên cho biết 1 Auth và 1 Api đã được thêm mới ở local nhưng chưa đẩy lên aws.
Auth ở đây là cognito vòn Api là GraphQlApi (Aws AppSync)
- Tiếp theo chúng ta sẽ push những config này lên aws:
$amplify push
=>Sau bước này, check trên AWS console chúng ta sẽ thấy ở cloudformation có các stacks con mới được sinh ra, các stacks dùng để tạo ra 1 api ở AWS AppSynce, 1 Coginto User Pool, 3 Tables (Blog, Post, Comment) ở DynamoDB, và các tài nguyên liên quan khác. Ở sourcecode, phần code tương ứng để truy cập vào api trên cũng được sinh ra ở thư mục ls src/graphql/
6. Viết code frontend:
- Cài các thư viện frontend:
npm install –save aws-amplify
npm install –save aws-amplify-react
npm install –save bootstrap
npm install –save react-bootstrap
npm install –save react-bootstrap-table-next
npm install –save react-ckeditor-component
npm install –save react-redux
npm install –save redux
npm install –save redux-form
npm install –save react-render-html
npm install –save react-router-dom
- file src/index.js chúng ta sẽ setting router
- file src/App.js chúng ta sẽ có 1 form để tạo Blog mới, và 1 table để list các Blog đã có trong DB
- file src/blog.js chúng ta sẽ có 1 form + editor để tạo Post mới, và 1 table để list các Post đã có theo từng Blog
- file src/post.js chúng ta show nội dung Post, có form để add comment, và 1 table để list các comments đã có cho Post này.
- file src/App.css định dạng style cho toàn bộ page
- file src/notfound.js hiện thị trong trường hợp route được gọi không tồn tại
7. Run code ở local:
$npm start
http://localhost:3000/
– Create account, sau khi đăng ký, vào email của bạn để lại verification code:
– Xác thực với verification code:
– Login:
– Tại màn hình Home tạo Blog mới: ‘AI’
– View ‘AI’ Blog:
– Add Post mới cho Blog AI: ‘What Is Amazon SageMaker?’
– View Post vừa tạo, add comment
8. Hosting:
- Add hosting(ở local):
$amplify hosting add
? Select the environment setup: DEV (S3 only with HTTP)
? hosting bucket name phu-blogs-20190407215754-hostingbucket
? index doc for the website index.html
? error doc for the website index.html
- Đẩy hosting lên cloud:
$amplify push
- Publish code lên hosting trên cloud:
$amplify publish
Done!
Các bạn có thể xem website ở link sau:
http://phu-blogs-20190407215754-hostingbucket-dev.s3-website-ap-northeast-1.amazonaws.com/
V. To be continuous:
Nếu các bạn quan tâm đến chủ để này thì sẽ tiếp tục phần 2 với một số nội dung dự kiến như:
- So sánh Rest API và GraphQL API
- Tích hợp phần add file/video trong editor với S3(hiện tại demo của mình mới cho phép nhập text thôi nhé)
- Phân quyền theo các role: Admin, User, Guest
- Tích hợp chức năng chat
- Tích hợp 1 chức năng gì đó mới mẻ gì đó như IoT hay VR
Trường hợp ngược lại mình xin chuột rút ở đây luôn nhé ^^
