Backend Development 12 min read

How to Build a MinIO Object Storage Service with Docker, Spring Boot, and Vue

This article demonstrates step‑by‑step how to set up a high‑performance MinIO object storage service using Docker, configure it in a Spring Boot application, and integrate file upload functionality with a Vue/Element‑UI front‑end, including code snippets for Docker commands, Java client setup, and UI implementation.

Java Architect Essentials

Jun 8, 2023

How to Build a MinIO Object Storage Service with Docker, Spring Boot, and Vue

MinIO is a high‑performance, open‑source object storage server compatible with the Amazon S3 API, written in Go and released under the GNU AGPL v3 license.

The article first shows how to launch a single‑node MinIO instance with Docker on Linux/macOS and Windows, using environment variables MINIO_ROOT_USER and MINIO_ROOT_PASSWORD to set the access key and secret key.

docker run -p 9000:9000 \
  --name minio1 \
  -v /mnt/data:/data \
  -e "MINIO_ROOT_USER=AKIAIOSFODNN7EXAMPLE" \
  -e "MINIO_ROOT_PASSWORD=wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY" \
  minio/minio server /data

After starting the container, the MinIO web console is accessible at http://localhost:9000.

Next, the tutorial moves to a Spring Boot project. Required Maven dependencies include spring-boot-starter-thymeleaf, the MinIO Java client ( io.minio:minio:8.2.1), and Lombok.

<!-- thymeleaf template engine -->
<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!-- MinIO Java client -->
<dependency>
    <groupId>io.minio</groupId>
    <artifactId>minio</artifactId>
    <version>8.2.1</version>
</dependency>
<!-- Lombok -->
<dependency>
    <groupId>org.projectlombok</groupId>
    <artifactId>lombok</artifactId>
    <optional>true</optional>
</dependency>

The application.yml (or application.properties) is configured with MinIO connection details:

spring:
  minio:
    access-key: AKIAIOSFODNN7EXAMPLE
    secret-key: wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY
    url: http://localhost:9000
    bucket-name: wdhcr
  servlet:
    multipart:
      max-file-size: 10MB
      max-request-size: 10MB

A configuration class binds these properties and creates a MinioClient bean:

@Configuration
@ConfigurationProperties(prefix = "spring.minio")
@Data
public class MinioConfiguration {
    private String accessKey;
    private String secretKey;
    private String url;
    private String bucketName;

    @Bean
    public MinioClient minioClient() {
        return MinioClient.builder()
                .endpoint(url)
                .credentials(accessKey, secretKey)
                .build();
    }
}

The MinioComp component provides utility methods for generating upload policies, presigned URLs, uploading files, and retrieving file URLs, handling the various MinIO exceptions.

@Component
public class MinioComp {
    @Autowired
    private MinioClient minioClient;
    @Autowired
    private MinioConfiguration configuration;
    // Methods: getPolicy, getPolicyUrl, upload, getUrl (code omitted for brevity)
}

On the front‑end, a Vue.js page using Element‑UI demonstrates three upload approaches: traditional upload, direct form‑data upload with a signed policy, and direct URL upload. The page includes the necessary HTML, CSS, and JavaScript to call the Spring Boot endpoints, display the uploaded image, and handle errors.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <title>Upload Image</title>
</head>
<body>
    <div id="app">
        <!-- Vue/Element‑UI layout omitted for brevity -->
    </div>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() { return { imgUrl: '', directUrl: '', uploadUrl: '' }; },
            methods: {
                // uploadHandle, traditionPost, getpolicy, httpRequestHandle, getUploadUrl, axiosPost
            }
        })
    </script>
    <style>
        .div-center-class { padding: 28% 0; text-align: center; background: beige; }
    </style>
</body>
</html>

The article concludes with screenshots of the MinIO console and the Vue upload page, a link to the full source code repository, and a brief promotional note encouraging readers to join the author’s community.

Original Source

Signed-in readers can open the original source through BestHub's protected redirect.

Republication Notice

This article has been distilled and summarized from source material, then republished for learning and reference. If you believe it infringes your rights, please contactand we will review it promptly.

Docker Spring Boot Vue file upload Minio object storage

Written by

Java Architect Essentials

Committed to sharing quality articles and tutorials to help Java programmers progress from junior to mid-level to senior architect. We curate high-quality learning resources, interview questions, videos, and projects from across the internet to help you systematically improve your Java architecture skills. Follow and reply '1024' to get Java programming resources. Learn together, grow together.

0 followers

Reader feedback

How this landed with the community

Rate this article

Was this worth your time?

Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.