Use vue/React + Webpack + Jenkins + Verdaccio + yAPI + nginx to build engineering services for small front-end teams

Front-end engineering is something that you’ve all been exposed to

Grab any little front end and you’ll know:

“Front-end engineering? Everybody knows that. That’s about it.”

Why engineering

In my understanding, there are the following points:

Convenient management, focused development, rapid iteration, etc

Let’s start with the right-hand side

Componentization: Componentization development

Automation: CI/CD helps us automate build code, testing, delivery & deployment, notifications, etc

API Mock: Provides API Mock services without the need to add extra test data to the code

Componentized development needs to build NPM private libraries, automation needs to build CI/CD services, and API Mock needs to deploy API Mock services. Let’s call the above services that need to build and deploy API Mock services, temporarily called engineering environment services

Construction of engineering environmental services

We will build a small front-end team engineering environment service is like this ↓ :

All services are deployed in the Docker container. Let’s get familiar with the Docker one by one at the beginning

Finally, we will use Docker-compose to unify the orchestration: rapid deployment, migration backup, etc

tool describe
jenkins Set up CI/CD services
verdaccio Build the NPM private library
yapi Build the API Mock Server
mongo It’s just for yAPI for now
nginx Do basic agency

Don’t panic. The basics of Docker are very simple

Let’s take a look at the general work of CI/CD services

The CI/CD pipeline starts when the code is pushed to the repository and connected to the repository’s Webhook

Of course, there are also basic, fast rollback strategies

Build from zero to one

Build a complete set of service environment step by step from 0 to 1

What we will Learn

It contains the whole set of services need knowledge points will be said, reduce your a lot of redundant search:

  • Git: Basic command operations and branching strategies
  • Shell: Basic usage of shell scripts
  • Centos: Basic knowledge of centos
  • Docker: Basic use of Docker to create images, containers, persistent data volumes, etc
  • Jenkins: Jenkins multi-branch pipeline and other basic configurations
  • Nginx: How to enable gzip and proxy basics
  • NPM: Simple distribution packages, etc
  • Mongodb: Basic knowledge and operations

The article detailed

The course is about 20,000 words, more than 60 pictures, in order to make it easier to learn some of the pictures are composed of multiple pictures

I just uploaded it here, because I can only divide it into several articles to send due to the word limit, please understand

  1. From 0 to 1, build front-end engineering services for small teams (1/3)

  2. From 0 to 1, build front-end engineering services for small teams (2/3)

  3. From 0 to 1, build front-end engineering services for small teams (3/3)

In order to better and more convenient learning, I wrote a small manual

Get a little manual

Concern public number: “front-end small manual”, reply: small manual

You can get the download of the PDF version of the resource

Typora’s night theme is like this:

Nuggets here I will be on as soon as possible!

Thank you for your attention

Finally, I hope I can get your attention ~~

Your small attention is our great power ah, we will continue to push original and good articles to you

This is the QR code of our official account