Adding MinIO storage to existing project launched prior to 21-11-2024

[rpuls]

Long story short, before 21st November 2024 and some weeks backwards, there has been issue with the implementation of the media storage. Therefore, I implemented a more production ready storage system, using a external MinIO bucket instead of @local-file

If you have an older project launched with this template, and you want to add the MinIO storage, follow this guide.

Backend

1. Add the minio storage module
Add backend directory: backend/src/modules/minio-file
Add all the files and their content from: https://github.com/rpuls/medusajs-2.0-for-railway-boilerplate/tree/master/backend/src/modules/minio-file

2. Add the medusa configuration
Replace existing file module with:

    {
      key: Modules.FILE,
      resolve: '@medusajs/file',
      options: {
        providers: [
          ...(MINIO_ENDPOINT && MINIO_ACCESS_KEY && MINIO_SECRET_KEY ? [{
            resolve: './src/modules/minio-file',
            id: 'minio',
            options: {
              endPoint: MINIO_ENDPOINT,
              accessKey: MINIO_ACCESS_KEY,
              secretKey: MINIO_SECRET_KEY,
              bucket: MINIO_BUCKET // Optional, default: medusa-media
            }
          }] : [{
            resolve: '@medusajs/file-local',
            id: 'local',
            options: {
              upload_dir: 'static',
              backend_url: `${BACKEND_URL}/static`
            }
          }])
        ]
      }
    }

3. Install required /bacend dependencies
Add the following two dependencies to backend/package.json

"minio": "^8.0.2", and "ulid": "^2.3.0"
Your dependencies shuold look like this:

  "dependencies": {
    "@medusajs/admin-sdk": "latest",
    "@medusajs/cli": "latest",
    "@medusajs/core-flows": "latest",
    "@medusajs/framework": "latest",
    "@medusajs/medusa": "latest",
    "@medusajs/notification-sendgrid": "latest",
    "@medusajs/payment-stripe": "latest",
    "@medusajs/types": "latest",
    "@medusajs/utils": "latest",
    "@medusajs/workflow-engine-redis": "latest",
    "@mikro-orm/core": "5.9.7",
    "@mikro-orm/knex": "5.9.7",
    "@mikro-orm/migrations": "5.9.7",
    "@mikro-orm/postgresql": "5.9.7",
    "@react-email/components": "^0.0.26",
    "awilix": "^8.0.1",
    "express": "^4.21.1",
    "medusajs-launch-utils": "^0.0.5",
    "minio": "^8.0.2",
    "pg": "^8.13.0",
    "resend": "4.0.1",
    "ulid": "^2.3.0"
  },

Replace /backend/pnpm-lock.yaml with the content of https://github.com/rpuls/medusajs-2.0-for-railway-boilerplate/blob/master/backend/pnpm-lock.yaml to ensure exact dependency versions.

4. Add the MinIO services in Railway
We are aiming for this layout:

First Click "add new" choose "Docker Image", search of: minio/minio:latest

Once it added, change variables:

PORT="${{MINIO_PRIVATE_PORT}}"
MINIO_ROOT_USER="${{ secret(14) }}"
MINIO_PUBLIC_HOST="${{RAILWAY_PUBLIC_DOMAIN}}"
MINIO_PUBLIC_PORT="443"
MINIO_PRIVATE_HOST="${{RAILWAY_PRIVATE_DOMAIN}}"
MINIO_PRIVATE_PORT="9000"
MINIO_ROOT_PASSWORD="${{ secret(32) }}"
MINIO_PUBLIC_ENDPOINT="https://${{MINIO_PUBLIC_HOST}}:${{MINIO_PUBLIC_PORT}}"
MINIO_PRIVATE_ENDPOINT="http://${{MINIO_PRIVATE_HOST}}:${{MINIO_PRIVATE_PORT}}"
MINIO_BROWSER_REDIRECT_URL="https://${{Console.RAILWAY_PUBLIC_DOMAIN}}"

Change name of service to Bucket
Then go to settings and modify the start command: /bin/sh -c "exec minio server --address [::]:$MINIO_PRIVATE_PORT $RAILWAY_VOLUME_MOUNT_PATH"
Modify health check path: /minio/health/ready
Make sure Networking is set to HTTP

Once finished, it should look like this:

Finally, left click on the Bucket container on the cavas and attach a storage volume. Set the mount path to /data
Under the service should appear a little disk icon followed by /data - (see first image of the layout)

5. Update Backend variables:
Add the following:

MINIO_ACCESS_KEY="${{Bucket.MINIO_ROOT_USER}}"
MINIO_SECRET_KEY="${{Bucket.MINIO_ROOT_PASSWORD}}"

Now you should see an arrow from the backend Container pointing to the Bucket container.

storefront

1. add Bucket URL to next image remote path

      ...(process.env.NEXT_PUBLIC_MINIO_ENDPOINT ? [{
        protocol: "https",
        hostname: process.env.NEXT_PUBLIC_MINIO_ENDPOINT,
      }] : []),

Verify that it looks identical to: https://github.com/rpuls/medusajs-2.0-for-railway-boilerplate/blob/master/storefront/next.config.js

2. Add Bucket url to Railway storefront service variables:
NEXT_PUBLIC_MINIO_ENDPOINT="${{Bucket.MINIO_PUBLIC_HOST}}"
Once this is added, you shuold see an arrow from the storefront container pointing to the Bucket container

Optionally, add Bucket console (web interface for your bucket media)

1. Add service
In Railway, once again click "add new", this time choose "github repo"
Enter git url: https://github.com/railwayapp-templates/minio-console

2. Add variables

PORT="9090"
PASSWORD="${{Bucket.MINIO_ROOT_PASSWORD}}"
USERNAME="${{Bucket.MINIO_ROOT_USER}}"
CONSOLE_MINIO_SERVER="${{Bucket.MINIO_PRIVATE_ENDPOINT}}"

Once these are set, you should see the final arrow, from the Console container to the Bucker container

3. configure settings
Make sure Networking it is set to HTTP
Change name to Console
Change start command to: /bin/sh -c "exec console server --host 0.0.0.0 --port $PORT"
Change healthcheck endpoint to: /login

Apply changes

Click deploy changes in Railway
Push Git changes

[Tyerlo]

I had some problems finding the bucket on local environment, but I added domains inside next.config.js

images: {
domains: [
<YOUR_BUCKET_DOMAIN>
],
}