Quick start

# pull code
git clone [email protected]:fmfe/vue-genesis-micro.git
Enter the project directory
cd vue-genesis-micro
# install dependencies
npm install
# Start the development environment
npm run dev
Package production environment code
npm run build
# Production environment run
npm run start
Copy the code

What are microservices?

Microservices is an emerging software architecture that splits a large single application and service into dozens of supporting microservices.

Why microservices?

Along with the development of the business, project size bigger and bigger, to compile packaging, merge the code conflict has brought the huge challenge, and the service of the split get faster compilation packaged, deployed independently, incremental updating and different team only needs to be responsible for their own services, better support, in a large project, using micro service architecture can gain great benefits.

The difference between microservices and microfrontend

At present, the community’s micro front-end solutions are basically based on the idea of aggregation on the client side, but this project is completely based on the concept of back-end micro services and was born, page aggregation can be completed on the server side, or on the client side, everything depends on the demand.

Project introduction

This project is based on Vue Genesis development, one compiled three examples:

  • ssr-commonCommon page navigation
  • ssr-homeHome page
  • ssr-aboutAbout us

    After completing this project, you will be able to build your own microservices architecture and learn more about itRemote componentsHow it works. At this point, you can break down the microservices of a large application.

About the Genesis

Genesis is an update to FOLLOWME5.0 that addresses many of the weaknesses of the previous architecture, such as:

  • Common component library updates, resulting in more than a dozen projects compiling and releasing updates simultaneously
  • To switch between pages, the whole page must be refreshed
  • If hundreds of pages are all written to a large project for SSR rendering, as long as a BUG occurs in one place, the whole service may be suspended or unstable, and it is more difficult to troubleshoot the problem of memory leakage
  • A large number of projects are cSR-based rendering, which makes it difficult to internationalize the titles, keywords, and descriptions of index.html pages in terms of internationalization and SEO
  • Different teams, cross-development of a project, merge code, it is easy to produce a variety of conflicts, service separation, greatly reduce code conflicts

Rendering interface

After the separation of services, then the calls between services are essential, and a rendering interface concept is proposed here, which might look something like this

// You may need to do Nginx reverse proxy to do the following interface
// / API/SSR - service name /render? Url = Render address &mode= Render mode &routerMode= Route mode
const renderModes = ['ssr-html'.'ssr-json'.'csr-html'.'csr-json'];
/** * provides an API to allow external rendering */
app.use('/api/render'.(req, res, next) = > {
    // Get the render address
    const url = decodeURIComponent(String(req.query.renderUrl));
    // Get the mode of route rendering
    const routerMode =
        ['abstract'.'history'].indexOf(String(req.query.routerMode)) > - 1
            ? req.query.routerMode
            : 'history';
    // Render by default
    const mode: any =
        renderModes.indexOf(String(req.query.renderMode)) > - 1
            ? String(req.query.renderMode)
            : 'ssr-json';

    renderer
        .render({
            url,
            mode,
            state: {
                routerMode
            }
        })
        .then((r) = > {
            res.send(r.data);
        })
        .catch(next);
});
Copy the code

In this way, third party services can call the render results of the service at will, passing the render where it needs to be rendered, such as Vue, React, or other EJS template engines, etc. This project will use the render interface to pass to remote components for rendering.

Remote components

When you need to call a page render of another service, you ask the render interface, get the render result, and pass it to the remote component, which takes care of rendering the content of that service for you.

