[project deployment] Vue+SpringBoot before and after separation personal blog project actual deployment nanny tutorial Linux+docker installation and deployment start-up one-stop tutorial

The SpringBoot open source project is deployed on the 75 yuan Alibaba cloud centos7, a small white hand tutorial

This tutorial is based on the completion of personal blog:

[Vue+SpringBoot] super detailed! Develop a SpringBoot + Vue+MybatisPlus+Shiro+JWT+Redis front and back end separation personal blog project every week!!! [project completion]


Personal blog has been completed for some time, but the pain point is that although the blog is open source, it will not be deployed and run.
After nearly a week's efforts, I learned the relevant technology stack and asked for the help of many senior students. Finally, the project was successfully deployed online (such code has the soul).


  • Although there are many online deployment tutorials, there are too few nanny level tutorials from scratch

  • The version is not clear. Many newcomers can't figure out the version of the software installed (it's silly to report errors all the time). Baidu is full of outdated information

  • Features of this tutorial (I hope Xiaobai can run successfully)

After reading this tutorial, you will learn

  • Project Download
  • function
  • to configure
  • pack
  • Front and rear end deployment
  • Operating software under linux environment
  • git basic operation
  • maven basic operation
  • nginx basic operation
  • node basic operation
  • docker is easy to use
  • redis basic operation
  • Basic mysql operations

Technology stack

System environment requirements

