Thêm Plugin dịch vụ tệp vào Cửa hàng Medusa của bạn: Hướng dẫn cơ bản

Thương mại không đầu đã xuất hiện từ lâu với Medusa là một trong những công cụ tốt nhất để cung cấp các thành phần mô-đun. Kiến trúc có thể kết hợp của Medusa cho phép bạn xây dựng một cửa hàng với bất kỳ khung hoặc ngôn ngữ nào bạn chọn, do đó cung cấp khả năng tùy chỉnh đầy đủ. Medusa cũng cho phép bạn xây dựng trải nghiệm thương mại điện tử độc đáo bằng cách cung cấp một bộ công cụ và các khối xây dựng thiết yếu mà nhà phát triển có thể bổ sung để tạo trang web thương mại điện tử mạnh mẽ. Nó cung cấp các tính năng vượt trội như quản lý khách hàng, sản phẩm, vận chuyển, thuế và khu vực cũng như RMA Flow. Trong hướng dẫn hôm nay, bạn sẽ tìm hiểu cách thêm plugin dịch vụ tệp để có thể thêm sản phẩm vào cửa hàng Medusa của mình thông qua bảng điều khiển quản trị viên

Medusa là gì

Medusa là một bộ công cụ mã nguồn mở cho phép bạn xây dựng các trang web thương mại điện tử tuyệt vời và đáng tin cậy. Với hơn 17,8 nghìn sao và 1,3 nghìn lượt chia sẻ trên GitHub , giải pháp thương mại không đầu này đi kèm với một số mô-đun thương mại từ cơ bản đến nâng cao và được cung cấp miễn phí. Tài liệu được viết tốt của nó cũng góp phần vào sự thành công của nó vì có hướng dẫn từng bước về cách thêm mô-đun hoặc plugin. Một số plugin phổ biến trong số những plugin khác là plugin thanh toán, thông báo, tìm kiếm và dịch vụ tệp.

Plugin dịch vụ tệp là gì

Plugin dịch vụ tệp cho phép bạn lưu trữ các tệp như hình ảnh được sử dụng trong Medusa. Bạn có thể gặp sự cố nếu không sử dụng hoặc thiết lập dịch vụ tệp cho cửa hàng Medusa của mình đúng cách. Medusa cung cấp ba cách khác nhau để quản lý lưu trữ tệp; S3, MinIo và Spaces . Hướng dẫn này chỉ tập trung vào lưu trữ tệp S3 để lưu trữ hình ảnh và tệp được tải lên trong Medusa.

S3 hoặc Dịch vụ lưu trữ đơn giản là một bộ lưu trữ đối tượng được sử dụng để lưu trữ và truy xuất bất kỳ lượng dữ liệu nào từ bất kỳ đâu và bất kỳ lúc nào. Chúng tôi sẽ sử dụng Amazon S3 cho phần trình diễn này.

Cách tải tệp lên cửa hàng Medusa của bạn

Amazon giữ dữ liệu dưới dạng các đối tượng trong một nhóm. Một đối tượng bao gồm một tệp và dữ liệu tùy chọn mô tả nó. Để lưu trữ một tệp, bạn cần tải nó lên một thùng (Các thùng là nơi chứa các đối tượng), sau khi tải lên, bạn có thể đặt quyền cho đối tượng .

Bây giờ, hãy giúp bạn tải lên các tệp trong dự án Medusa của mình một cách nhanh chóng.

điều kiện tiên quyết

• Một cửa hàng Medusa . Một dự án Medusa về cơ bản được chia thành ba thành phần; mặt tiền cửa hàng, bảng điều khiển quản trị viên và Medusa Backend
• Tài khoản AWS

Nếu bạn đã thiết lập xong mọi thứ thì hãy làm theo các bước bên dưới để thêm Plugin dịch vụ tệp vào Cửa hàng Medusa của bạn.

Bước 1: Tạo Nhóm S3

Đăng nhập vào tài khoản AWS của bạn, tìm kiếm và chọn S3

Trong trang tiếp theo, nhấp vào Tạo nhóm

Trong cửa sổ mở ra, hãy cung cấp thông tin cần thiết để tạo nhóm của bạn.

Cấu hình chung

Cung cấp tên cho nhóm của bạn và để lại vùng mặc định hoặc chọn một vùng khác theo yêu cầu của bạn.

Quyền sở hữu đối tượng