<template> <div> <remote-view v-for="name in names" v-show="ssrname === name" :key="name" :clientFetch="() => clientFetch(name)" :serverFetch="() => serverFetch(name)" ></remote-view> </div> </template> <script lang="ts"> import Vue from 'vue'; import { RemoteView } from '@fmfe/genesis-remote'; import axios from 'axios'; interface Data { names: string[]; } interface Methods { clientFetch: (ssrname: string) => Promise<void>; serverFetch: (ssrname: string) => Promise<void>; } interface Computed { ssrname: string; } export default Vue.extend<Data, Methods, Computed>({ name: 'container', components: { RemoteView }, data() { return { names: [] }; }, computed: { ssrname() { return this.$route.meta.ssrname; } }, watch: { ssrname() { if (this.names.indexOf(this.ssrname) > -1) return; this.names.push(this.ssrname); } }, created() { this.names.push(this.ssrname); }, methods: {/** * async clientFetch(ssrname: string) { const renderUrl = encodeURIComponent(this.$route.fullPath); const res = await axios.get( `http://localhost:3000/api/${ssrname}/render`, { params: { routerMode: 'history', renderMode: 'csr-json', renderUrl } } ); if (res.status === 200) { return res.data; } return null; }, /** * async serverFetch(ssrname: string) { const renderUrl = encodeURIComponent(this.$route.fullPath); const res = await axios.get( `http://localhost:3000/api/${ssrname}/render`, { params: { routerMode: 'history', renderMode: 'ssr-json', renderUrl } } ); if (res.status === 200) { return res.data; } return null; }}}); </script>Copy the code

Directory description

. ├ ─ ─. Vscode │ ├ ─ ─ Settings. The json vscode configuration ├ ─ ─ examples service examples of split │ ├ ─ ─ SSR - about about our service │ | ├ ─ ─ the SRC Vue source directory │ | | ├ ─ ─ Views the page directory │ | | | ├ ─ ─ the about -help. Vue help center page │ | | | └ ─ ─ the about - us. Vue about us page │ | | ├ ─ ─ app. Vue page entry documents, Public navigation │ | | ├ ─ ─ entry - client. Ts client entry documents │ | | ├ ─ ─ entry - server. Ts server entry documents │ | | ├ ─ ─ the router. The routing configuration file │ ts | | └ ─ ─ Shims - vue. Which s. vue file TS statement │ | ├ ─ ─ genesis. Build. TS current service production environment building entrance │ | ├ ─ ─ genesis. Dev. TS current service development environment entry │ | ├ ─ ─ Genesis. Prod. Ts current service production environment entry │ | └ ─ ─ genesis. The ts current service general server-side logic │ ├ ─ ─ SSR - common basic page aggregation service, Contains public navigation │ | ├ ─ ─ the SRC Vue source directory │ | | ├ ─ ─ views the page directory │ | | | ├ ─ ─ the about -help. Vue help center page │ | | | └ ─ ─ the about - us. Vue about us page │ | | ├─ App. Vue page Entry file, Public navigation │ | | ├ ─ ─ the container. The vue child application container │ | | ├ ─ ─ entry - client. Ts client entry documents │ | | ├ ─ ─ entry - server. Ts server entry documents │ | | ├ ─ ─ Router. Ts routing configuration file │ | | └ ─ ─ shims - vue. Which s. vue file ts statement │ | ├ ─ ─ genesis. Build. Ts current service production environment building entrance │ | ├ ─ ─ genesis. Dev. Ts The current service development environment entry │ | ├ ─ ─ genesis. Prod. Ts current service production environment entry │ | └ ─ ─ genesis. The ts current service general server-side logic │ ├ ─ ─ SSR - home page service │ | ├ ─ ─ the SRC Vue │ source directory | | ├ ─ ─ views the page directory │ | | | └ ─ ─ home. Vue home page │ | | ├ ─ ─ app. Vue page entry documents, Public navigation │ | | ├ ─ ─ the container. The vue child application container │ | | ├ ─ ─ entry - client. Ts client entry documents │ | | ├ ─ ─ entry - server. Ts server entry documents │ | | ├ ─ ─ Router. Ts routing configuration file │ | | └ ─ ─ shims - vue. Which s. vue file ts statement │ | ├ ─ ─ genesis. Build. Ts current service production environment building entrance │ | ├ ─ ─ genesis. Dev. Ts Current service development environment entry │ | ├ ─ ─ genesis. Prod. Ts current service production environment entry │ | └ ─ ─ genesis. The ts current service general server-side logic | ├ ─ ─ the editorconfig editor configuration | ├ ─ ─ . Eslintignore eslint ignore configuration | ├ ─ ─ the eslintrc. Js eslint configuration | ├ ─ ─ the gitignore git ignore configuration | ├ ─ ─ the stylelintignore stylelint ignore configuration | ├ ─ ─ Genesis. Build. Ts all service production build | ├ ─ ─ genesis. Dev. Ts all service development environment to start | ├ ─ ─ genesis. Prod. Ts all service production environment entry | ├ ─ ─ stylelint. Config. Js Stylelint configuration | └ ─ ─ tsconfig. Json configuration of TS │ └ ─ ─ package. The jsonCopy the code

Note: This project is for demonstration purposes to put several services into one repository. In a real application, each service would be placed in a separate Git repository.

The last

  • This project source code address: VUe-genes-micro
  • Genesis Official Warehouse
  • Genesis Document Address
  • Vue SSR based microarchitecture in FOLLOWME5.0 practice
  • If you are interested in the micro front-end and micro services, welcome Star, you can also interact with me in the message area!