I jerked off a blog for everyone over the weekend

Technology stack

Client: vue

Server: Springboot + Maven + JPA + Docker +shell

My blog address: Rice talk programming

At present, it has been deployed on Tencent cloud, managed by Docker, and can be accessed directly

rendering

Look at this nice front page

Article page minimalism is good

Support the review

In order to prevent malicious brush, but also bring a puzzle can be

Classification page, good-looking

Archiving pages, timelines are my favorite

It also provides a background

Landing page

System logs are also recorded in the background

Post an article to upload the cover image, but also support screenshots

Manage articles anytime and anywhere

And n functions

Background and draft box function, write not published articles can be saved to the draft box, and recycle bin function, deleted articles can be found in the recycle bin, very powerful blog website.

Blog currently implemented functions

Blog background management to achieve the function

Java backend architecture

Super easy to change, get the source code how to change how to change, a blog backend should be so easy to change.

How the suit

See Dockerfile

FROM maven:3.5-jdk-8
RUNln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime
Copy the code

Look at the docker – compose

version: '3'
services:
  myblog:
    container_name: myblog
    environment:
      - TZ=Asia/Shanghai
      - JAVA_OPTS=-XX:MetaspaceSize=128m -XX:MaxMetaspaceSize=128m -Xms128m -Xmx128m -Xmn128m -Xss256k -XX:SurvivorRatio=8 -XX:+UseConcMarkSweepGC
    privileged: true
    restart: always
    build: .
    working_dir: /myblog
    volumes:
      - .:/myblog
      - ~/.m2:/root/.m2
    expose:
      - "8088"
    command: mvn clean spring-boot:run -Dspring-boot.run.profiles=docker
    networks:
      - default
      - nginx_net
networks:
  nginx_net:
    external: true
Copy the code

Take a look at my shell script

#! /bin/shContainer="myblog" case "$1" in build) sudo rm -rf target sudo cp ./conf.d/myblog.conf /home/ubuntu/proj/nginx-center/conf.d/myblog.conf sudo cp -r .. /myblog-front/dist /home/ubuntu/proj/nginx-center/html/myblog-front ;; start) nohup sudo docker-compose up >myblog.log 2>&1 & tail -f myblog.log ;; stop) sudo docker-compose down ;; login) docker exec -it $Container /bin/bash ;; info) docker ps -a -f name=$Container ;; port) docker port $Container ;; *) echo "Usage: build|run|init[chmod,conf]|start|stop|remove|login|info|port" exit 3 ;; esacCopy the code

If it is on IDEA, import the project directly and start the service.

If you want to use a Docker container, the process is as follows:

Bash./ Ctrl. sh build This step is to copy the client code to the specified path
Bash./ Ctrl. sh start Start service
Bash./ Ctrl. sh stop Turns off the server

Record the new course of magic change

Post-deployment access discovery

Viewing Background Logs

At first, I looked at the back-end log and found that no log was printed. We can initially think that it is not caused by back-end interception, so we attribute the problem to the routing of VUE, and then use keywords: After the deployment of vUE can not directly enter the key access check, although found part of the solution, but can not fix, so do a morning, afternoon and girlfriend out to sing a K, and then realized that it should be nginx routing problem, back to nginx routing added processing

When the user requests myblog.lixifan.cn/admin, $u… $uri/ = /admin/ = /admin/ = /admin/ = /admin/ = /admin/

After successful deployment, the page looks like this

So I decided to do a bunch of optimizations. I’m a pure back-end guy, but optimizing performance is something I do all the time, even though the browser loads resources too slowly.

I opened the debug screen in Chrome with F12 to see which resources were loading so slowly

These more than a second of resources are going to kill, look at the size is a little big ah, there are more than 300 K of resources, if compressed, it should be a lot faster, Baidu told me

This indicates that the browser supports GZIP compression, that is, the server will compress the resources, the browser receives the compressed data after decompressing, so that the transmission speed should be much faster. Since my front-end resource server uses Nginx, I should be able to simply turn on compression in Nginx.

I submitted the code to Tencent Cloud. After updating the code, I restarted the server to check the resource situation again

Interesting and effective ah ha ha ha, now just need to get rid of this one second more is ok, so this is what thing, should have more than one second after compression

It turns out to be a remote library, no wonder there is no egg to use after compression, unexpectedly so big, then don’t load remotely, directly put a local, and then after compression should be OK, try to make a wave? And so on, the connection is at the beginning of the CDN, you can consider directly changing the CDN acceleration source, maybe the speed will be fast, Baidu changed the next

Rebuild to remote, then update the code on Tencent Cloud after restarting the container, re-access, can be seen

Effective hahaha, blog visits load in less than a second, which is acceptable.

Now log in to the background administration system

Suddenly realized that I forgot to set up the administrator account, I thought, this thing should be put on the startup of their own detection can be done, so directly on the server