spring-cloud-base

To run the project manually, follow these steps:

1. Prerequisites

Ensure you have the following installed:

• JDK 8, Maven, Node.js
• MySQL, Redis, Consul, RabbitMQ

2. Setup Steps

1. Clone the repository: git clone https://github.com/fp2952/spring-cloud-base.git
2. Initialize Database: Run the main-data/schema.sql file in your MySQL instance.
3. Configure Environment: Update the configuration files in config-git/src/main/resource/config (specifically database, Redis, and RabbitMQ connection strings).
4. Start Consul: Run consul agent -dev. Access the UI at http://localhost:8500.
5. Start Infrastructure: Start Redis and RabbitMQ.
6. Start Microservices (Follow this specific order):
   • Config Server: config-git/ConfigServerApplication.main (Must start first).
   • Authorization Center: auth-center/auth-center-provider/AuthCenterProviderApplication.main.
   • API Gateway: api-gateway/ApiGatewayApplication.main.
   • Basic Data Module: main-data/main-data-provider/MainDataApplication.main. (Note: Gateway and Basic Data modules depend on the Authorization Center's JWT/key-uri point).

3. Start Frontend

1. Navigate to the web app: cd web-app
2. Install dependencies: npm install
3. Run the project: npm dev run
4. Important: Update the backend API address in /static/config.js under window.serverconf.development.

# Clone
git clone https://github.com/fp2952/spring-cloud-base.git

# Frontend setup
cd web-app
npm install
npm dev run

You can deploy the entire stack using Docker and docker-compose.

1. Build Images

First, use Maven to build the backend services using the docker-maven-plugin:

# Build backend services (auth-center-provider, main-data-provider, api-gateway)
mvn clean
mvn package docker:build

Then, build the frontend Node.js application image:

cd /spring-cloud-base/web-app
docker build -t node-app .

2. Configure docker-compose.yml

Update the node-app section in docker-compose.yml with your host IP and the correct ports. The BASE_URL should be the Host IP and the port mapped to the container for OAuth2 redirects.

3. Run

cd /spring-cloud-base/docker-compose
docker-compose up [-d]

# Build backend
mvn clean
mvn package docker:build

# Build frontend
cd /spring-cloud-base/web-app
docker build -t node-app .

# Run stack
cd /spring-cloud-base/docker-compose
docker-compose up -d

The project provides a docker-compose.yml file to orchestrate the entire microservices stack, including service discovery (Consul), authentication (auth-center), API Gateway, data services, and a Node.js frontend application.

Service Overview

• consul: Service discovery and configuration.
• auth-center: The authorization center provider.
• api-gateway: The entry point for backend API calls.
• main-data: The primary data provider service.
• mysql: Relational database.
• redis: In-memory data store.
• node-app: The frontend/client application.

Port Mapping Summary

docker-compose up

The application is initialized by mounting a new Vue instance to the #app element. The setup process involves registering several core plugins and configuration modules:

1. ElementUI: Integrated with a custom i18n translation function for component messages.
2. Auth Client: The Auth plugin is registered using Vue.use(Auth, router), which links authentication logic to the Vue Router.
3. Config: The Config module is initialized via Config.init(Vue) to make configuration available globally.
4. Core Modules: The instance uses router, store (Vuex), and i18n (Internationalization) plugins.

Ensure that the #app element exists in your HTML template before the application mounts.

import Vue from 'vue'
import App from './App'
import router from './router'
import Auth from './plugin/auth-client'
import store from './store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import i18n from './plugin/i18n'
import Config from './config/config'
import '@/assets/fonts/iconfont.css'

Vue.config.productionTip = false

Vue.use(ElementUI, {
  i18n: (key, value) => i18n.t(key, value)
})
Vue.use(Auth, router)
Config.init(Vue)

new Vue({
  el: '#app',
  router,
  store,
  i18n,
  components: { App },
  template: '<App/>'
})

The build object defines how the application is compiled for production. Key options include:

• assetsRoot: The output directory for the build (default: ../dist).
• assetsSubDirectory: The directory for static assets (default: 'static').
• assetsPublicPath: The base path for assets (default: '/').
• productionSourceMap: Whether to generate source maps for production.
• devtool: The production source map type (default: '#source-map').
• productionGzip: Enables Gzip compression (requires compression-webpack-plugin).
• productionGzipExtensions: File extensions to compress (default: ['js', 'css']).
• bundleAnalyzerReport: Enables the bundle analyzer report if triggered via CLI.

build: {
  index: path.resolve(__dirname, '../dist/index.html'),
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  productionSourceMap: true,
  devtool: '#source-map',
  productionGzip: false,
  productionGzipExtensions: ['js', 'css'],
  bundleAnalyzerReport: process.env.npm_config_report
}

The dev object in the configuration file controls the behavior of the local development server. Key options include:

• assetsSubDirectory: The directory for static assets (default: 'static').
• assetsPublicPath: The base path for assets (default: '/').
• host: The host address for the dev server (default: 'localhost').
• port: The port for the dev server (default: 8080).
• autoOpenBrowser: Whether to automatically open the browser on startup.
• useEslint: Enables linting during bundling.
• devtool: Controls source map generation (default: 'cheap-module-eval-source-map').
• cacheBusting: Helps with debugging Vue files in devtools.

dev: {
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  proxyTable: {
    '/api': {
      target: 'http://127.0.0.1:18000',
      changeOrigin: true
    }
  },
  host: 'localhost',
  port: 8080,
  autoOpenBrowser: false,
  errorOverlay: true,
  notifyOnErrors: true,
  poll: false,
  useEslint: true,
  showEslintErrorsInOverlay: false,
  devtool: 'cheap-module-eval-source-map',
  cacheBusting: true,
  cssSourceMap: true
}