Đối với quyền sở hữu, hãy cho phép tài khoản của bạn sở hữu các đối tượng trong bộ chứa.

Trong cài đặt Chặn truy cập công khai, bỏ chọn Chặn tất cả truy cập công khai. Thao tác này sẽ hiển thị thông báo cảnh báo, hãy chọn hộp kiểm trong thông báo như trong hình.

Đối với phiên bản nhóm, thẻ, mã hóa mặc định và cài đặt nâng cao, hãy để cài đặt mặc định hoặc thay đổi chúng theo yêu cầu dự án của bạn và nhấp vào Tạo nhóm .

Bước 2: Quản lý chính sách

Bước tiếp theo bao gồm quản lý các chính sách nhóm đã tạo của bạn. Chuyển đến trang trong nhóm của bạn và mở tab quyền. Sau đó cuộn xuống phần chính sách nhóm, nhấp vào chỉnh sửa, thêm mã bên dưới và Lưu.

 { "Version": "2012-10-17", "Id": "Policy1397632521960", "Statement": [ { "Sid": "Stmt1397633323327", "Effect": "Allow", "Principal": { "AWS": "*" }, "Action": "s3:GetObject", "Resource": "arn:aws:s3:::<YOUR_BUCKET_NAME>/*" } ] }

Thay thế <YOUR_BUCKET_NAME> bằng tên nhóm của bạn. Đây là medusastorebucket

Bước 3: Đính kèm chính sách

Trong tài khoản của bạn, điều hướng đến IAM và chọn Access Management->Policies ở menu bên trái.

Nếu đây là lần đầu tiên bạn chọn một chính sách, thì bạn sẽ thấy Trang Chào mừng bạn đến với Quản lý Chính sách và chọn bắt đầu, nếu không, hãy chọn Tạo chính sách.

Sau đó chọn tab JSON và thêm đoạn mã sau:

 { "Version": "2012-10-17", "Statement" : [ { "Effect" : "Allow", "Action" : [ "action-statement" ], "Resource" : [ "resource-statement" ] }, { "Effect" : "Allow", "Action" : [ "action-statement" ], "Resource" : [ "resource-statement" ] } ] }

Thay thế action-statement và resource-statement theo yêu cầu của bạn và nhấp vào Next:tag

Tìm hiểu thêm về Chính sách và quyền

Các thẻ là tùy chọn nên bạn có thể bỏ qua bước này và nhấp vào nút xem lại để xem lại chính sách của mình.

Tiếp theo, cung cấp tên và mô tả cho chính sách của bạn, sau đó nhấp vào Tạo chính sách

Bây giờ bạn đã tạo chính sách của mình, bạn cần đính kèm chính sách đó với một nhóm người dùng, điều hướng đến bảng điều khiển Amazon và chọn Nhóm người dùng . Chọn tên của nhóm rồi mở tab Quyền

Chọn Thêm quyền rồi đính kèm chính sách

Trong cửa sổ mở ra, hãy chọn chính sách bạn muốn đính kèm và nhấp vào thêm quyền ở cuối trang.

Bước 4: Nhận khóa truy cập của bạn

Bạn cần lấy khóa truy cập để tích hợp Plugin S3 vào dự án của mình. Bạn sẽ cần hai yếu tố; Access Key ID và Secret Access Key .

Để lấy ID khóa truy cập AWS và Khóa truy cập bí mật, hãy đi tới bảng điều khiển Amazon của bạn trên điều hướng bên trái và chọn Người dùng.

Chọn tên người dùng IAM của bạn và mở tab Thông tin đăng nhập bảo mật

Cuộn xuống Khóa truy cập và nhấp vào Tạo khóa truy cập

Trong cửa sổ tiếp theo, bạn sẽ được yêu cầu chọn nơi bạn muốn sử dụng khóa truy cập. Kiểm tra Mã cục bộ nếu bạn đang làm việc trong môi trường nhà phát triển cục bộ.

Bằng cách chọn cục bộ, một thông báo cảnh báo sẽ xuất hiện hỏi bạn xem bạn có hiểu khuyến nghị không. Chọn hộp và nhấp vào nút tiếp theo.

Cuối cùng, thêm mô tả thẻ nếu bạn muốn thêm và nhấp vào Tạo khóa truy cập

Trong cửa sổ tiếp theo, bạn sẽ thấy Access và Secret Access key của mình. Vui lòng sao chép và dán nó vào đâu đó trên PC của bạn vì bạn sẽ sử dụng nó trong bước tiếp theo hoặc tải xuống tệp CSV.

