As a front-end engineer who loves learning, in order to achieve greater growth, in addition to accumulating knowledge of native JavaScript, it is necessary to master back-end development, which is the only way to completely transform from a full-end development engineer into a big front-end!

Project background

As I am usually interested in the front-end field, I have developed my own personal website, from the Hexo scaffolding blog, to the personal website separated from the front and back end, and then to the unicloud cloud development, during which I gradually gained a better understanding of NodeJS technology.

At present, I am in charge of the background server project of a visualization platform of the company, and I have gained a lot from the initial technology selection, step by step construction and testing, to the final deployment to the Linux system and the later iteration and update.

The technical architecture

Because it is team development, I used the way of front and back end separation, the specific technology stack is as follows: server side: NodeJs + Koa + Sequelize + SQlite3 Deployment online: PM2 code management: Git

Server Technical architecture Diagram:

Technical Architecture Description

  • Here we use the node community’s lightweight server framework Koa, and then the server middleware has:
    • Koa-static provides static resource access, the purpose of which is described in the project implementation details
    • Koa-body Processes the request packets so that KOA can easily get the POST/PUT data
    • Koa2-cors Cross-domain problems are handled in CORS mode during local synchronization
    • Multer is used to handle file upload
    • The KOA-router is used to write server-side routes and apis
    • Koa-send is used to process file downloads
    • Axios HttpAPI request tool, here is to assist the front-end to make third-party cross-domain requests
    • Sequelize Node’s ORM framework sequelize operates on databases, maps relational databases to objects, and then encapsulates them.
The above is the main middleware used by our Web server. I will introduce one by one how to organize and structure each piece, including the implementation of the error-checking middleware. Since I have consulted a lot of information in the process of writing the server side, welcome to communicate with you if there is any deficiency or need for optimization.

directory

Model - sequelize / | + -. Vscode/no | | | + - launch. Json < - vscode configuration file | | + + - controller/interface function - applys. Js < | + -- - application interface function Node_util. Js < -- -- common interface function | + - project. | js < - project management interface function... | + - lib/request and response processing package | + - return. Js < | + -- filter response - util/library tools | + - init | + - model | + - view/front static code hosting - | | + + - models / < -- Store all data mapping table | + - project. Js < - project management |... | + - db. Js < -- -- how to define the Model | + - Model. Js < - how to import the Model | + - database. Js < -- | + initialize database - the database. Sqlite < | - sqlite3 database file + - server. Js < -- -- business code (total entry) | + - server. Json < - business configuration items | + - package. Json < -- the project description file | + - node_modules / < - NPM install all depend on the packageCopy the code

Common functions elaborate

sequelize