Alibaba cloud CentOS 7.7 64 position
JDK >= 1.8
MySQL >= 5.7
Maven >= 3.0
  • new directory

    #tmp store temporary installation package
    mkdir -p /data/tmp
    #service storage software environment
    mkdir -p /data/service
    #gitee code version control library
    mkdir -p /data/gitee

    The above directory is not required. You can choose the installation path by yourself.

  • JDK > = 1.8 (version 1.8 is recommended)

    Download the latest version of JDK in version 1.8 from the official oracle website. After downloading, upload the file to the server through WinSCP or XFTP. Then decompress and configure environment variables.

    Download address: https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html

    #Enter the installation package directory and unzip it
    cd /data/tmp
    tar -zxvf jdk-8u301-linux-x64.tar.gz 
    #Move the extracted folder to a unified place
    mv /data/tmp/jdk1.8.0_301 /data/service/jdk1.8.0_301
    #Modify the environment variable / etc/profile, JAVA_HOME is modified to its own jdk path.
    vim /etc/profile
    export JAVA_HOME=/data/service/jdk1.8.0_301	
    export PATH=$PATH:$JAVA_HOME/bin
    #Make environment variables effective
    source /etc/profile
    #Check whether the configuration is successful
    java -version
  • Maven >= 3.0

    Download the latest version of the compressed package from Maven's official website. After downloading, unzip and configure environment variables.

    Download address: https://maven.apache.org/download.cgi

    #Enter the installation package directory and unzip it
    cd /data/tmp
    tar -zxvf apache-maven-3.6.3-bin.tar.gz
    mv apache-maven-3.6.3 /data/service/
    #Modify the environment variable / etc/profile, MAVEN_HOME is modified to its own path.
    export MAVEN_HOME=/data/service/apache-maven-3.8.2java
    export PATH=$PATH:$MAVEN_HOME/bin
    #Make environment variables effective
    source /etc/profile
    #Check whether the configuration is successful
    mvn -v
  • Git

    Download the latest version of the installation package from git's official website and install it.

    Download address: https://git-scm.com/

    #This method is the simplest through yum installation. However, the installed version cannot be controlled
    yum -y install git
    #Check whether the configuration is successful
    git --version
    ssh-keygen -t rsa -C "xx@xx.com"
    cat ~/.ssh/id_rsa.pub
  • Install docker

    #Uninstall old version
    sudo yum remove docker \
                    docker-client \
                    docker-client-latest \
                    docker-common \
                    docker-latest \
                    docker-latest-logrotate \
                    docker-logrotate \
    #Install docker engine community
    sudo yum install -y yum-utils device-mapper-persistent-data lvm2
    sudo yum-config-manager \
      --add-repo \
    sudo yum install docker-ce docker-ce-cli containerd.io
    sudo systemctl start docker
    yum install https://download.docker.com/linux/fedora/30/x86_64/stable/Packages/containerd.io-1.2.6-3.3.fc30.x86_64.rpm
  • mysql > = 5.7 (note that mysql of production projects is deployed independently)

    Installation tutorial: https://www.runoob.com/mysql/mysql-install.html

    Download address: https://dev.mysql.com/downloads/mysql/

    Visit Mysql's visual database development tool: the installation tutorial of Navicat Premium tool can be searched by Baidu.

    Install MySQL in Docker.

    #View available MySQL versions
    docker search mysql
    #Pull version 5.7
    docker pull mysql:5.7
    #Create profile directory
    mkdir -p /data/docker/mysql/conf
    #Enter the configuration file directory and add a configuration file
    vim my.cnf
    #Start mirroring
    docker run -p 3306:3306 --name mysql -v /data/docker/mysql/conf:/etc/mysql/conf.d -e MYSQL_ROOT_PASSWORD=Vv0IBQ5qST -d mysql:5.7
    #Enter the docker container and set env LANG=C.UTF-8
    docker exec -it mysql env LANG=C.UTF-8 bash
  • Redis

    Installation tutorial: https://www.runoob.com/redis/redis-install.html

    Download address: https://github.com/tporadowski/redis/releases

    Redis visual management tool: [anotherredisdesktopmanager]:( https://github.com/qishibo/AnotherRedisDesktopManager/releases )

    docker pull redis:latest
    docker run -itd --name redis-test -p 6379:6379 redis
  • Node.js

    Installation tutorial: https://www.runoob.com/nodejs/nodejs-install-setup.html

    tar xf node-v14.15.4-linux-x64.tar.xz       // decompression
    cd node-v14.15.4-linux-x64/                 // Enter the decompression directory
    ./bin/node -v                               // Execute the node command to view the version
    //The bin directory of the extracted file contains commands such as node and npm. We can use the ln command to set the soft connection:
    mv /data/tmp/node-v14.15.4-linux-x64 /data/service/
    ln -s /data/service/node-v14.15.6-linux-x64/bin/npm   /usr/local/bin/
    ln -s /data/service/node-v14.15.6-linux-x64/bin/node   /usr/local/bin/
  • Nginx installation

    #First, install nginx front-end software
    yum -y install gcc pcre-devel zlib-devel openssl openssl-devel
    #Download nginx software installation package
    cd /data/tmp
    wget http://nginx.org/download/nginx-1.19.6.tar.gz
    tar -zxvf nginx-1.19.6.tar.gz
    cd nginx-1.19.6
    #Set the installation directory to / usr/local/nginx
    ./configure --prefix=/usr/local/nginx
    make install
    #start nginx 
    ps -ef|grep 
    #clone project source code
    git clone git@github.com:mao888/Personal-blog.git

    Note: before the clone code, you need to add the SSH public key of the server in the github management background. See details https://gitee.com/help/articles/4191

    Back end deployment steps

  • The latest code from the GIT warehouse clone. The GitHub address of my front and back-end separated version is https://github.com/mao888/Personal-blog.git

  • Modify the configuration file in the project. There are two configuration files, application.yml and application-druid.yml.

  • Start the project: copy the jar to the program directory and start the jar package file through the java command line. Because the spring boot framework is used in this project, the web container is built in the jar, so there is no need to install additional tomcat.

    mkdir -p /data/app/ruoyi-vue
    cp /data/gitee/RuoYi-Vue/ruoyi-admin/target/ruoyi-admin.jar /data/app/ruoyi-vue/ruoyi-admin.jar
    cd /data/app/ruoyi-vue/
    nohup java -jar ruoyi-admin.jar &
    tail -100f no	hup.out

    nohup and & are used to indicate that this command needs to be executed in the background, so that the java program will not stop after exiting the command line program.

  • Check the log to verify that the project is running successfully.

  • After modifying the configuration file of the project, package the entry project. It is packaged into an executable jar package through mvn.

  • Use the visual database development tool Navicat Premium to enter the database management interface. Create a database vueblog and execute the data script_ blog.sql,m_user.sql

redis configuration

       # address
       host: localhost
       # Port, 6379 by default
       port: 6379
       # Database index
       database: 0
       # password

 # Data source configuration
       type: com.alibaba.druid.pool.DruidDataSource
       driverClassName: com.mysql.cj.jdbc.Driver
           # Master database data source
               url: jdbc:mysql://localhost:3306/vueblog?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
               username: root
               password: Vv0IBQ5qST

 cd /data/github/vueblog/
 mvn clean install -pl com.mao:vue-springboot-blog-java -am

front end

 # Enter project directory
 cd /data/github/vueblog/vue-springboot-blog-front
 #For local startup, you can modify the back-end interface port here. If it is packaged directly, you do not need to modify the configuration file
 vim vue.config.js
 # Packaging formal environment 
 npm run build
 mkdir /data/app/vueblog-vuedist
 mv dist/* /data/app/vueblog-vuedist/
 #Publish the static files of the generated dist folder to your nginx or static server, and the index.html is the entry page of the background service.
 vim /usr/local/nginx/conf/nginx.conf
     server {
         listen       80;
         location / {
             root  /data/app/vueblog-vuedist;
             try_files $uri $uri/ /index.html;
             index  index.html index.htm;
        error_page   500 502 503 504  /50x.html;
         location = /50x.html {
             root   html;
 #Reload the configuration file nginx
 /usr/local/nginx/sbin/nginx -s reload

 ./nginx -s reload
 nginx -t

 Tips: node Version requires the latest stable version, v14.15.4 Previous versions may fail to package.
  • Note 3: if you use docker to enter the mysql database and execute sql statements containing Chinese, and Chinese garbled code occurs, you need to set the Chinese package in the container system. Therefore, you need to set the environment language when entering the docker container:

  • Note 2: before starting the mysql image, create the configuration file directory and place the configuration file. In this way, you can directly use the configured parameters when mysql is started. The following is the configuration database. The character set is utf-8.

  • Note 1: the default configuration file for MySQL(5.7.19) is / etc/mysql/my.cnf. If you want to customize the configuration, it is recommended to create a. CNF file in the / etc/mysql/conf.d directory. The new file can be named arbitrarily as long as the suffix is CNF.

  • Note: if the installation of docker CE reports an error, you can execute the following statement before installation.

  • After installation, you need to add SSH public key in git repository

domain name

Query on domain name related technology b station

Start with how to own personal servers and domain names. In service programmers teach you how to choose personal servers and personal domain names to become IT geeks


Tags: Linux CentOS Docker Alibaba Cloud

Posted on Sat, 25 Sep 2021 13:14:07 -0400 by Shaudh