Bước 5: Cài đặt Plugin S3

Bây giờ bạn đã thiết lập bộ chứa và tạo các khóa truy cập, đã đến lúc cài đặt plugin S3. Để làm như vậy, hãy vào thư mục phụ trợ Medusa của bạn và cài đặt nó bằng lệnh sau:

 yarn add medusa-file-s3

Hoặc

 npm install medusa-file-s3

Sau đó mở tệp .env của bạn và thêm vào như sau

 S3_URL=<YOUR_BUCKET_URL> S3_BUCKET=<YOUR_BUCKET_NAME> S3_REGION=<YOUR_BUCKET_REGION> S3_ACCESS_KEY_ID=<YOUR_ACCESS_KEY_ID> S3_SECRET_ACCESS_KEY=<YOUR_SECRET_ACCESS_KEY>

Ở đâu

• <YOUR_BUCKET_URL> là URL nhóm của bạn. Nó ở dạng https://<BUCKET_NAME>.s3.<REGION>.amazonaws.com . Trong đó <BUCKET_NAME> là tên nhóm của bạn, <REGION> là khu vực.
• <YOUR_BUCKET_NAME> là tên của nhóm được tạo
• <YOUR_BUCKET_REGION> vùng trong nhóm của bạn
• <YOUR_ACCESS_KEY_ID> là Khóa truy cập của bạn
• <YOUR_SECRET_ACCESS_KEY> là Khóa bí mật của bạn

Cuối cùng, trong medusa-config.js của bạn, hãy thêm đoạn mã sau:

 const plugins = [ // ... { resolve: `medusa-file-s3`, options: { s3_url: process.env.S3_URL, bucket: process.env.S3_BUCKET, region: process.env.S3_REGION, access_key_id: process.env.S3_ACCESS_KEY_ID, secret_access_key: process.env.S3_SECRET_ACCESS_KEY, }, }, ]

Lưu ý rằng nếu bạn đã định cấu hình nhiều plugin lưu trữ, thì plugin cuối cùng được khai báo sẽ được sử dụng. Vì vậy, nếu bạn muốn sử dụng S3, hãy đảm bảo rằng đó là plugin lưu trữ cuối cùng được thêm vào.

Bước 6: Kiểm tra plugin

Bây giờ bạn đã thêm thành công plugin của mình. Đã đến lúc kiểm tra để đảm bảo rằng mọi thứ đều ở đúng vị trí. Bạn có thể sử dụng API REST hoặc Quản trị viên Medusa để kiểm tra.

Điều hướng đến các thư mục quản trị và phụ trợ của bạn tương ứng và chạy lệnh sau:

 // admin yarn run start

 // backend yarn run start

Email và mật khẩu quản trị viên mặc định lần lượt là [email protected] và supersecret . Mở bảng quản trị của bạn với http://localhost:7000/

Trong menu, nhấp vào Sản phẩm rồi Thêm sản phẩm . Cung cấp chi tiết cho sản phẩm của bạn và xuất bản nó.

Cuối cùng, bạn cần thêm cấu hình trong mặt tiền cửa hàng của mình để thêm tên miền bộ chứa S3 vào tên miền của hình ảnh được định cấu hình nếu bạn đang sử dụng mặt tiền cửa hàng NextJS . Nếu bạn không làm điều đó, bạn sẽ nhận được lỗi sau next/image Un-configured Host .

Vì vậy, trong next.config.js của bạn, hãy thêm vào như sau:

 const { withStoreConfig } = require("./store-config")

 // ...module.exports = withStoreConfig({ // ... images: { domains: [ // ... "<BUCKET_NAME>.s3.amazonaws.com", ], }, })

<BUCKET_NAME> đại diện cho tên nhóm của bạn.

Chạy mặt tiền cửa hàng của bạn với yarn run dev để kiểm tra xem các sản phẩm mới bạn đã thêm có ở đó hay không và chuyển sang giai đoạn tiếp theo của dự án.

Phần kết luận

Điều này đánh dấu sự kết thúc của hướng dẫn này, hy vọng rằng bạn có thể thêm plugin dịch vụ tệp vào cửa hàng Medusa của mình. Để tận dụng tối đa công cụ, hãy xem xét thêm các dịch vụ thanh toán, dịch vụ tìm kiếm và thông báo.