Deploy a Full-Stack Captcha Recognition System: From Vue Frontend to Python AI Model

Introduction

Hello everyone, I'm Snowball. This article reviews the deployment methods for a practical captcha labeling and recognition project, summarizing the Vue front‑end, Java back‑end, and Python model deployment steps that were described in earlier tutorial posts.

2. Vue Frontend Deployment

The Vue front‑end can be built and packaged with the following command, then uploaded to the server and served via Nginx.

# Build package
npm run build:prod
# Upload to server (omitted)
# Nginx configuration
upstream mark_service {
  server localhost:8088;
}
server {
  listen 8084;
  listen [::]:8084;
  server_name _;
  location / {
    root /app/mark_data_service/webui/;
    index index.html index.htm;
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Methods' 'GET';
  }
  location /api/ {
    proxy_pass http://mark_service/;
    proxy_set_header Host $host;
  }
  error_page 500 502 503 504 /50x.html;
  location = /50x.html { root html; }
}

Frontend static files are served from the directory shown below.

3. Java Backend Deployment

The Java back‑end is packaged with Maven, the resulting JAR is copied to the server, and required services such as JDK, MySQL, and Redis are installed before starting the application.

# Package
maven clean install package
# Copy JAR to server (omitted)
# Deploy JDK/MySQL/Redis (omitted)
# Start application
nohup java -jar xxx.jar &
# View startup logs
tail -f nohup.out

Backend files are stored in the directory illustrated below.

4. Python Model Deployment

The CNN model is served with a Flask web application. After copying the Python scripts and the CPU‑compatible model to the server, install dependencies (avoid pip cache to prevent MemoryError), and start the service.

# Copy Python files and model to server (omitted)
# Export dependencies and install (omitted)
# Note: use "pip --no-cache-dir install" to avoid MemoryError with PyTorch
# Start service
nohup python3 net_flask.py &
# View startup logs
tail -f nohup.out

Flask web app startup logs are shown below.

Conclusion

The deployment uses relatively straightforward technologies: a Vue front‑end, a Java Spring‑like back‑end, and a simple Flask service for the CNN model. While the model is basic, the project demonstrates how to integrate data annotation, model training, and serving in a single pipeline, highlighting the importance of solid fundamentals in AI and full‑stack development.