Will là một nhà khoa học máy tính và say mê gần như tất cả các khía cạnh của lĩnh vực công nghệ. Ông đặc biệt quan tâm đến điện toán di động và xã hội và hiện là nhà nghiên cứu trong lĩnh vực này tại Đại học Cardiff Show Trực tiếp tải lên tệp S3 trong nút. jsEnglish — 日本語に切り替える Cập nhật lần cuối ngày 09 tháng 3 năm 2022 Mục lục
Các ứng dụng web thường yêu cầu khả năng cho phép người dùng tải lên các tệp như hình ảnh, phim và tài liệu lưu trữ. Amazon S3 là tùy chọn lưu trữ phổ biến và đáng tin cậy cho các tệp này Bài viết này trình bày cách tạo một Nút. js tải tệp trực tiếp lên S3 thay vì thông qua ứng dụng web, sử dụng hỗ trợ Chia sẻ tài nguyên nguồn gốc chéo (CORS) của S3. Khung web Express được sử dụng để tạo điều kiện thuận lợi cho việc xử lý yêu cầu trong các ví dụ bên dưới, nhưng quy trình phải gần như giống hệt nhau trong bất kỳ Nút nào. ứng dụng js Tải trực tiếp lên S3Một ví dụ đầy đủ về mã được thảo luận trong bài viết này có sẵn để sử dụng trực tiếp trong kho lưu trữ GitHub này Ưu điểm chính của tải lên trực tiếp là tải trên dynos của ứng dụng của bạn sẽ giảm đáng kể. Việc sử dụng các quy trình phía ứng dụng để nhận tệp và chuyển sang S3 có thể buộc các dynos của bạn không cần thiết và điều đó có nghĩa là chúng sẽ không thể đáp ứng các yêu cầu web đồng thời một cách hiệu quả Ứng dụng sử dụng JavaScript phía máy khách và phía ứng dụng để ký các yêu cầu. Quá trình tải lên thực tế được thực hiện không đồng bộ để bạn có thể quyết định cách xử lý luồng ứng dụng của mình sau khi quá trình tải lên hoàn tất (ví dụ: bạn có thể muốn chuyển hướng người dùng đến một trang khác sau khi tải lên thành công thay vì làm mới toàn bộ trang) Ví dụ về một tình huống chỉnh sửa tài khoản đơn giản được sử dụng làm hướng dẫn hoàn thành các bước khác nhau cần thiết để thực hiện tải lên trực tiếp và liên kết ứng dụng này với nhiều trường hợp sử dụng hơn. Thông tin thêm về kịch bản này được cung cấp sau Tổng quanS3 bao gồm một tập hợp các nhóm, mỗi nhóm có một tên duy nhất trên toàn cầu, trong đó có thể lưu trữ các tệp riêng lẻ (được gọi là đối tượng) và thư mục Để tải tệp lên S3, bạn sẽ cần ID khóa truy cập và Khóa truy cập bí mật đóng vai trò là tên người dùng và mật khẩu. Tài khoản khóa truy cập sẽ cần phải có đủ đặc quyền truy cập vào bộ chứa mục tiêu để quá trình tải lên thành công Vui lòng xem Bài viết S3 để biết thêm thông tin về điều này, cách tạo nhóm và xử lý khóa xác thực của bạn Nói chung, phương pháp được mô tả trong bài viết này tuân theo các bước đơn giản sau
Hướng dẫn này bao gồm thông tin về cách triển khai mã phía máy khách và phía ứng dụng để tạo thành hệ thống hoàn chỉnh. Sau khi làm theo hướng dẫn, bạn sẽ có một hệ thống barebones đang hoạt động, cho phép người dùng của bạn tải tệp lên S3. Tuy nhiên, thường đáng để thêm chức năng bổ sung để giúp cải thiện tính bảo mật của hệ thống và điều chỉnh nó cho các mục đích sử dụng cụ thể của riêng bạn. Con trỏ cho điều này được đề cập trong các phần thích hợp của hướng dẫn Việc tạo chữ ký trên máy chủ sử dụng SDK chính thức của AWS, như được giải thích sau. Vui lòng xem tài liệu của họ để biết thông tin về các tính năng của SDK này điều kiện tiên quyết
thiết lập ban đầuthiết lập S3Bây giờ, bạn sẽ cần chỉnh sửa một số thuộc tính quyền của bộ chứa S3 đích để yêu cầu cuối cùng có đủ đặc quyền để ghi vào bộ chứa. Trong trình duyệt web, đăng nhập vào bảng điều khiển AWS và chọn phần S3. Chọn nhóm thích hợp và nhấp vào tab 9. Một số tùy chọn hiện được cung cấp trên trang này (bao gồm Chặn truy cập công khai, Danh sách kiểm soát truy cập, Chính sách nhóm và cấu hình CORS)Đầu tiên, đảm bảo rằng “Chặn tất cả quyền truy cập công cộng” đã bị tắt và đặc biệt là tắt “Chặn quyền truy cập công khai vào nhóm và đối tượng được cấp thông qua danh sách kiểm soát truy cập mới” và “Chặn quyền truy cập công khai vào nhóm và đối tượng được cấp thông qua bất kỳ danh sách kiểm soát truy cập nào” . Thiết lập bộ chứa theo cách này cho phép chúng tôi đọc nội dung của nó mà không cần các URL đã ký, nhưng điều này có thể không phù hợp với các dịch vụ đang chạy trong sản xuất Tiếp theo, bạn sẽ cần định cấu hình cài đặt CORS (Chia sẻ tài nguyên nguồn gốc chéo) của vùng lưu trữ, cài đặt này sẽ cho phép ứng dụng của bạn truy cập nội dung trong vùng lưu trữ S3. Mỗi quy tắc phải chỉ định một tập hợp các miền được cấp quyền truy cập vào nhóm cũng như các phương thức và tiêu đề được phép từ các miền đó Để điều này hoạt động trong ứng dụng của bạn, hãy nhấp vào 'Chỉnh sửa' và nhập JSON sau cho cài đặt CORS của nhóm
Nhấp vào 'Lưu thay đổi' và đóng trình chỉnh sửa Điều này yêu cầu S3 cho phép mọi miền truy cập vào nhóm và các yêu cầu đó có thể chứa bất kỳ tiêu đề nào, điều này thường phù hợp để thử nghiệm. Khi triển khai, bạn nên thay đổi 'AllowedOrigin' để chỉ chấp nhận các yêu cầu từ miền của bạn Nếu bạn muốn sử dụng thông tin xác thực S3 dành riêng cho ứng dụng này, thì bạn có thể tạo nhiều khóa hơn trong các trang tài khoản AWS. Điều này giúp tăng cường bảo mật, vì bạn có thể chỉ định một nhóm yêu cầu rất cụ thể mà bộ khóa này có thể thực hiện. Nếu điều này phù hợp với bạn hơn, thì bạn sẽ cần định cấu hình người dùng IAM của mình trong tùy chọn Chỉnh sửa chính sách bộ chứa trong bộ chứa S3 của bạn. Có nhiều hướng dẫn khác nhau trên các trang web của AWS nêu chi tiết cách thực hiện điều này thiết lập ứng dụngNếu ứng dụng của bạn chưa được thiết lập, thì sẽ rất hữu ích nếu bạn làm như vậy ở giai đoạn này. Để bắt đầu, hãy tạo một thư mục ở đâu đó trên máy cục bộ của bạn
Bây giờ hãy tạo thêm hai thư mục con của 0 để chứa các trang HTML và tệp hỗ trợ của bạn
Trình quản lý gói của Node, 1, phải được cài đặt theo mặc định cùng với Node và có thể được sử dụng để xử lý việc cài đặt và cập nhật các gói cần thiết cho ứng dụng của bạn. Để bắt đầu điều này, hãy chạy công cụ thiết lập gói tương tác của Node trong thư mục gốc của thư mục ứng dụng của bạn
Công cụ này sẽ hỏi một số câu hỏi về ứng dụng của bạn, bao gồm tên, mô tả, cấp phép và kiểm soát phiên bản, đồng thời tạo một tệp có tên 2 trong thư mục gốc của ứng dụng. Tệp này sử dụng phản hồi của bạn để duy trì thông tin về ứng dụng của bạn, bạn có thể tự do chỉnh sửa thông tin này khi phát triển thêmCó thể sử dụng cùng một tệp để dễ dàng khai báo các phần phụ thuộc của ứng dụng, điều này sẽ tạo điều kiện thuận lợi cho việc triển khai và khả năng chia sẻ ứng dụng của bạn. Để làm như vậy, hãy chỉnh sửa 2 và thêm một đối tượng JSON 4 để chứa các gói phụ thuộc sau 0Những phụ thuộc này sau đó có thể được cài đặt bằng cách sử dụng 1 2Việc sử dụng các gói này sẽ trở nên rõ ràng sau này và việc cài đặt chúng theo cách này cho phép kiểm soát tốt hơn các phụ thuộc trên mỗi ứng dụng của bạn khi ứng dụng của bạn phát triển thiết lập herokuĐể ứng dụng của bạn truy cập thông tin đăng nhập AWS để ký yêu cầu tải lên, chúng sẽ cần được thêm dưới dạng biến cấu hình trong Heroku 3Ngoài thông tin đăng nhập truy cập AWS, hãy đặt tên cho bộ chứa S3 mục tiêu của bạn 4Sử dụng vars cấu hình tốt hơn các tệp cấu hình vì lý do bảo mật. Tránh đặt mật khẩu và khóa truy cập trực tiếp vào mã ứng dụng của bạn hoặc trong tệp cấu hình. Vui lòng xem bài viết Cấu hình và Vars cấu hình để biết thêm thông tin Việc thiết lập các biến môi trường cục bộ cho ứng dụng của bạn rất hữu ích để chạy và kiểm tra ứng dụng của bạn cục bộ. Để biết thêm thông tin, hãy xem phần Thiết lập biến môi trường cục bộ của bài viết Heroku Local. Thông tin về cách khởi chạy ứng dụng của bạn cục bộ sẽ được cung cấp ở phần sau của bài viết này Hãy nhớ thêm tệp 6 vào tệp 7 của bạn, vì tệp này chỉ được sử dụng để thử nghiệm cục bộTải lên trực tiếpCác quy trình và các bước cần thiết để thực hiện tải trực tiếp lên S3 sẽ được trình bày thông qua việc sử dụng một tình huống chỉnh sửa hồ sơ đơn giản cho mục đích của bài viết này. Ví dụ này sẽ liên quan đến việc người dùng được phép chọn ảnh đại diện để tải lên và nhập một số thông tin cơ bản sẽ được lưu trữ như một phần tài khoản của họ Trong trường hợp này, thủ tục sau đây sẽ diễn ra
Thiết lập mã phía máy kháchKhông yêu cầu mã của bên thứ ba để hoàn thành việc triển khai ở phía máy khách HTML và JavaScript hiện có thể được tạo để xử lý lựa chọn tệp, nhận yêu cầu và chữ ký từ ứng dụng Nút của bạn, sau đó thực hiện yêu cầu tải lên Đầu tiên, tạo một tệp có tên 8 trong thư mục 9 của ứng dụng của bạn và điền vào 0 và các thẻ HTML cần thiết khác một cách thích hợp cho ứng dụng của bạn. Trong phần nội dung của tệp HTML này, hãy bao gồm một tệp đầu vào và một phần tử sẽ chứa các cập nhật trạng thái về tiến trình tải lên. Ngoài ra, hãy tạo một biểu mẫu để cho phép người dùng nhập tên người dùng và tên đầy đủ của họ và một phần tử 1 ẩn để giữ URL của hình ảnh đại diện đã chọnĐể xem tệp HTML đã hoàn thành, vui lòng xem mã thích hợp trong kho lưu trữ đồng hành 1Phần tử 2 ban đầu giữ hình ảnh đại diện mặc định (sẽ trở thành hình đại diện của người dùng nếu không chọn hình ảnh mới) và đầu vào 3 duy trì URL hiện tại của hình đại diện người dùng đã chọn. Cả hai điều này đều được cập nhật bởi JavaScript, được thảo luận bên dưới, khi người dùng chọn hình đại diện mớiDo đó, khi người dùng cuối cùng nhấp vào nút gửi, URL của hình đại diện sẽ được gửi, cùng với tên người dùng và tên đầy đủ của người dùng, đến điểm cuối mong muốn của bạn để xử lý phía máy chủ Mã phía máy khách chịu trách nhiệm đạt được hai điều
Các đối tượng 4 của JavaScript có thể được tạo và sử dụng để tạo các yêu cầu HTTP không đồng bộĐể thực hiện điều này, trước tiên hãy tạo một khối 5 và viết một số mã để lắng nghe các thay đổi trong tệp đầu vào, sau khi tài liệu đã được tải và bắt đầu quá trình tải lên 6Mã này cũng xác định chính đối tượng tệp sẽ được tải lên. Nếu một cái đã được chọn đúng, nó sẽ tiến hành gọi một hàm để lấy yêu cầu PUT đã ký cho tệp. Do đó, tiếp theo, hãy viết một hàm chấp nhận đối tượng tệp và truy xuất một yêu cầu đã ký thích hợp cho nó từ ứng dụng 0Nếu tên ( 6) và/hoặc loại mime ( 7) của tệp bạn tải lên chứa các ký tự đặc biệt (chẳng hạn như dấu cách), thì chúng phải được mã hóa trước (e. g. 8)Hàm trên chuyển tên tệp và loại mime dưới dạng tham số cho yêu cầu GET vì chúng cần thiết trong quá trình xây dựng yêu cầu đã ký, sẽ được đề cập sau trong bài viết này. Nếu việc truy xuất yêu cầu đã ký thành công, chức năng sẽ tiếp tục bằng cách gọi một chức năng để tải tệp thực tế lên 1Chức năng này chấp nhận tệp sẽ được tải lên, yêu cầu đã ký và URL được tạo đại diện cho URL truy xuất cuối cùng của ảnh đại diện. Hai đối số sau sẽ được trả về như một phần của phản hồi từ ứng dụng. Hàm này, nếu yêu cầu tới S3 thành công, thì sẽ cập nhật phần tử xem trước thành hình ảnh đại diện mới và lưu trữ URL trong đầu vào ẩn để có thể gửi để lưu trữ trong ứng dụng Giờ đây, khi người dùng đã hoàn thành phần còn lại của biểu mẫu và nhấp vào gửi, tên, tên người dùng và hình ảnh đại diện đều có thể được đăng lên cùng một điểm cuối Nếu bạn thấy rằng trang không hoạt động như ý muốn sau khi triển khai hệ thống, thì hãy cân nhắc sử dụng 9 để ghi lại bất kỳ lỗi nào được phát hiện bên trong hàm 00 và sử dụng bảng điều khiển lỗi của trình duyệt để giúp chẩn đoán sự cố
Thông lệ tốt là thông báo cho người dùng về bất kỳ hoạt động kéo dài nào trong bất kỳ hình thức ứng dụng nào (dựa trên web hoặc thiết bị) và hiển thị các bản cập nhật về các thay đổi. Do đó, một chỉ báo tải có thể được hiển thị giữa việc chọn tệp và quá trình tải lên hoàn tất. Nếu không có loại thông tin này, người dùng có thể nghi ngờ rằng trang đã bị lỗi và có thể thử làm mới trang hoặc làm gián đoạn quá trình tải lên Thiết lập mã Node phía ứng dụngPhần này thảo luận về việc sử dụng Node. js để tạo chữ ký tạm thời mà yêu cầu tải lên có thể được ký. Chữ ký tạm thời này sử dụng thông tin đăng nhập xác thực AWS (khóa truy cập và khóa bí mật) làm cơ sở cho chữ ký, nhưng người dùng sẽ không có quyền truy cập trực tiếp vào thông tin này. Sau khi chữ ký hết hạn, thì các yêu cầu tải lên có cùng chữ ký sẽ không thành công Để xem tệp Node đã hoàn thành, vui lòng xem mã thích hợp trong kho lưu trữ đồng hành Bắt đầu bằng cách tạo tệp ứng dụng chính của bạn, 01, trong thư mục gốc của thư mục ứng dụng và thiết lập ứng dụng khung của bạn một cách thích hợp 2Trong một số trường hợp, có thể cần phải kiểm tra xem biến var 102 của môi trường có phải là số hay không bằng cách sử dụng _______103 Các gói được cài đặt với 1 được nhập ở đầu ứng dụng. Sau đó, ứng dụng Express được thiết lập và cuối cùng, tên bộ chứa được tải từ môi trườngBây giờ, bạn nên định cấu hình khu vực AWS của mình. Để làm như vậy, hãy cập nhật đối tượng 05 đã nhập. Ví dụ 3Hãy nhớ sử dụng khu vực mà nhóm mục tiêu của bạn nằm trong đó. Nếu bạn cần, hãy sử dụng trang này để tìm khu vực của bạn Tiếp theo, trong cùng một tệp, bạn sẽ cần tạo các chế độ xem chịu trách nhiệm trả lại thông tin chính xác cho trình duyệt của người dùng khi các yêu cầu được thực hiện đối với các URL khác nhau. Bên trong tệp 01, xác định chế độ xem cho các yêu cầu tới 07 để trả lại trang 8, trong đó có biểu mẫu để người dùng hoàn thành 4Bây giờ hãy tạo chế độ xem, trong cùng một tệp JavaScript, chịu trách nhiệm tạo và trả về chữ ký mà JavaScript phía máy khách có thể tải hình ảnh lên. Đây là yêu cầu đầu tiên của khách hàng trước khi thử tải lên S3. Chế độ xem này phản hồi các yêu cầu tới 09 5Mã này sử dụng mô-đun 20 để tạo URL đã ký mà trình duyệt có thể sử dụng để thực hiện yêu cầu PUT tới S3. Ngoài ra, URL tiềm năng của đối tượng được tải lên được tạo dưới dạng kết hợp giữa tên bộ chứa S3 và tên đối tượng. URL này và yêu cầu đã ký sau đó được trả về trình duyệt ở định dạng JSONTham số 21 mô tả số giây mà URL đã ký sẽ có hiệu lực đối với. Trong một số trường hợp, chẳng hạn như khi tải lên các tệp lớn, giá trị lớn hơn có thể phù hợp hơn để kéo dài hiệu lực của URL đã kýKhởi tạo đối tượng 22 sẽ tự động tải các biến 23 và 24 đã được đặt vào môi trường trước đóBạn có thể muốn gán một tên tùy chỉnh khác cho đối tượng thay vì sử dụng tên mà tệp đã được đặt tên, điều này rất hữu ích để ngăn việc vô tình ghi đè trong bộ chứa S3. Ví dụ: tên này có thể liên quan đến ID của tài khoản người dùng. Nếu không, bạn nên cung cấp một số phương pháp để trích dẫn đúng tên trong trường hợp có khoảng trắng hoặc các ký tự khó hiểu khác. Ngoài ra, đây là giai đoạn mà bạn có thể kiểm tra tệp đã tải lên để hạn chế quyền truy cập vào một số loại tệp nhất định. Ví dụ: có thể triển khai một kiểm tra đơn giản để chỉ cho phép các tệp 25 tiếp tục vượt quá thời điểm nàyCuối cùng, trong 01, tạo chế độ xem chịu trách nhiệm nhận thông tin tài khoản sau khi người dùng đã tải lên hình đại diện, điền vào biểu mẫu và nhấp vào gửi 6Chức năng này hiện chỉ là sơ khai mà bạn cần phải hoàn thành để cho phép ứng dụng đọc và lưu trữ thông tin hồ sơ đã gửi và liên kết chính xác thông tin đó với phần còn lại của chi tiết tài khoản người dùng Chạy ứng dụngBây giờ mọi thứ đã sẵn sàng để thực hiện tải trực tiếp lên S3. Để kiểm tra quá trình tải lên, hãy lưu mọi thay đổi và sử dụng 27 để khởi động ứng dụngBạn sẽ cần một Procfile để điều này thành công. Xem Bắt đầu với nút. js trên Heroku để biết thêm thông tin. Ngoài ra, hãy nhớ đặt chính xác các biến môi trường trên máy của bạn trước khi chạy ứng dụng cục bộ 7Nhấn 28 để quay lại lời nhắc. Nếu ứng dụng của bạn trả về lỗi 29 (hoặc các sự cố khác dựa trên máy chủ), thì hãy khởi động máy chủ của bạn ở chế độ gỡ lỗi và xem kết quả trong trình giả lập Terminal để giúp khắc phục sự cố của bạn 8Tóm lượcBài viết này đề cập đến việc tải lên Amazon S3 trực tiếp từ trình duyệt bằng Node. js để tạm thời ký yêu cầu tải lên. Mặc dù hướng dẫn và mã đồng hành tập trung vào khung Express, nhưng ý tưởng này sẽ dễ dàng chuyển sang các ứng dụng Node khác |