❝

When it comes to operations and maintenance, for a long time I felt that the front end was irrelevant, or even irrelevant. But with the development of front-end engineering, the knowledge of basic front-end operation and maintenance deployment is increasingly valued. If your company has a strong operation and maintenance department, you can ignore operation and maintenance completely. However, Shu Jiang thinks that if you want to know more about front-end architecture, you still need to have some knowledge of operations and maintenance. Of course, now cloud vendors want to launch their own Serverless services (to be talked about in the next article), which claims to make the front end more focused on business development, without worrying about the deployment and maintenance of the underlying applications. Developers can focus more on business development, and interested children can go to play

❞


1.npm

❝

NPM is a package management tool provided by Node.js. It is mainly used to manage project dependencies, release, etc. The following describes some common deployment scenarios

❞

1.1 NRM

❝

NRM (NPM Registry Manager) is the mirror source management tool of NPM. Because the default links established by NPM access foreign resources, the access speed is slow, and this tool can be used to quickly cut between NPM sources

❞

  • How to install
npm install -g nrm 
Copy the code
  • View available resources
nrm ls   

*npm ---- https://registry.npmjs.org/

cnpm --- http://r.cnpmjs.org/
 taobao - http://registry.npm.taobao.org/  eu ----- http://registry.npmjs.eu/ .Copy the code
  • Add a private repository link
nrm add name http://registry.npm.tree.com/  # Private repository link
nrm use name Use the mirror address of this address
Copy the code

NRM is more used if the company has a private repository deployed on the Intranet, which is convenient to use NRM as source switch, but also beneficial for dependency version management. If you want to build your own private repository, you can use Verdaccio, you can see this specific tutorial at 👇

1.2 Releasing the NPM Package

❝

What process do we need to complete when we want to release an NPM package?

❞

  • Start by signing up for the NPM account 🔗
  • Configuration package. Json
{
  "name": "kutil".  "version": "1.0.0".# version name
  "scripts": [].Executable script command
  "repository": "https://github.com/xxx/xxx.git".#github repository address
 "author": "tree <[email protected]>".# the author  "description": "Kit", # pack description "keywords": "utils",  ] } Copy the code
  • Configuring the packaging mechanism

❝

Rollup is recommended for toolclass packaging. Webpack is a good way to package applications such as SPA or isomorphic projects

❞

  • Adding unit tests

❝

Good open source packages have unit testing modules to ensure package stability and code quality, often with a build-passing flag. Those who are interested can read about front-end unit testing

❞

  • Develop the document readme.me

❝

Readme is a quick way for developers to get used to it. It includes detailed Api descriptions, usage examples, project descriptions, and more. It can also include unit test coverage, downloads, certificates, and more

❞

Finally, after completing the above series of operations, it’s time for the final release

npm login # Log in to your NPM account

npm publish After successful login, run the publish command

+ [email protected] Display NPM registration and package version number successfully
Copy the code

2. jenkins

❝

Jenkins as an extensible automation server, can be used as a simple CI server, has the functions such as automatic build, testing, and deployment, in short, Jenkins can facilitate our daily the front end of the project version update iteration (development, test, production environment, etc.) can also be done through its automation series of operations include: Compile packaged meta tests, code scans, etc., official documentation

❞

2.1 Installation Procedure

  • Download the Jenkins.

  • Open the terminal and go to the download directory.

  • Run the command java-jar Jenkins. War –httpPort=8080.

  • Open your browser and go to the link http://localhost:8080.

  • Follow the instructions to complete the installation.

For details, see Jenkins+ Github Front-end Automation Deployment

2.2 Automatic deployment with front-end projects

❝

The Jenkins pipeline configuration is mainly introduced here. The pipeline code defines the entire build process, which usually includes the stages of building, testing and delivering the application. The following is the configuration of the path and warehouse

❞


Image configuration is as follows:

  • SCM: Select Git or SVN as the code trigger
  • Script path: Create jenkinsfile in the project root directory to write pipelining

Here is a simple version of JenkinsFile pipelined task writing, complete the whole front-end engineering deployment involved compilation packaging, static scanning, unit testing and so on

def gitUrl = "http://gitlab.****.com/shc/****.git"//GIT entry (varies by project)def gitCred = "***-***-4f00-a926-1848b670d97b"//GIT credentialsif ("DEV" == buildType) {
    buildScript = "build_development"
    try {
 node('k8s') {  stage('Drop-down source code') {  checkout([$class: 'GitSCM', branches: [[name: '*/master']], doGenerateSubmoduleConfigurations: false, extensions: [], submoduleCfg: [], userRemoteConfigs: [[credentialsId: "${gitCred}", url: "${gitUrl}"]]])  Select the sample step "checkout:Check out from Version Control" to generate pipeline script fetch  }  checkStatus('Drop-down source code')  stage('Code build compilation') {  sh "yarn run ${buildScript}"  }  checkStatus('Code build compilation')  stage('Code static scan') {  sh 'yarn run lint'  }  checkStatus('Code static scan')  stage('Unit Tests') {  sh 'yarn run unit'  }  checkStatus('Unit Tests')  }  } catch(Exception e) {   } } Copy the code

