+5

Deploy ứng dụng ReactJS lên AWS Amplify

Xin chào các bạn, hôm này mình sẽ hướng dẫn các bạn deploy một dự án ReactJS lên nền tảng AWS Amplify.

AWS Amplify là gì

AWS Amplify là một bộ công cụ được xây dựng có mục đích để phát triển, phân phối và quản lý các ứng dụng với khả năng mở rộng và được xây dựng trên các nền tảng web và nền tảng di động phổ biến.

image.png

Các bạn có thể đọc thêm thông tin tại AWS Amplify

Tạo React Application

Dùng công cụ create-react-app để tạo thư mục dự án ReactJS có tên là reactjs-amplify, mở Terminal và gõ:

npx create-react-app reactjs-amplify
cd reactjs-amplify
npm start

Nếu bạn chưa rõ thì có thể tham khảo bài viết này của mình về cách tạo ReactJS App với công cụ create-react-app nhé:

https://viblo.asia/p/tao-ung-dung-reactjs-bang-create-react-app-Eb85oXr0K2G

Tạo Github Repository

Mình sẽ link AWS Amplify tới github để thực hiện deploy, do đó cần tạo một repository: image.png

Tiếp theo ở terminal, cần gán github repo mới tạo cho folder dự án ReactJS, sau đó đẩy code đã được tạo lên github.

git init
git remote add origin git@github.com:username/reponame.git
git add .
git commit -m "First commit"
git push origin master

Deploy ứng dụng

Để truy cập vào AWS Amplify các bạn vào link AWS Management Console, sau đó tìm ở ô tìm kiếm và nhấn vào AWS Amplify:

image.png

Tiếp theo nhấn vào nút New App, chọn Host web app để tạo web app mới:

image.png

Chọn lấy source code từ github rồi bấm Continue: image.png

Nếu bạn chưa đăng nhập thì sẽ có tuỳ chọn để bạn đăng nhập và cho phép AWS Amplify có thể lấy thông tin từ github của bạn.

Chọn repo của bạn, sau đó chọn branch chứa source code cần deploy, bấm Next:

image.png

Tiếp tục bấm Next:

image.png

Chọn Save and deploy:

image.png

Sau đó cần đợi một chút để quá trình deploy hoàn tất.

Tạo thêm môi trường khác

Bạn có thể tạo thêm môi trường khác để deploy đồng thời với môi trường được deploy từ nhánh master bằng cách chọn Connect branch:

image.png

Chọn nhánh cần để deploy, ở đây của mình là nhánh develop, sau đó chọn Next và làm các bước tương tự như khi nãy:

image.png

Sau khi deploy xong thì mình đã có 2 môi trường cho 2 nhánh masterdevelop, như ở đây:

image.png

Kết quả

Đây là 2 link đã được deploy từ 2 nhánh như mình đã làm ở trên, các bạn có thể tham khảo nhé. Cảm ơn các bạn đã đọc bài viết của mình!

Master: https://master.d12u7dmslwbee4.amplifyapp.com/

Develop: https://develop.d12u7dmslwbee4.amplifyapp.com/

image.png


All Rights Reserved

Viblo
Let's register a Viblo Account to get more interesting posts.