* initialized next.js project * finished markdown sections * added operation schema component * change page metadata * eslint fixes * fixes related to deployment * added response schema * resolve max stack issue * support for different property types * added support for property types * added loading for components * added more loading * type fixes * added oneOf type * removed console * fix replace with push * refactored everything * use static content for description * fixes and improvements * added code examples section * fix path name * optimizations * fixed tag navigation * add support for admin and store references * general enhancements * optimizations and fixes * fixes and enhancements * added search bar * loading enhancements * added loading * added code blocks * added margin top * add empty response text * fixed oneOf parameters * added path and query parameters * general fixes * added base path env variable * small fix for arrays * enhancements * design enhancements * general enhancements * fix isRequired * added enum values * enhancements * general fixes * general fixes * changed oas generation script * additions to the introduction section * added copy button for code + other enhancements * fix response code block * fix metadata * formatted store introduction * move sidebar logic to Tags component * added test env variables * fix code block bug * added loading animation * added expand param + loading * enhance operation loading * made responsive + improvements * added loading provider * fixed loading * adjustments for small devices * added sidebar label for endpoints * added feedback component * fixed analytics * general fixes * listen to scroll for other headings * added sample env file * update api ref files + support new fields * fix for external docs link * added new sections * fix last item in sidebar not showing * move docs content to www/docs * change redirect url * revert change * resolve build errors * configure rewrites * changed to environment variable url * revert changing environment variable name * add environment variable for API path * fix links * fix tailwind settings * remove vercel file * reconfigured api route * move api page under api * fix page metadata * fix external link in navigation bar * update api spec * updated api specs * fixed google lint error * add max-height on request samples * add padding before loading * fix for one of name * fix undefined types * general fixes * remove response schema example * redesigned navigation bar * redesigned sidebar * fixed up paddings * added feedback component + report issue * fixed up typography, padding, and general styling * redesigned code blocks * optimization * added error timeout * fixes * added indexing with algolia + fixes * fix errors with algolia script * redesign operation sections * fix heading scroll * design fixes * fix padding * fix padding + scroll issues * fix scroll issues * improve scroll performance * fixes for safari * optimization and fixes * fixes to docs + details animation * padding fixes for code block * added tab animation * fixed incorrect link * added selection styling * fix lint errors * redesigned details component * added detailed feedback form * api reference fixes * fix tabs * upgrade + fixes * updated documentation links * optimizations to sidebar items * fix spacing in sidebar item * optimizations and fixes * fix endpoint path styling * remove margin * final fixes * change margin on small devices * generated OAS * fixes for mobile * added feedback modal * optimize dark mode button * fixed color mode useeffect * minimize dom size * use new style system * radius and spacing design system * design fixes * fix eslint errors * added meta files * change cron schedule * fix docusaurus configurations * added operating system to feedback data * change content directory name * fixes to contribution guidelines * revert renaming content * added api-reference to documentation workflow * fixes for search * added dark mode + fixes * oas fixes * handle bugs * added code examples for clients * changed tooltip text * change authentication to card * change page title based on selected section * redesigned mobile navbar * fix icon colors * fix key colors * fix medusa-js installation command * change external regex in algolia * change changeset * fix padding on mobile * fix hydration error * update depedencies
7.4 KiB
description, addHowToData
| description | addHowToData |
|---|---|
| Learn how to integrate MinIO with the Medusa backend. Learn how to install the MinIO plugin on the Medusa backend and configure it. | true |
MinIO
This document will guide you through installing the MinIO file service plugin on your Medusa backend.
Overview
To upload and manage file assets in Medusa, you need a file service plugin responsible for hosting the files. Without a file service plugin, you will face issues while working with Medusa, such as when uploading images for products.
Medusa provides three different options to handle your file storage. This document will focus on setting up MinIO on your local machine and connecting Medusa to it.
Prerequisites
A Medusa backend is required to be set up before following along with this document. You can follow the quickstart guide to get started in minutes.
Set up MinIO
You can follow MinIO’s guide to install it on your machine based on your operating system.
After installing it, make sure MinIO is always running when your Medusa backend is running. It’s recommended that you set up an alias to quickly start the MinIO backend as instructed at the end of the installation guides in MinIO.
Change MinIO port
In MinIO’s documentation, port 9000 is used for the address of the MinIO backend. However, this collides with the port for the Medusa backend. You must change the port for MinIO to another one (for example, port 9001).
After setting up and installing MinIO on your system/sub-system, you can run the following command to change MinIO port to 9001 (or any other available port) instead of 9000 to avoid the port clash:
minio server ~/minio --console-address :9090 --address :9001
Create a MinIO bucket
After installing MinIO and logging into the Console, you can create a bucket that will store the files of your Medusa backend by following these steps:
- Go to the Buckets page from the sidebar.
- Click on the “Create Bucket” button.
- For the Bucket Name field, enter a name for the bucket. By MinIO’s requirement, the name can only consist of lower case characters, numbers, dots (
.), and hyphens (-). - Click on the Create Bucket button.
- On the bucket's page, click on the edit icon next to Access Policy.
- In the pop-up that opens, change the selected value to “public” and click Set.
:::warning
Changing the Access Policy to public will allow anyone to access your bucket. Avoid storing sensitive data in the bucket.
:::
Generate Access Keys
To generate access keys for your plugin:
- From the sidebar of your MinIO console, click on Access Keys
- Click on the "Create access key" button
- This will open a new form with randomly-generated keys. Click on the Create button.
- A pop-up will then show the value for your Access Key and Secret Key. Copy them to use in the next section.
:::caution
You will not be able to access the Secret Key after closing the pop-up. So, make sure to store it somewhere to use later when configuring the plugin.
:::
Plugin Installation
In the directory of your Medusa backend, run the following command to install the MinIO plugin:
npm install medusa-file-minio
Then, add the following environment variables in .env:
MINIO_ENDPOINT=<ENDPOINT>
MINIO_BUCKET=<BUCKET>
MINIO_ACCESS_KEY=<ACCESS_KEY>
MINIO_SECRET_KEY=<SECRET_KEY>
Where <ENDPOINT> is the URL of your MinIO backend, <BUCKET> is the name of the bucket you created earlier, and <ACCESS_KEY> and <SECRET_KEY> are the keys you generated in the previous section.
Finally, configure your medusa-config.js to include the plugin with the required options:
const plugins = [
// ...
{
resolve: `medusa-file-minio`,
options: {
endpoint: process.env.MINIO_ENDPOINT,
bucket: process.env.MINIO_BUCKET,
access_key_id: process.env.MINIO_ACCESS_KEY,
secret_access_key: process.env.MINIO_SECRET_KEY,
},
},
]
:::caution
If you have multiple storage plugins configured, the last plugin declared in the medusa-config.js file will be used.
:::
Test it Out
Run your Medusa backend alongside the Medusa Admin to try out your new file service. Upon editing or creating products, you can now upload thumbnails and images, that are stored in a MinIO backend.
Private Buckets
Handle Exports
Medusa provides export functionalities including exporting products and orders. For exports to work, you must set up a private bucket.
Handle Imports
Medusa provides import functionalities including importing products. For imports to work, you must set the private bucket to be the same as the public bucket.
Create Private Bucket
To create a private bucket, follow along the steps mentioned earlier, but keep Access Policy set to private.
Add Private Bucket Environment Variable
Add the following environment variable on your Medusa backend:
MINIO_PRIVATE_BUCKET=exports
Then, add a new option to the plugin’s options in medusa-config.js:
const plugins = [
// ...
{
resolve: `medusa-file-minio`,
options: {
// ...
private_bucket: process.env.MINIO_PRIVATE_BUCKET,
},
},
]
Use Different Secret and Access Keys
If you only add the private_bucket option, the same secret and access keys that you used for the public bucket will be used to access the private bucket.
If you want to use different keys, set the following environment variables:
MINIO_PRIVATE_ACCESS_KEY=<YOUR_PRIVATE_ACCESS_KEY>
MINIO_PRIVATE_SECRET_KEY=<YOUR_PRIVATE_SECRET_KEY>
Where <YOUR_PRIVATE_ACCESS_KEY> and <YOUR_PRIVATE_SECRET_KEY> are the access key and secret access key that have access to the private MinIO bucket.
Then, add two new options to the plugin’s options in medusa-config.js:
const plugins = [
// ...
{
resolve: `medusa-file-minio`,
options: {
// ...
private_access_key_id:
process.env.MINIO_PRIVATE_ACCESS_KEY,
private_secret_access_key:
process.env.MINIO_PRIVATE_SECRET_KEY,
},
},
]
Next.js Starter Template Configuration
If you’re using a Next.js Starter Template, you need to add an additional configuration that adds the MinIO domain name into the configured images domain names. This is because all URLs of product images will be from the MinIO backend.
If this configuration is not added, you’ll receive the error "next/image Un-configured Host”.
In next.config.js add the following option in the exported object:
const { withStoreConfig } = require("./store-config")
// ...
module.exports = withStoreConfig({
// ...
images: {
domains: [
// ...
"127.0.0.1",
],
},
})
Where 127.0.0.1 is the domain of your local MinIO backend.
See Also
- Check out more plugins you can add to your store.
