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

Nguồn: Viblo

Bình luận
Vui lòng đăng nhập để bình luận
Một số bài viết liên quan