Once completed, the project can be built and completed in stages, starting with the drop-down source code, code build and compile, code scan, and so on. Automatic deployment is successful only when all steps are successful, as shown below


3.Docker

❝

Docker is a virtual environment container into which you can package your development environment, code, configuration files, etc., and finally publish your application

❞

3.1 How to Use it

❝

The traditional deployment process is completed by centralizing the deployment operation into a deployment script, and the front-end application is run by running the Docker container on the server

❞

How to install

yum install docker-ce
Copy the code

Nginx. conf(if nginx is not customized, you can use the official image)


3.2 Dockerfile configuration

❝

Dockerfile is a configuration file that allows the Docker build command to explicitly run the operations, create the Dockerfile, and write the associated configuration

❞ 

FROM node:latest as builder 
WORKDIR /app
COPY package.json 
RUN npm install   
COPY . .
RUN npm run build   FROM nginx:latest COPY nginx.conf /etc/nginx COPY --from=builder /app/dist /usr/share/nginx/html  //ps: The prefix of each instruction must be uppercase. Copy the code
  • ADD and COPY: Copies files or directories to the image built by Dockerfile
  • EXPOSE: Specifies the port used by the container running the image. It can be multiple ports.
  • The RUN: directive tells Docker to execute commands within the image
  • FROM: The image name specified by FROM is called the base image and must be in the first non-comment directive
  • WORKDIR: Sets the working directory inside the container

Nginx.conf is configured as follows

events {
    worker_connections  1024;
}
http{
    server {
 listen 80;  server_name localhost;  location / {  root /usr/share/nginx/html;  index index.html index.htm;  }  } } Copy the code

After creating the file and writing it, create the image with Docker

3.3 How to Create a Mirror

❝

Create an image using the Dockerfile of the current directory labeled frontend

❞ 

docker build -t frontend .
Copy the code
  • -t: specifies the target mirror to be created
  • . : indicates the directory where Dockerfile resides. You can specify the absolute path of Dockerfile


Image generated successfully

3.4 Viewing a Mirror

docker image ls | grep frontend
Copy the code

If the result appears, the image frontend is successfully created. Then we start a Docker container based on the image

4.5 How Can I Start the Vm?

❝

Use the Docker image frontend:latest to start the container in port 80 mapping mode and name the container frontend

❞ 

docker run --name frontend -p 80:80 frontend:latest
Copy the code
  • -p: specifies the port mapping. The format is as follows: Host (host) Port: Container Port Maps port 80 of the host to port 80 of the container
  • -name: specifies a name for the container.

Docker deployment is complete

Docker can also be integrated into the Jenkins automated deployment pipeline described in the previous section

  stage('Deploy to development Tuning Environment') {
                echo "auto deploy to test environment"
                sh "docker build -t frontend ."
                sh "docker run --name frontend -p 80:80 frontend:latest"
  }
