강의

멘토링

로드맵

Inflearn brand logo image
BEST
Programming

/

Full-stack

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 :)

(4.5) 50 đánh giá

652 học viên

  • sihoon
Lambda
Node.js
React
MongoDB
AWS

Đánh giá từ những học viên đầu tiên

Dịch cái này sang tiếng Việt

  • AWS S3, CloudFront, presignedUrl

  • Tái tạo kích thước hình ảnh & AWS Lambda

  • Infinite Scroll sử dụng IntersectionObserver

  • Xác thực & Ủy quyền dựa trên phiên

  • Node.js, Express

  • Phản ứng, Phản ứng Hooks

  • MongoDB

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ị.

node.js(노드), mongodb(몽고db), react(리액트), amazon web services(아마존 웹 서비스)


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.

Backend + Frontend + Infra = Fullstack

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?

Khuyến nghị cho
những người này

Khóa học này dành cho ai?

  • 이미지를 사용하여 웹 hoặc ứng dụng di động muốn phát triển

  • Dành cho những ai muốn trải nghiệm phát triển full-stack một cách nhẹ nhàng

  • Bạn muốn sử dụng AWS Cloud

  • Dành cho những ai muốn quản lý đúng các tập tin như hình ảnh

Cần biết trước khi bắt đầu?

  • (Khuyến nghị) Cú pháp Javascript cơ bản

Xin chào
Đây là

2,686

Học viên

182

Đánh giá

261

Trả lời

4.7

Xếp hạng

3

Các khóa học

현재 공동창업한 작은 스타트업 Ninjalerts에서 CTO역할로 일하고 있습니다. Ninjalerts는 이더리움 블록체인 데이터를 기반으로 NFT 거래 정보들을 실시간으로 알려주는 서비스에요!

전에 만나씨이에이에서 개발 팀장으로 있었어요. 시작은 기획자였는데 개발자가 부족한 탓에 외주를 맡기려다가 직접 개발할 기회가 생기면서 운 좋게 개발자로 전향했어요. 이후 자사몰을 자체 개발하면서 이커머스 개발팀장을 맡았어요.

온라인에 나온 다양한 좋은 자료들 덕분에 빠르게 성장할 수 있었어요. 제 노하우가 여러분들에게도 도움이 되길 바랍니다 :) Linkedin 프로필

Chương trình giảng dạy

Tất cả

93 bài giảng ∙ (14giờ 12phút)

Ngày đăng: 
Cập nhật lần cuối: 

Đánh giá

Tất cả

50 đánh giá

4.5

50 đánh giá

  • bi9choi4514님의 프로필 이미지
    bi9choi4514

    Đánh giá 3

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    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.

    • sihoon
      Giảng viên

      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!

  • k989908108480님의 프로필 이미지
    k989908108480

    Đánh giá 4

    Đánh giá trung bình 5.0

    5

    100% đã tham gia

    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.

    • seungwoo님의 프로필 이미지
      seungwoo

      Đánh giá 5

      Đánh giá trung bình 5.0

      5

      92% đã tham gia

      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.

      • mydufao9962님의 프로필 이미지
        mydufao9962

        Đánh giá 6

        Đánh giá trung bình 5.0

        5

        44% đã tham gia

        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.

        • sihoon
          Giảng viên

          Hello, Youth Stone :) Thank you for your good feedback! I will check the video and take action!

      • holali님의 프로필 이미지
        holali

        Đánh giá 16

        Đánh giá trung bình 4.8

        Đã chỉnh sửa

        3

        100% đã tham gia

        I'm listening well! Although you're conducting the lecture in js, I'm learning a lot by trying various things like converting to ts!

        Ưu đãi có thời hạn

        45 ₫

        24%

        1.614.287 ₫

        Khóa học khác của sihoon

        Hãy khám phá các khóa học khác của giảng viên!

        Khóa học tương tự

        Khám phá các khóa học khác trong cùng lĩnh vực!