Quản lý hình ảnh toàn bộ (feat. Node.js, React, MongoDB, AWS)
‘Tôi nên lưu các tập tin như hình ảnh ở đâu và như thế nào? Lưu vào cơ sở dữ liệu? Hay ổ cứng của máy chủ? Làm thế nào để giảm tải cho máy chủ? Làm sao tôi có thể tải nhiều hình ảnh một cách nhanh chóng mà không bị giật? AWS S3 là gì? Mạng lưới phân phối nội địa?! Tôi chỉ muốn lưu và tải hình ảnh, tại sao lại có nhiều thành phần như vậy? Những yếu tố nào đóng vai trò gì và chúng nên được kết hợp như thế nào? Chúng tôi sẽ hướng dẫn bạn từ đầu đến cuối bằng cách tinh chỉnh các yếu tố cần thiết liên quan đến tệp hình ảnh trong full stack :)
Bí quyết quản lý hình ảnh nằm trong tay bạn! 💾 Hãy tham gia cùng chúng tôi để có một ví dụ đầy đủ thú vị.
Quản lý hình ảnh Nó có ảnh hưởng đến tính hoàn chỉnh của dịch vụ không?
Nếu tốc độ tải hình ảnh quá chậm thì sao?
Điều này sẽ gây hại đến khả năng sử dụng dịch vụ và ảnh hưởng nghiêm trọng đến trải nghiệm của người dùng.
Nhiều mối quan tâm xung quanh việc quản lý hình ảnh 🤔
Tôi có thể gửi và nhận hình ảnh như thế nào?
Có gì khác biệt nếu tôi lưu trữ hình ảnh riêng biệt trên máy chủ/phần mềm/đám mây?
Có cách nào để hiển thị bản xem trước tệp hoặc trạng thái đang tải khi tải hình ảnh lên không?
Tôi cũng cần triển khai phân trang và cuộn vô hạn...
Tốc độ và khả năng mở rộng Bạn không thể bỏ lỡ cả hai.
Khi phát triển trang web hoặc ứng dụng, có hai điều chính mà các nhà phát triển mong muốn.
Đầu tiên, nó phải nhanh.
Theo dữ liệu được Amazon công bố cách đây khoảng 10 năm, cứ tăng tốc độ tải 100ms thì doanh số giảm 1%. Đối với một công ty lớn như Amazon, ngay cả 1% cũng là một khoản lỗ rất lớn.
Thứ hai, nó phải có khả năng mở rộng.
Nếu tốc độ tải chậm lại chỉ vì số lượng người dùng dịch vụ tăng lên thì điều đó chẳng có ý nghĩa gì, đúng không? Bởi vì mọi người đều muốn tạo ra một dịch vụ được nhiều người sử dụng.
Các tệp như hình ảnh ở đây có thể có tác động rất lớn đến tốc độ và khả năng mở rộng. Như chúng ta đã thấy ở trên, trang web sẽ tự tải, nhưng đôi khi bạn có thể cảm thấy bực bội vì hình ảnh không tải nhanh và chậm. Nếu bạn không xử lý các tệp như hình ảnh một cách hiệu quả, nó sẽ xuất hiện sớm hơn so với các thành phần phụ trợ/giao diện khác. Và nếu thực hiện sai, nó có thể gây ra gánh nặng không cần thiết cho máy chủ chính của bạn.
Chúng ta có nên nghĩ đến nguyên nhân gốc rễ không? Tệp hình ảnh có dung lượng rất lớn. Thông thường, khi giao diện người dùng gọi giao diện người dùng, lượng dữ liệu nhận được sẽ được tính bằng kilobyte (KB), ngay cả khi lượng dữ liệu đó rất lớn. Các tập tin như hình ảnh có thể có kích thước lên tới hàng chục megabyte (MB). Việc tải một hình ảnh lớn như vậy chắc chắn sẽ làm chậm dịch vụ.
Do đó, chúng ta có thể thấy rằng việc xử lý và quản lý tốt các tập tin hình ảnh là một yếu tố rất quan trọng trong phát triển dịch vụ .
Tôi cảm thấy điều đó thông qua trải nghiệm của riêng tôi Tôi sẽ cho bạn biết bí quyết.
Tôi đã gặp vấn đề này rất nhiều khi phát triển thương mại điện tử trước đây. Tôi gặp vấn đề với thời gian tải trang khá lâu. Sau khi xem xét, tôi thấy rằng không chỉ hình ảnh chi tiết do các nhà thiết kế tải lên mà cả hình ảnh do khách hàng tải lên trong bài đánh giá của họ cũng chiếm khá nhiều dung lượng.
Cho dù tôi có tối ưu hóa DB và phần phụ trợ bao nhiêu đi nữa thì cũng vô nghĩa. Việc tải hình ảnh đã trở thành một nút thắt cổ chai. Chúng tôi đã giải quyết vấn đề này một cách tối ưu khi xây dựng trung tâm thương mại của riêng mình.
Nhưng đáng ngạc nhiên là có rất nhiều người xung quanh tôi không biết rõ về giải pháp này. Mặc dù nhiều người đã triển khai một phần giải pháp, nhưng vẫn còn nhiều người chưa biết về việc Thay đổi kích thước bằng AWS Lambda , đặc biệt là hàm presignedUrl của AWS S3 . Khi bạn xây dựng cơ sở hạ tầng đúng cách thì mọi việc rất dễ dàng, nhưng vấn đề là có rất nhiều quy trình tẻ nhạt và nếu thực hiện sai, bạn có thể gặp rủi ro bảo mật đám mây. Ngay cả khi bạn cố gắng tìm kiếm thông tin thì chúng cũng nằm rải rác ở đây đó nên lúc đầu không dễ để hiểu. Tôi quyết định tạo bài giảng này vì tôi muốn có thể xem thông tin rời rạc này như một nguồn tài nguyên được tinh chỉnh.
Vì vậy, bài giảng này được sản xuất dưới dạng một ngăn xếp đầy đủ, bao gồm cả đám mây cũng như phần phụ trợ và phần giao diện. Tuy nhiên, khóa học này không tập trung vào full-stack. Để quản lý hình ảnh đúng cách, bạn cần chú ý đến front-end, back-end và cơ sở hạ tầng (đám mây), vì vậy chúng tôi đã tạo ra bài giảng này dưới dạng bài giảng đầy đủ để hiểu đúng về cấu trúc. 😊 Xin lưu ý rằng tập trung vào quản lý hình ảnh !
Chỉ dành cho bài giảng này Để tôi cho bạn biết các tính năng.
Quản lý hình ảnh Bao phủ mọi thứ Bài giảng đầy đủ!
Phù hợp với cuộc sống thực Kỹ năng giải quyết vấn đề Tôi sẽ nuôi dưỡng bạn.
Tập trung cốt lõi! Chỉ những thứ cần thiết Một cách gọn nhẹ.
Khóa học này tập trung vào quản lý hình ảnh.
Khóa học này là khóa học đầy đủ bao gồm cả phần back-end, front-end và cơ sở hạ tầng (đám mây). Xin lưu ý rằng các kỹ thuật được sử dụng trong bài giảng sẽ cố gắng giải thích các khái niệm, nhưng trọng tâm là 'quản lý hình ảnh' .
Khóa học sử dụng nhiều công nghệ khác nhau như Node.js, MongoDB và React. Tôi nghĩ điều này hữu ích cho những người mới tham gia phát triển dịch vụ khi thấy được luồng toàn bộ ngăn xếp 🙂
Giải quyết vấn đề từ nhỏ đến lớn.
Một nhà phát triển giỏi đóng vai trò là người giải quyết vấn đề phải có khả năng xác định chính xác nguyên nhân của vấn đề và tạo ra giải pháp tối ưu trong thời gian (nguồn lực) nhất định. Do đó, việc học bằng cách chỉ ghi nhớ giải pháp là vô nghĩa.
Một ví dụ tiêu biểu là Kiến trúc vi dịch vụ (MSA). Nếu bạn giới thiệu nó cho một dịch vụ mà bạn mới bắt đầu sau khi nghe mọi người nói tốt về nó, nó có thể dẫn đến thảm họa... Bạn thậm chí có thể không hiểu tại sao lại cần nó. Trên thực tế, nó thậm chí có thể có tác dụng ngược lại.
Vì vậy, khóa học này sẽ không dạy cho bạn giải pháp hoàn hảo ngay từ đầu. Tôi sẽ bắt đầu bằng một vấn đề nhỏ mà bạn có thể liên tưởng đến. Và chúng tôi sẽ tăng dần mức độ khó và chỉ cho bạn phương pháp giải quyết vấn đề tối ưu .
Chứa đựng bản chất của việc quản lý hình ảnh.
Khóa học này chỉ đề cập đến những kỹ thuật thiết yếu để học quản lý hình ảnh. Ví dụ, bạn có thể tạo một trang web đẹp bằng cách sử dụng khung CSS hoặc tự thiết kế trang web, đúng không? Tuy nhiên, vì nó không liên quan gì đến việc học quản lý hình ảnh nên tôi đã áp dụng kiểu dáng tối giản mặc dù thiết kế khá mộc mạc. Hãy theo dõi bài giảng và tìm hiểu những kiến thức cốt lõi, thiết yếu!
Đối với những người này Tôi khuyên bạn nên làm vậy.
Sử dụng hình ảnh Ứng dụng web hoặc di động Bất kỳ ai muốn phát triển
Phát triển toàn bộ ngăn xếp Nhẹ nhàng một lần Bất cứ ai muốn nếm thử nó
AWS (Dịch vụ web của Amazon) Đám mây Bất cứ ai muốn sử dụng nó
Hình ảnh, v.v. Quản lý các tập tin có dung lượng cao Dành cho những ai muốn làm đúng
Như một ví dụ vui Hãy theo dõi và học hỏi.
Chúng tôi sẽ tạo một trang album ảnh đơn giản sử dụng nhiều ảnh và phân phối lên đám mây. Thực hiện theo hướng dẫn từ đầu đến cuối để tạo một ứng dụng web có thể dễ dàng tải nhiều hình ảnh!
Hãy theo dõi bài giảng và học nhé!
✅ Cách cơ bản nhất để lưu hình ảnh bằng Multer ✅ Phát triển chức năng xác thực dựa trên phiên và chức năng album ảnh ✅ Sự quyến rũ của MongoDB mà bạn lần đầu tiên trải nghiệm! ✅ Phân trang, ảnh hưởng đến hiệu suất Và việc triển khai Infinite Scroll để bổ sung cho điều này ✅ Cách quản lý tệp trên đám mây, lưu trữ tệp AWS S3, không phải máy chủ hoặc cơ sở dữ liệu ✅ Giảm kích thước hình ảnh bằng AWS Lambda
Dịch vụ album ảnh mà chúng ta sẽ tạo trong bài giảng này có cấu trúc như sau.
Câu hỏi dự kiến Q&A
H. Tôi có thể nghe ngay cả khi sử dụng công nghệ khác không?
Nếu bạn có một chút kinh nghiệm về phát triển web, tôi nghĩ bạn có thể theo kịp ngay cả khi bạn là nhà phát triển Java, PHP hoặc Python nhưng không biết nhiều về Javascript. Thay vào đó, tôi coi đây là cơ hội tốt để trải nghiệm sơ qua Node.js, MongoDB và React. Nếu bạn muốn nghiên cứu sâu từng phần ngay từ đầu, việc bắt đầu có thể rất khó khăn. Và tôi nghĩ rằng ngay cả những nhà phát triển front-end không quen thuộc với React cũng có thể tham gia khóa học. Và tôi nghĩ rằng bản thân việc quản lý ảnh có rất nhiều điểm chung bất kể ngôn ngữ/khung nào. Vì vậy, tôi nghĩ bạn có thể hiểu được bức tranh toàn cảnh thông qua lớp học này và điều chỉnh nó cho phù hợp với công nghệ của riêng bạn :)
H. Bạn có xử lý các tập tin như PDF và video không?
Bài giảng này tập trung vào hình ảnh. Tuy nhiên, việc tải lên các tập tin như PDF và video được quản lý rất giống với việc tải lên hình ảnh. Nói cách khác, có rất nhiều điểm chung. Tôi nghĩ sự khác biệt lớn nhất là cách tải và hiển thị. Bạn cũng có thể chỉ cần tải xuống tệp PDF hoặc video. Trong trường hợp video, cũng có những phương pháp để chạy chúng trên màn hình, như Inflearn. Lý do chúng tôi tập trung vào hình ảnh là vì chúng có thể có tác động tiêu cực rất lớn đến UIUX ngay cả trong giai đoạn đầu của một dịch vụ được sử dụng tương đối thường xuyên và có lưu lượng truy cập thấp.
H. Có chi phí AWS không?
Khi bạn thực sự triển khai một dịch vụ và có lưu lượng truy cập, chi phí sẽ tự nhiên phát sinh tùy thuộc vào lượng sử dụng. Tất nhiên, có thể sẽ phải trả phí ngay cả khi bạn sử dụng nó cho mục đích học tập. Nhưng ngay cả khi điều đó xảy ra thì cũng chỉ là một số tiền rất nhỏ. Bài giảng cũng sẽ đề cập đến khía cạnh chi phí. Và quan trọng nhất là khi bạn đăng ký AWS lần đầu, bạn sẽ được cấp tín dụng. Số tín chỉ này là quá đủ để tham gia khóa học. Tuy nhiên, xin lưu ý rằng bạn phải xóa mọi tài nguyên AWS mà bạn đã sử dụng sau khi hoàn thành khóa học! Nội dung này sẽ được trình bày ở cuối bài giảng.
Người chia sẻ kiến thức Bạn có tò mò về các bài giảng khác không?
I listened to the lecture well. There were some inconveniences while listening to the lecture, but I learned a lot nonetheless.
I didn't have any major problems listening to the lecture even though I didn't have any prior knowledge of MongoDB or NodeJS.
I think it would be a little helpful to find typos and other problems if the source code was provided.
I'm looking forward to the instructor's other lectures. I'll go buy the instructor's MongoDB lecture ^_^
I'm already excited to think about the project I'll create using the knowledge I learned through this lecture.
Wow, bi9choi, thank you so much for saying that!! I was also upset because there were many things I regretted, but I will work hard to make better lectures in the future!
I wanted to create a project using React + Node + MongoDB, and this was very helpful. It was easy to understand because it was divided into parts, and the introduction video at the beginning of each section was good for understanding the entire section! I also left questions and they answered them right away, so it was good for solving errors.
I've only listened to 1/3 of it, but
there's a lot of good content.
It's good to be able to try out the overall content, such as uploading images and logging in.
Of course, if you have some basic knowledge, you won't have any problems following the lecture content!
I think it would be a good experience if you listen to AWS Lambda and the latter half of the lecture.
I also took the MongoDB lecture, and since the process of building each one was easy to understand, I am learning this lecture while grasping the concepts up to the React part. The approach methodology and depth are really good. Thank you.
However, I think it would be good to edit about 5 seconds from 6:41 in the useState lecture in Section 2.