Hướng Dẫn Triển Khai Website Frontend Vue.js Trên AWS S3

Chào các bạn! Hôm nay, mình sẽ hướng dẫn các bạn cách triển khai (deploy) website frontend được phát triển bằng Vue.js lên dịch vụ lưu trữ AWS S3. Đây là một phương pháp rất hiệu quả để đưa ứng dụng của bạn đến với người dùng một cách nhanh chóng và tiết kiệm.

1. Thực hiện Build Ứng Dụng Vue.js

Trước tiên, bạn cần thực hiện xây dựng (build) mã nguồn của ứng dụng Vue.js của bạn. Để thực hiện điều này, hãy mở terminal và chạy lệnh sau:

npm run build

Sau khi quá trình build hoàn tất, các tệp tin sẽ được ghi vào thư mục dist. Đây chính là phiên bản đã được tối ưu hóa cho sản phẩm.

2. Đăng Nhập Vào AWS S3

Tiếp theo, bạn hãy đăng nhập vào tài khoản AWS của mình và truy cập vào dịch vụ S3.

3. Tạo Bucket Mới

Bạn cần tạo một bucket mới để chứa website của mình. Khi tạo bucket, hãy chắc chắn thực hiện các bước sau:

• Bỏ chọn (uncheck) tùy chọn "Block all public access" để cho phép truy cập công cộng vào website của bạn.

4. Cấu Hình Static Website Hosting

Sau khi tạo xong bucket, hãy vào bucket vừa tạo. Tại phần Properties, tìm đến mục Static website hosting. Nhấp vào nút Edit và thực hiện các bước như sau:

• Chọn Enable.
• Điền tên cho trang index và error của bạn, thông thường sẽ là index.html cho trang index.

5. Cấu Hình Quyền Truy Cập (Permissions)

Tiếp theo, chúng ta sẽ chuyển sang tab Permissions. Ở mục Bucket Policy, cấu hình JSON như sau:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::bucket-cua-ban/*"
        }
    ]
}

Thay thế bucket-cua-ban bằng tên bucket mà bạn đã tạo.

Kết Luận

Như vậy, bạn đã hoàn thành việc public website của mình lên AWS S3. Bạn có thể kiểm tra và truy cập vào website tại liên kết có trong tab Properties của bucket.

Ngày mai, mình sẽ hướng dẫn các bạn cách triển khai website đã được deploy lên AWS S3 vào CloudFront và kết nối với tên miền mà các bạn đã sở hữu! Hãy đón xem nhé!
source: viblo