Copy the code

4.PM2

❝

PM2 is a node process management tool, which can be used to simplify the tedious tasks in many Node application tube. PM2 is an indispensable choice for Nodejs application daemon, which facilitates the management of web services that can be independently run and accessed based on Nodejs platform, such as NextJS, Express, KOA and other front-end applications

❞

4.1 Common Application Scenarios

  • Deploy the Node KOA2 or Express project application
  • Deploy front-end SSR (back-end rendering) applications such as Nuxt.js (Vue) and next.js(React) to build server-side rendering application frameworks

4.2 How to Use it

  • Installation:npm install -g pm2
  • Start the Node project:Pm2 start app.js or pm2 start bin/ WWW
  • Stop the PM2 service:pm2 stop bin/www
  • Stop all PM2 services:stop all
  • Restart the PM2 service:pm2 restart bin/www
  • Pm2 process information:pm2 list

The following information is displayed after startup

4.3 Advanced applications

❝

Add a process.json file to the project root

❞ 

{
 #apps is an array, and each array member corresponds to an application running in PM2
  "apps": [{
    "name": "app".# the name
    "script": ". /".# program entry
 "cwd": ". /".# directory where the application resides  "error_file": "./logs/err.log".Error output log  "log_date_format": "YYYY-MM-DD HH:mm Z" # date format  }] } Copy the code

Combined with the packjson script command, you can use processes to manage multiple applications

"script": {    "pm2":"pm2 start processes.json"
}
Copy the code

For more command and configuration information, see the PM2 documentation

5.Nginx

❝

Nginx can be used as either a Web server or a load balancing server, with high performance, high concurrent connections, etc

❞

5.1 Front-end Nginx stuff


See the front-end Nginx stuff for more details

5.2 supplement

  • Gray released

❝

Grayscale release is to let some people continue to use the old version of product A, and then some users start to use product B with the characteristics of the new version. If users have no feedback on B, the scope will be gradually expanded. On the one hand, it can ensure the stability of the whole system, and problems can be found and adjusted at the initial gray level to ensure the impact degree

❞

The traditional gray scale is distributed to the server through Nginx, here is a simple gray scale rule configuration, through the configuration of routing rules in Nginx, if the rules are complex, you can combine Nginx + Lua to do some gray scale business logic

1. Implement grayscale publishing according to Cookie

❝

This is distinguished by getting the version number set by the cookie

❞ 

upstream test1 {
Server 192.168.0.1:8080 max_fails = 1 fail_timeout = 60;}

upstream default {
Server 192.168.0.0:8080 max_fails = 1 fail_timeout = 60;}  server {  listen 80;  server_name www.****.com;  set $group "default";  if ($http_cookie~ *"version=V1") { set $group test1;  }   location / {  proxy_pass http://$group;  proxy_set_header Host $host;  proxy_set_header X-Real-IP $remote_addr;  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  index index.html index.htm;  }  } Copy the code
  1. According to IP to achieve grayscale publishing

❝

By Intranet and extranet IP address

❞ 

upstream test1 {
Server 192.168.0.1:8080 max_fails = 1 fail_timeout = 60;}

upstream default {
Server 192.168.0.0:8080 max_fails = 1 fail_timeout = 60;}  server {  listen 80;  server_name www.xxx.com;  set $group default;  if ($remote_addr ~ "10.0.0.110") {  set $group test1;  }  location / {  proxy_pass http://$group;  proxy_set_header Host $host;  proxy_set_header X-Real-IP $remote_addr;  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  index index.html index.htm;  } } Copy the code

Please drink a cup 🍵 remember three even oh ~

1. Remember to give 🌲 sauce a thumbs up after reading oh, there is 👍 motivation

2. Pay attention to the interesting things at the front of the public account, and chat with you about the interesting things at the front

3. Github frontendThings thanks to Star✨


This article is formatted using MDNICE