Crawl out the articles that have been liked on the gold-digging website, and then you can search according to the title and author. You can sort the articles that have been liked according to the release time, the number of likes and the number of readings, so as to more efficiently manage the articles that have been liked by yourself and put an end to “collecting and eating ashes”.
Juejin.58fe.com
Source code address: github.com/6fedcom/jue…
Back-end Express project
Install Express
NPM install -g typescript NPM install -g TSPM install --save express // Install normal express modules, NPM install -- save-dev@types /express // install the express module with the declaration file in devDependencies.Copy the codeThe directory structure
├─ Heavy ├─ SRC ├─ App ├─ controllers ├.jsonCopy the codeapp.ts
import express from 'express';
import { NextFunction, Request, Response } from 'express'; // Express declares the type defined by the file
import * as listController from "./controllers/list";
const app: express.Application = express();
app.get('/api/getList/:userId', listController.getLikeList)
app.use(function (err: Error, req: Request, res: Response, next: NextFunction) {
return res.sendStatus(500);
});
app.listen(8001.function () {
console.log(`the server is start at port 8001`);
});
export default app;
Copy the codeWhen developing Node +typescript projects, you can use TS-Node to debug your code and TSC to compile it
"scripts": {
"dev": "nodemon --watch 'src/' -e ts --exec 'ts-node' ./src/app.ts",
"build": "tsc"
}
Copy the codeUse superagent to crawl data
Superagent is a very convenient client request proxy module in Node.js, which is very convenient for making requests.
const request = require("superagent");
export const getLikeList = (
req: Request,
res: Response,
next: NextFunction
) => {
let result: any = [];
let { userId } = req.params;
let url = `https://user-like-wrapper-ms.juejin.im/v1/user/${userId}/like/entry`;
request
.get(`${url}? page=0&pageSize=${pageSize}`)
.set("X-Juejin-Src"."web")
.end((err, res) = > {
if (err) {
return console.log(err);
}
let entryList = res.body.d.entryList;
const total = res.body.d.total;
let pages = Math.ceil(total / pageSize);
entryList = handleResult(entryList);
let promiseList: any[] = [];
for (let i = 1; i <= pages; i++) {
promiseList.push(
new Promise((resolve, reject) = > {
request
.get(`${url}? page=${i}&pageSize=${pageSize}`)
.set("X-Juejin-Src"."web")
.end((err, res) = > {
if (err) {
return console.log(err);
}
let entryList2 = JSON.parse(res.text).d.entryList; entryList2 = handleResult(entryList2); resolve(entryList2); }); })); }Promise.all(promiseList).then((rspList: any) = > {
result = [...entryList, ...flatten(rspList)];
});
});
};
Copy the codePm2 process management tool
Code development to run online, and ensure service stability, will use PM2 tools. This chapter explains PM2 configuration and use, process daemons, and the PM2 multi-process model. Pm2 common commands
NPM install pm2 -g Global installation pm2 pm2 list Lists all applications that are running. Pm2 start app.js Runs an application. Pm2 stop app_name Stops an application by application name Stopping an application (by application ID) pm2 stop All Stopping all applications pm2 restart app_name Restarts an application (by application name) pm2 restart ID Restarts an application (by application ID) pm2 restart All Restarts all applications Pm2 delete App_name Deletes an application (by application name) pm2 delete ID Deletes an application (by application ID) pm2 delete All Deletes all applicationsCopy the codeThe front-end project
Create a TypeScript project step by step using create-react-app and introduce ANTD.
npx create-react-app frontend --template typescript
cd frontend
Copy the codeModify React scaffolding configuration practices using customize-cra
Install react-app-rewired,customize-cra, which provides some default configuration functions to modify react scaffolding
npm i react-app-rewired customize-cra --save-dev
Copy the codeAfter installation, modify the scripts of the package.json file
"scripts": {
"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
}
Copy the codeThe project root directory creates a config-overrides. Js to modify the Webpack configuration.
Antd-dayjs-webpack-plugin is an official Ant Design plugin for replacing moment.js, You can use the antD-dayjs-webpack-plugin to replace Momentjs with day.js to dramatically reduce the size of the pack.
| Name | Size | Size gzip |
|---|---|---|
| Day.js | 11.11 KB | 4.19 KB |
| Moment.js | 231 kb | 65.55 KB |
Ant Design provides an on-demand Babel plug-in, babel-plugin-import
Install NPM I babel-plugin-import –save-dev and modify config-overrides
const{override, fixBabelImports, addWebpackPlugin} =require('customize-cra');
const AntdDayjsWebpackPlugin = require('antd-dayjs-webpack-plugin');
// The override function overrides the React scaffolding Webpack configuration; FixBabelImports Modifies the Babel configuration
module.exports = override(
fixBabelImports('import', {
libraryName: 'antd'.libraryDirectory: 'es'.style: 'css',
}),
addWebpackPlugin(new AntdDayjsWebpackPlugin())
);
Copy the codeCDN configuration of front-end project
Antd project more directory under the. Env file, CDN is using qiuyun
PUBLIC_URL = 'http://cdn.58fe.com/juejin-helper/'
Copy the codeFront-end Nginx is configured with HTTPS and cross-domain
server {
Port 80 is the normal HTTP access interface
listen 80;
server_name juejin.58fe.com;
In this case, I have done HTTPS full encryption, and automatically redirect to HTTPS when accessing HTTP
rewrite^ (. *) https://$hostThe $1 permanent;
}
server {
listen 443 ssl;
server_name juejin.58fe.com;
server_name_in_redirect off;
Independent SSL authentication can be set
ssl_certificate /58fe/ssl/juejin/juejin.58fe.com_chain.crt;
ssl_certificate_key /58fe/ssl/juejin/juejin.58fe.com_key.key;
ssl_session_timeout 5m;
ssl_ciphersECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:! NULL:! aNULL:! MD5:! ADH:! RC4;ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
location / {
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $http_host;
root /58fe/juejin-helper/frontend/build;
try_files $uri $uri/ /index.html;
}
Requests for # localhost/ A are distributed evenly to myServer
location ~ /api/ {
Load balancing name (used to configure load balancing)
proxy_pass https://juejin-api.58fe.com;
# set the user's real IP address. Otherwise, all nginx server IP addresses will be obtained
proxy_set_header X-real-ip $remote_addr;
proxy_set_header Host $http_host; }}server {
listen 443 ssl;
server_name juejin-api.58fe.com;
server_name_in_redirect off;
Independent SSL authentication can be set
ssl_certificate /58fe/ssl/juejin/api/juejin-api.58fe.com_chain.crt;
ssl_certificate_key /58fe/ssl/juejin/api/juejin-api.58fe.com_key.key;
ssl_session_timeout 5m;
ssl_ciphersECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:! NULL:! aNULL:! MD5:! ADH:! RC4;ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
location / {
tcp_nodelay on;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_passhttp://127.0.0.1:8001; }}Copy the codeThe deployment of
Install Docker and start Docker
Yum yum install docker -y yum install docker -y yum install docker -y Docker restart // Stop the docker service service docker stopCopy the codeInstall the docker – compose
// Download and install docker-compose (\ you can modify the latest version as needed)
The curl -l https://github.com/docker/compose/releases/download/1.24.1/docker-compose- ` uname-s`-`uname -m` > /usr/local/bin/docker-compose // grants execution permission to chmod +x /usr/local/bin/docker-compose // Check the docker-compose version after installationCopy the codeGet to know the Dockerfile directive
From: base image MAINTAINER: MAINTAINER information RUN: RUN the command ADD: copy a file WORKDIR: similar to a CD command, the current working directory VOLUME: a directory mounts an EXPOSE port RUN: starts a container and runs the command
Docker Compose
Docker Compose is a tool for defining multi-container Docker applications from a single YML file. Arrange the order of container execution, through a command can according to the definition of yML file to create or manage multiple containers, compared with a docker run project, management and create containers more convenient.
Docker-compose compose is composed by writing a yML file and executing one line of commands. Docker-compose is composed by using the docker-compose front-end react project build directory to Nginx, and the back-end is a nodeJS service.
Write the docker-comemess. yml file
version: '3'
services:
juejin-web: # Front-end Web container (running the React project in Nginx)
container_name: juejin-web-container
image: nginx
restart: always
build: . /
volumes:
- ./nginx.conf:/etc/nginx/nginx.conf
- ./frontend/build:/58fe/juejin-helper/build # Mount the project
ports:
- "80:80" # Mapping port
depends_on: The web container can be started only after being started by the API container
- juejin-api
juejin-api: # back-end Express container
container_name: juejin-api-container
restart: always Always restart the container when the container exits
build: ./backend Specify the context root directory, and then specify the Dockerfile based on that directory
ports: # Mapping port
- "8001:8001"
command: node dist/app Execute the command after the container is created
Copy the codeNPM I && NPM run build && Node dist/ APP -> NPM I && NPM run buld -> COPY to nginx Docker-compose compose the order of execution, Docker-compose build -> compose up -> start docker-compose down -> stop docker ps -a – > show all container docker rm docker ps – a | grep Exited | awk ‘{print $1}’ delete has stopped docker container
- Authorize github projects on dockerHub so that when github projects are updated, Dockerfile is automatically executed to build and the build results are saved to the dockerHub repository.
Refer to the article
- Github + Jenkins + Docker for automated deployment
- Docker-compose deployment Vue+SpringBoot back-end separation project