SonTran's avatar
Son Tran
AWS

Deploy React app trên AWS EC2

Deploy React app trên AWS EC2
0 views
5 min read
#AWS
Table Of Content

Việc deploy một ứng dụng cơ bản lên AWS EC2 là một cách để bạn luyện tập và hiểu biết sâu hơn về cloud, cụ thể là EC2. Ở bài viết này chúng ta sẽ cùng tìm hiểu cách để deploy một react app đơn giản lên AWS EC2.

Chuẩn bị

  1. Một tài khoản AWS: Tất nhiên rồi, chúng ta sẽ cần có một tài khoản cơ bản để có thể try cập vào AWS. Với một tài khoản mới tạo sử dụng free tier, chúng ta cũng không cần lo lắng về chi phí dịch vụ.
  2. Cài đặt Nodejs và npm.
  3. React app
  4. Một số câu lệnh thao tác cơ bản và SSH key.

Bước 1: Tạo mới một EC2 intance

  1. Đăng ký đăng nhập vào AWS console: Sau khi đăng nhập, bạn nên chọn lại religion gần với nơi của bạn để đảm bảo được đường truyền tốt nhất. Ở đây tôi chọn Asia Pacific(Singapore) religion-select
  2. Truy cập vào EC2 dashboard
  3. Click "Launch Instances" để bắt đầu khởi tạo một EC2 instance
  4. Điền các thông tin cần thiết để khởi intance:

  • Các thông số ở đây bạn sẽ để mặc định, và có một số thông tin bạn có thể chỉnh sửa cho phù hợp.

  • Name and tags: Ở đây tôi sẽ chỉ điền tên của intance, bạn có thể điền thêm tag nếu muốn.

    step1-name-intance

  • Application and OS Images (Amazon Machine Image). Ở đây bạn chọn AMI ubuntu và để version mặc định của tài khoản free tier.

    step1-ami

  • Key pair (login): Ở đây tôi sẽ tạo mới một key pair để lát tôi có thể truy cập vào intance. Các thông số khác bạn có thể để mặc định và lưu lại keypair sau khi download.

    step1-keypair

  • Network settings: ở đây tôi sẽ ví dụ mở các access để sau khi tạo mình có thể truy cập.

    step1-network
    • Sau đó bạn sẽ cần click "Launch Instances" ở góc bên phải thuộc phần Summary. Bạn sẽ cần đợi một chút để intance được khởi tạo.
    run-ec2

    Bước 2: Kết nối và cấu hình EC2 intance

    1. Kết nối với EC2 intance: Bạn sử dụng terminal để thêm một số câu lệnh. Ở đây bạn cần đường dẫn keypair và public Ipv4 adress.

    • SSH yêu cầu private key sử dụng không được để chế độ public view vì lí do bảo mật. Vậy nên bạn cần set quyền cho file keypair để sử dụng.
    chmod 400 /path/to/your/key.pem
    • Sau đó, bạn có thể tạo kết nối với ec2 instance qua câu lệnh ở dưới. Bạn sẽ cần đồng ý để mở kết nối truy cập tới instance.
    ssh -i /path/to/your-key.pem ubuntu@your-instance-public-ipv4-adress
    1. Cài đặt Nodejs và npm
    sudo apt-get update
sudo apt-get install nodejs npm

Bước 3: Build react-app trên EC2 intance

  1. Bạn cần có một repo react-app đã push lên github.

  2. Sau khi đã ssh tới instance, bạn sẽ clone source code react-app trên instance.

    git clone link-to-your-repo-react-app

  3. Tiếp tục cd vào repo và chạy build react-app

    cd your-repo-name
npm install
npm run build
    step3-build-app

Bước 3: Cài đăt Nginx

  1. Cài đặt Nginx

    sudo apt-get install nginx

  2. Cấu hình Nginx cho react-app. Bạn có thể xoá các cấu hình mặc định để ghi đè cấu hình mới.

    sudo nano /etc/nginx/sites-available/default
    server {
 listen 80;  # Nginx listens on port 80, which is the standard port for HTTP traffic
 server_name your-instance-Public-IPv4-address;  # Binds this server block to the public IP address of your EC2 instance

 location / {
     root /home/ubuntu/demo-react-app/build;  # The directory where your React app's build files are located
     index index.html;  # Serves index.html as the default page

     try_files $uri $uri/ /index.html;  # Tries to serve the file from the URL, if not found, serves index.html
 }
}

  3. Kiểm tra syntax của file cấu hình

    sudo nginx -t

  4. Reset lại Nginx để áp dụng các thay đổi trong file config

    sudo systemctl restart nginx

  5. Kiểm tra react-app đã deploy tại địa chỉ your-public-IPv4-address. Lưu ý, ở đây bạn deploy trên port 80 nên khi truy cập bạn cần đổi https => http để có thể truy cập.

    deploy-success

  6. Lỗi Permission denied Nếu react-app của bạn chưa xuất hiện, có thể bạn đang gặp lỗi do file cấu hình Nginx không có quyền truy cập file index.html trong folder build của project. Vì vậy, để đảm bảo các đường dẫn tới file build mà Nginx có thể thực thi, bạn chạy câu lệnh:

    sudo chmod 755 /home /home/ubuntu /home/ubuntu/your-app-name

Tổng kết

Bạn đã deploy thành công react-app của bạn trên AWS EC2. Việc triển khai thành công ứng dụng React lên AWS EC2 không chỉ giúp bạn nâng cao kỹ năng quản lý máy chủ mà còn mở rộng khả năng tối ưu và bảo mật ứng dụng của mình. Bạn bây giờ đã có thể tự tin hơn trong việc vận hành và phát triển các ứng dụng trên nền tảng đám mây, đặt nền móng vững chắc cho các dự án tương lai.