bởi Yong Zhang và Omar Faruk | vào ngày 07 tháng 05 năm 2024 | trong Amazon CodeCatalyst, AWS Amplify, DevOps, Front-End Web & Mobile, Technical How-to | Permalink | Chia sẻ
Amazon CodeCatalyst là dịch vụ phát triển và phân phối phần mềm thống nhất, cho phép các nhóm phát triển phần mềm lập kế hoạch, phát triển, cộng tác, xây dựng và phân phối ứng dụng trên AWS một cách nhanh chóng và dễ dàng. Amazon CodeCatalyst cung cấp các hành động (actions), một tập hợp các thành phần được xây dựng sẵn, dễ dàng để tích hợp. Các actions đáp ứng nhu cầu gia tăng năng suất của các nhà phát triển và tối ưu hóa việc phát triển bằng cách tự động hóa các hoạt động lặp đi lặp lại và đơn giản hóa các luồng công việc phức tạp. Một Workflow được tạo thành từ các hành động để xây dựng, kiểm thử và triển khai mã của bạn như một phần của hệ thống tích hợp liên tục và phân phối liên tục (CI/CD).
Giới thiệu
Bài viết này hướng dẫn bạn cách hosting một ứng dụng single-page (SPA) hiện có trên AWS. Nếu bạn đang phát triển một SPA mới hoàn toàn, hãy tận dụng Bản thiết kế ứng dụng single-page (Single-page application blueprint). Bản thiết kế chứa mã mẫu và tạo các tài nguyên dự án cho bạn. Bản thiết kế SPA sẽ sử dụng các framework như React, Vue hoặc Angular và triển khai nó lên AWS Amplify Hosting. Đầu tiên, bạn sẽ import một SPA hiện có từ GitHub. Sau đó, bạn sẽ khám phá việc tạo một workflow bao gồm các hành động để kiểm thử, xây dựng và triển khai SPA của bạn bằng AWS Amplify Hosting. Ngoài hành động AWS Amplify, CodeCatalyst còn cung cấp hành động Deploy to Amazon CloudFront và Amazon Simple Storage Service (Amazon S3) có thể triển khai SPA.
Hình 1 – Sơ đồ kiến trúc để hosting SPA.
Điều kiện tiên quyết
- Một không gian CodeCatalyst và tài khoản AWS được liên kết.
- Một môi trường CodeCatalyst đã được kết nối với tài khoản AWS.
- Một GitHub repository đã được fork sẽ được dùng như là mã nguồn cho ứng dụng, nó chưa nội dung của một trang web tĩnh React front-end.
Hướng dẫn chi tiết
Kết nối tài khoản GitHub với CodeCatalyst, sau đó truy cập vào không gian của bạn bằng cách nhấp vào tên không gian của bạn trong bảng điều khiển CodeCatalyst. Từ không gian của bạn, nhấp vào Create Project. Bạn sẽ có ba tùy chọn: From Blueprint, Bring your Own Code và Start from Scratch. Khi chọn Bring your Own Code, bạn sẽ thấy tùy chọn để liên kết tới GitHub repository của mình. Đối với mục đích của bài viết, tôi đã liên kết tài khoản của mình và cấp quyền cho repository Rent-A-Room.
Nhập tên dự án và nhấp vào Create Project. Trong hướng dẫn này, tôi sẽ đặt tên dự án là “StaticSite”. Hãy đặt tên cho dự án theo ý thích của bạn; tuy nhiên, tôi sẽ tham chiếu dự án này là StaticSite trong toàn bộ bài viết.
Hình 2 – Màn hình Create Project
Tạo một workflow
Một workflow chứa các hành động được tự động hóa theo trình tự, là một thành phần của hệ thống CI/CD và được tạo thành từ Name, SchemaVersion, Triggers và Actions, có thể được lắp ráp bằng YAML hoặc trình chỉnh sửa trực quan. Ngoài ra, có hai loại triggers cho một workflow đến từ việc giám sát danh sách các nhánh (branches) của repository mà người dùng đã chọn: push và pull request. Tất cả các hành động về cơ bản là mã được biên dịch và chạy trên loại tính toán do người dùng chỉ định trong môi trường được quản lý của AWS. Các hành động yêu cầu tương tác với tài nguyên AWS như tạo, sửa đổi hoặc xóa sẽ xảy ra trong tài khoản AWS của khách hàng, chẳng hạn như hành động Amplify Hosting.
Điều hướng đến giao diện bảng điều khiển Amazon CodeCatalyst và đảm bảo bạn đang ở đúng không gian và dự án.
Trong khi bạn đang ở trên trang dự án, “StaticSite” hoặc bất kỳ tên nào bạn đặt cho dự án, hãy nhấp vào nút thả xuống cạnh CI/CD trên thanh điều hướng ở phía bên trái của trang. Khi phần CI/CD được mở rộng, hãy nhấp vào Workflows.
Từ trang Workflows, nhấp vào nút Create workflow. Một biểu mẫu bật lên sẽ xuất hiện trên cùng một trang. Đảm bảo repository đã được liên kết với dự án và nhánh “main” được chọn, sau đó nhấp vào nút Create. Cấu hình này là Source của luồng công việc và được coi là “WorkflowSource”.
Trên trang workflow mới được tạo với YAML và trình soạn thảo trực quan, hãy đảm bảo chọn YAML và sửa đổi dòng 1 với tên workflow mà bạn thích. Lưu ý rằng tôi sẽ sử dụng trình soạn thảo YAML trong suốt bài viết này; tuy nhiên, bạn có thể sử dụng trình soạn thảo trực quan để đạt được kết quả tương tự thông qua các tùy chọn. Thay đổi được thực hiện trong một phương pháp sẽ phản ánh lên phương pháp khác.
Thêm hành động vào workflow
Actions có thể được kết hợp với các hành động khác và tùy chỉnh để tạo ra một workflow tự động phù hợp với các yêu cầu của một dự án cụ thể. Một số hành động hiện có hiện nay là đẩy nội dung lên Amazon S3, hiển thị tác vụ Amazon ECS, gọi hàm Amazon Lambda, triển khai ứng dụng bằng AWS CDK. Đối với dự án này, bạn sẽ sử dụng ba hành động: Build, Test và Deploy to AWS Amplify Hosting.
Hành động Build
Hành động Build xây dựng các artifacts và chạy các unit tests trong loại tài nguyên tính toán được chọn. Để xây dựng workflow với hành động Build, hãy nhấp vào nút +Actions để xem danh sách các hành động có thể được thêm vào workflow. Tìm kiếm hành động Build và nhấp vào nút +.
Trong trình soạn thảo YAML, bạn sẽ thấy hành động Build được thêm vào bên dưới Actions. Đổi tên hành động bằng cách sửa chuỗi bộ chọn cho hành động. Nhận dạng hành động là định danh duy nhất cho hành động và không được phép thay đổi. Điều chỉnh các mục Inputs, Outputs, Configuration và Compute cho phù hợp với yêu cầu ứng dụng của bạn. Nếu đây là lần đầu tiên bạn thực hiện việc này, nên sử dụng trình soạn thảo trực quan. Inputs là các file nguồn của dự án từ GitHub repository hoặc các artifacts được tạo bởi một hành động khác. Outputs chứa các artifacts, là đầu ra của hành động trong worflow, bao gồm một thư mục hoặc tập tin nén để chia sẻ giữa các hành động cho workflow tự động và được kết nối với nhau. Cuối cùng, CodeCatalyst hỗ trợ hai loại tài nguyên tính toán, AWS Lambda và Amazon Elastic Cloud Compute (EC2) để chạy hành động tương ứng.
Đối với dự án trang web tĩnh, bạn nên có cấu hình hành động sau cho hành động Build.
Name: OnPushBuildTestDeployWebsite
SchemaVersion: “1.0”
# Optional – Set automatic triggers.
Triggers:
– Type: Push
Branches:
– main
# Required – Define action configurations.
Actions:
Build:
# Identifies the action. Do not modify this value.
Identifier: aws/build@v1.0.0
# Specifies the source and/or artifacts to pass to the action as input.
Inputs:
# Optional
Sources:
– WorkflowSource # This specifies that the action requires this Workflow as a source
Outputs:
Artifacts:
– Name: build
Files:
– build/**/*
# Defines the action’s properties.
Configuration:
# Required – Steps are sequential instructions that run shell commands
Steps:
– Run: npm install #install all dependencies from packagae.json
– Run: npm run build #builds the app for production to the build folder
Compute:
Type: Lambda
Lưu ý: Nếu bạn thấy bất kỳ lỗi nào trên màn hình, hãy nhấp vào nút Validate để xóa lỗi. Nhấp vào Commit để cập nhật worflow trong repository nguồn của bạn. Trên cửa sổ pop-up trong trang, hãy nhập commit message và nhấp vào Commit.
Xem quá trình chạy và đảm bảo nó chạy thành công trước khi chuyển sang bước tiếp theo.
Hình 3 – Workflow của nguồn và hành động build
Hành động Test
Sử dụng hành động Test để chạy các bài integration và system test trên ứng dụng hoặc các artifacts. Nhấp vào Edit workflow để sửa đổi workflow và thêm hành động. Một trang mới sẽ tải với workflow để chỉnh sửa. Nhấp vào nút +Actions để xem danh sách các hành động có thể được thêm vào luồng công việc.
Tìm kiếm hành động Test và nhấp vào nút +. Điều chỉnh các mục Inputs, Outputs và Configuration trong YAML cho phù hợp với yêu cầu ứng dụng của bạn.
Trong hành động Build, đầu ra được sử dụng để thu thập các artifacts được tạo thông qua tác vụ build; tuy nhiên, đối với hành động Test, báo cáo sẽ được chụp lại từ tác vụ test.
Khi bật tính năng tự động tìm kiếm (auto-discovery) trong mục Outputs cho hành động Test, CodeCatalyst sẽ tìm kiếm trong các mục nhập và tất cả các tệp được tạo bởi hành động để tìm các báo cáo kiểm thử, báo cáo phủ mã code (code coverage), phân tích thành phần phần mềm (SCA) và phân tích tĩnh (SA). Các báo cáo này có thể được xem và thao tác trong CodeCatalyst Reports.
Đối với dự án trang web tĩnh này, một lệnh đơn giản “npm run test” sẽ hữu ích! Sử dụng IncludePaths để chỉ định các tệp và đường dẫn tệp mà bạn muốn CodeCatalyst bao gồm khi tìm kiếm báo cáo.
Test:
# Identifies the action. Do not modify this value.
Identifier: aws/managed-test@v1.0.0
# Specifies the source and/or artifacts to pass to the action as input.
Inputs:
# Optional
Sources:
– WorkflowSource # This specifies that the action requires this Workflow as a source
Outputs:
# Optional; Automatically discover reports for popular test frameworks
AutoDiscoverReports:
Enabled: true
# Use as prefix for the report files
ReportNamePrefix: Test
IncludePaths:
– coverage/**
– reports/**
# Defines the action’s properties.
Configuration:
# Required – Steps are sequential instructions that run shell commands
Steps:
# see info link in shell commands section for more details
– Run: npm install
– Run: npm test –coverage –watchAll=false –testResultsProcessor=”jest-junit”
Compute:
Type: Lambda
Commit các thay đổi của workflow với commit message bằng cách nhấp vào nút Commit. Xem quá trình chạy và đảm bảo tất cả các hành động chạy thành công trước khi chuyển sang bước tiếp theo.
Tôi sẽ không đi sâu vào các báo cáo được tạo và chất lượng code. Bạn có thể tìm hiểu thêm về cách duy trì chất lượng code với Amazon CodeCatalyst reports.
Xem quá trình chạy và đảm bảo nó chạy thành công trước khi chuyển sang bước tiếp theo.
Hình 4 – Workflow có thêm hành động Test
Hành động Deploy to AWS Amplify Hosting Action
Hành động Deploy to AWS Amplify Hosting triển khai ứng dụng lên AWS Amplify Hosting. Sau khi phát triển một SPA với cấu hình build và test, bạn có thể host ứng dụng của mình bằng AWS Amplify Hosting với triển khai liên tục. Điều đáng chú ý là AWS Amplify tận dụng CloudFront Global Edge Network để phân phối ứng dụng của bạn trên toàn cầu.
Để xây dựng workflow với hành động Deploy to AWS Amplify Hosting, bạn phải đảm bảo rằng bạn đã tạo một môi trường (created an Environment), đây là cách để tổ chức một bộ sưu tập các mục tiêu triển khai, cảnh báo và quy tắc của bạn. Trong bài viết này, tôi giả định rằng bạn đã có một môi trường được cấu hình sẵn trên Amazon CodeCatalyst.
Cuối cùng, bạn sẽ thêm một hành động mới từ danh mục hành động để host ứng dụng frontend trên AWS Amplify. Trong Amazon CodeCatalyst workflow, nhấp vào Actions, sau đó nhấp vào edit trên workflow “OnPushBuildTestDeployWebsite”, sau đó thêm hành động Deploy to AWS Amplify Hosting bằng cách nhấp vào nút +Action và tìm kiếm nó trong danh mục Actions.
Điều chỉnh YAML với các nội dung sau:
- Tên môi trường (Environment name), Tên kết nối tài khoản AWS (AWS account connection name) và Tên vai trò IAM (IAM Role name) được liên kết với kết nối. Đây là yêu cầu bắt buộc cho hành động.
- Lưu ý rằng IAM Role cần có các quyền cần thiết để tương tác với AWS Amplify và CloudFormation, hãy cân nhắc đính kèm policy AdministratorAccess-Amplify managed vào IAM role. Quyền CloudFormation cần thiết là CreateStack, DescribeStackResources và DescribeStacks. Ngoài ra, cần có policy tin cậy tùy chỉnh để cho phép các đối tượng chính của CodeCatalyst AssumeRole. Vui lòng xem tài liệu của hành động bằng cách nhấp vào tên của hành động trong danh mục Actions. Nó bao gồm các IAM policies chính xác cần thiết và thêm thông tin về hành động.
- Artifacts làm đầu vào, trong trường hợp này là artifact được tạo bởi hành động Build.
- Các tham số cấu hình (Configuration parameters) của AppStackName, AppId, AmplifyBranchName, Wait, CreateBranch, Region và Path. Các tham số cấu hình cho hành động biết đặt tên cho Amazon CloudFormation Stack của bạn như thế nào và cách host Ứng dụng Amplify của bạn. Các tham số này là tùy chọn và không bắt buộc. Nếu không được cấu hình, chuỗi có thể được tạo cho một số tham số hoặc mặc định được chọn.
AppStackName là tên ngăn xếp duy nhất cho ứng dụng Amplify mới. Chỉ cần nhập AppStackName hoặc AppId, không cần cả hai. AppId là ID duy nhất cho một ứng dụng Amplify hiện có. AmplifyBranchName là tên của nhánh (branch) là một phần của ứng dụng Amplify và bạn có thể sử dụng ${WorkflowSource.BranchName} để tham chiếu tên nhánh của nguồn được liên kết với workflow. Tham số Wait sẽ đợi ứng dụng Amplify của bạn hoàn thành triển khai trước khi tiếp tục sang hành động tiếp theo hoặc được đánh dấu là hoàn thành. Region là vùng AWS nơi bạn muốn triển khai ứng dụng của mình. Path là đường dẫn đến thư mục chứa các tệp cần được đóng gói. Nếu bỏ qua, CodeCatalyst sẽ đóng gói toàn bộ nguồn.
- Tham số DependsOn để đảm bảo rằng ứng dụng Amplify chỉ triển khai sau khi các artifacts được tạo và test được hoàn thành thành công.
DeploytoAWSAmplifyHosting:
# Identifies the action. Do not modify this value.
Identifier: codecatalyst-labs/deploy-to-amplify-hosting@v1.0.1
# Required; You can use an environment, AWS account connection, and role to access AWS resources.
Environment:
Connections:
– Role: CodeCatalystWorkflowDevelopmentRole-WebDevTeam
Name: DevEnvironment
Name: development
# Specifies the source and/or artifacts to pass to the action as input.
Inputs:
Artifacts:
– build
Compute:
Type: EC2
# Required paramters for the action to create Amplify App
Configuration:
Wait: true
AWSRegion: us-east-1
AppStackName: RentARoom
CreateBranch: true
AmplifyBranchName: ${WorkflowSource.BranchName}
Path: build
#To only run this action if the build and test stage are successful
DependsOn:
– Build
– Test
Nhấp vào Commit để cập nhật workflow trong repository nguồn của bạn.
Bây giờ bạn có thể đã chạy tất cả các hành động thành công.
Hình 5 – Workflow chạy với hành động Amplify Hosting được thêm vào
Hành động “DeploytoAWSAmplifyHosting”, sau khi chạy thành công, sẽ có một liên kết siêu văn bản dưới dạng Xem ứng dụng (View app). Bằng cách nhấp vào liên kết này, bạn sẽ được chuyển hướng đến SPA mới do AWS Amplify Hosting hosted.
Hình 6 – SPA có thể định tuyến công khai trong trình duyệt
Dọn dẹp
Nếu bạn đã thực hiện theo hướng dẫn để xây dựng luồng công việc này, bạn nên xóa các tài nguyên đã triển khai để tránh phát sinh thêm chi phí. Đầu tiên, hãy xóa ngăn xếp đã được triển khai từ bảng điều khiển AWS CloudFormation trong tài khoản AWS mà bạn đã liên kết khi khởi chạy bản thiết kế. Ngăn xếp sẽ có tên RentARoom, trừ khi bạn đặt tên cho ngăn xếp khác trong cấu hình của hành động “DeploytoAWSAmplifyHosting”. Thứ hai, xóa dự án khỏi CodeCatalyst bằng cách điều hướng đến Project settings và nhấp vào nút Delete project.
Kết luận
Trong bài viết này, bạn đã tạo một dự án và kết nối GitHub repository hiện có của ứng dụng single-page (SPA). Tiếp theo, bạn tận dụng Workflows, một quy trình tự động là một phần của hệ thống CI/CD chứa một loạt các hành động. Cuối cùng, bạn đã chọn các hành động được tuyển chọn để xây dựng, kiểm thử và triển khai ứng dụng của mình lên AWS Amplify Hosting. Bằng cách sử dụng các khái niệm này, giờ đây bạn có hosting ứng dụng single-page (SPA) của mình với Amazon CodeCatalyst. Tìm hiểu thêm về Amazon CodeCatalyst và bắt đầu ngay hôm nay!
AWS Study Group 