Before Sequelize, NodeJS invoked data tables, requiring hand-written, artful SQL statements. Sequelize abstracts a data table into an object using an API to add, delete, modify, and query data. Just like Vue liberates native DOM manipulation, there is no convenience. Const sequelize = new Sequelize({host: 'localhost', dialect: 'sqlite', // timezone: '+08:00', pool: {Max: 5, min: 0, acquire: 30000, idle: 10000 }, storage: 'database.sqlite', operatorsAliases: false }); Module.exports = db.definemodel ("user", {username: db.sequelize.string, password: db.Sequelize.STRING, status: db.Sequelize.STRING, token: Db. Sequelize. STRING, / / save to the front of encrypted information Temporarily composed wechat_sceneId status + timestamp: db. Sequelize. INTEGER, / / WeChat id} small program to load the scene, {// When freezeTabelName is true, it does not add complex table names when mapping tables in the library. // When this option is true, user is mapped to user and when it is false, it is mapped to Users freezeTableName: BelongsTo (projects, {foreignKey: 'projectId', targetKey: 'ID'}); Const userList=async ()=>{let results = await model.user.findall () return results}Copy the code

Finally, if you want to learn more about the use of Sequelize, you can go to Liao Xuefeng’s personal website. ##sequelize

supervisor

A hot update plug-in, Supervisor, during developmentCopy the code

Package online/package as an app

Processes reside in PM2

NPM install -g pm2 $pm2 start app.js # $pm2 start app.js -i 4 # cluster mode start 4 app.js instances # $pm2 start app.js --name=" API "# Start the application and name it" API "$pm2 start app.js --watch # Automatically restart the application when the file changes $pm2 monit # display the CPU usage of each application $pm2 show [app-name] # $pm2 logs $pm2 logs [app-name] $pm2 flush # Flush all log files $pm2 stop all # Reload all applications in cluster mode. $pm2 reload all applications in Cluster mode GracefulReload all # Graceful reload all apps in cluster mode $pm2 delete all $pm2 delete 0 $pm2 scale API 10 $pm2 scale API 10 $pm2 scale API 10 $pm2 reset [app-name $pm2 update # Save processes; $pm2 resurrect # reload the list of saved applications. Kill PM2 and restore processes $PM2 generate # generate a sample JSON configuration file http://pm2.keymetrics.io/docs/usage/quick-start/Copy the code

Mysql database connection function knowledge

Enable LAN access to the local database. 1. Update the permission of the root account. Grant all PRIVILEGES on *.* to root@"%" identified by 'ABC' with grant option; flush privileges; The complete template for the above statement is: Grant all PRIVILEGES on database name. To 'userid '@'IP' identified by 'password' with grant option; flush privileges; Testing, no problem. 2, create a new account, such as guest, and define the accessible hosts as %, that is, all hosts can access this account. Testing, no problem. Reference: https://jingyan.baidu.com/article/6dad50755e3dd1a123e36ec4.htmlCopy the code

Docker package image

  • To use Docker on Windows, use the Docker Desktop tool
Install and run docker Desktop test Demo. Go to Step 1. Clone the repository imageCopy the code
  • Creating a Configuration Item

    • Dockerfile
    FROM node:12.13.0
    
    # Create app directory
    WORKDIR /usr/src/app
    
    # Install app dependencies
    # A wildcard is used to ensure both package.json AND package-lock.json    are copied
    # where available (npm@5+)
    COPY package*.json ./
    
    RUN yarn install
    #RUN npm install --registry=https://registry.npm.taobao.org
    # If you are building your code for production
    #RUN npm ci --only=production
    
    # Bundle app source
    COPY . .
    
    EXPOSE 3000
    CMD [ "node", "server.js" ]
    
    Copy the code
    • dockerignore
    .git
    .svn
    node_modules
    public
    static/model
    database.sqlite
    npm-debug.log
    Copy the code
  • Compile the packaged server project

    Docker build -t yanyufanchen/node-web-app. Node-web-app for the packaged image name can be used: user name/image name View all images docker images modify the tag docker tag IMAGEID(IMAGEID) REPOSITORY:TAG (user name/image name: Docker run -p 320:3000 -d Image name Mapping port 49160: original port 8080 Push remote repository docker image name: label Delete image docker Rmi-f 241C2CC33dde (Image name) View docker ps Stop docker stop Delete docker rm -fCopy the code
    • Problems encountered
    "Wsl2 installation is incomplete" is displayed after the Docker Desktop tool is installed. Cause: Linux is not installed on the Windows subsystem. You can download the Debian tool solution on the Window Store. https://www.jiloc.com/45016.html 1, 2, install debian start debian 3, registered account password Is still not solved, Install the WSL update https://www.cnblogs.com/xiluhua/p/14120713.html https://github.com/xiluhua/docker-desktopCopy the code

Code obfuscation ugliffe -es obfuscation

The installation

From NPM for use as a command line app:

npm install uglify-es -g

From NPM for programmatic use:

npm install uglify-es

use

Mix multiple obfuscation property options: Uglifyjs example.js -c -m --mangle-props regex=/_$/,reserved=[bar_] Confuses and output to a specified directory uglifyjs text2.js -o out/text2.js -c -m  --mangle-props regex=/_$/,reserved=[bar_]Copy the code

address

Uglify - js can only confuse es5 uglify the following reference documents in Chinese http://www.suoniao.com/article/52 - es can confuse es6 https://github.com/mishoo/UglifyJS/tree/harmonyCopy the code

The resources

  • Koa learning
  • My big front-end personal website
  • About the middleware KOa-body
  • File upload
  • PKG packages Node applications
  • Make test API documentation