SpringBoot+Vue+Nginx+ssl front and back end separation project deployment

Required for deployment

These things are required to deploy the project on Linux

  1. Domain name: the domain name purchased in Tencent cloud, and the secondary domain name is added to the domain name resolution as the domain name of API. The domain name can be used without;
  2. SSL certificate: it can be applied for free in Tencent cloud. It can apply for SSL certificate for the purchased domain name and the resolved secondary domain name respectively. It is not necessary to purchase the domain name;
  3. Nginx: for details of the installation tutorial, see Baidu ~;
  4. JDK: same as above;

Deploy Vue project

  1. Packaging: opening command line execution in development tools
npm run build
  1. Deployment: after packaging, the dist folder will be generated in the project, and all files in the folder will be copied to the /html folder of the Nginx installation directory
  2. Install SSL certificate: after Tencent cloud applies for a certificate, download it and copy the two files in the Nginx folder to the /conf folder in the Nginx installation directory
  3. Configure SSL: edit nginx conf file
server {
    listen       443 ssl;
    #Domain name or localhost
    server_name  www.xxxxx.cn;
    root   /usr/local/webserver/nginx/html;
    index  index.html index.htm;
    #The following two are certificate files
    ssl_certificate 1_www.xxxxx.cn_bundle.crt;
    ssl_certificate_key 2_www.xxxxx.cn.key;
    ssl_session_timeout 5m;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
    ssl_prefer_server_ciphers on;

    #charset koi8-r;

    #access_log  logs/host.access.log  main;

    location / {
        index  index.html index.htm;
    }
    
    #If you add this configuration, you can https the interface
    #Visit www.xxxxx Cn/api/user/get_ All is equivalent to accessing
    #https:// your IP:8080/api/user/get_all
    location /api/ {
        proxy_redirect off;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        #Interface project address
        proxy_pass http://localhost:8080/api/;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

# another virtual host using mix of IP-, name-, and port-based configuration
# HTTPS server
#
#When accessing port 80, it will be forwarded to port 443 for https access
server {
    listen       80;
    server_name  www.xxxxx.cn;
    return 301 https://$host$request_uri;
}

After the configuration is completed, you can use the domain name to access your project

Deploy SpringBoot project

In IDEA, Maven can be used for packaging. After it is packaged into a jar package, it can be uploaded to the server, and the

java -jar xxx.jar

The command starts. If it is configured above, you can access your interface through the domain name.

Dual Certificate and dual domain name configuration

In the above case, both the access interface and the web page use the same domain name. What if you want to use a different domain name?
Then the use of secondary domain names can solve this problem.
Main domain name: www.xxxxx Cn
Secondary domain name: api Xxxxx Cn
allocation
Or to nginx Conf file

server {
    listen       443 ssl;
    server_name  www.xxxxx.cn;
    root   /usr/local/webserver/nginx/html;
    index  index.html index.htm;
    ssl_certificate 1_www.xxxxx.cn_bundle.crt;
    ssl_certificate_key 2_www.xxxxx.cn.key;
    ssl_session_timeout 5m;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
    ssl_prefer_server_ciphers on;

    #charset koi8-r;

    #access_log  logs/host.access.log  main;

    location / {
        index  index.html index.htm;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}
# HTTPS server
#
server {
    listen       80;
    server_name  www.xxxxx.cn;
    return 301 https://$host$request_uri;
}
    
#API project configuration
server {
    listen       443 ssl;
    server_name  api.xxxxx.cn;
    root   /usr/local/webserver/nginx/html;
    index  index.html index.htm;
    ssl_certificate 1_api.xxxxx.cn_bundle.crt;
    ssl_certificate_key 2_api.xxxxx.cn.key;
    ssl_session_timeout 5m;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
    ssl_prefer_server_ciphers on;

    #charset koi8-r;

    #access_log  logs/host.access.log  main;

    location / {
        proxy_redirect off;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        #Backend project address
        proxy_pass http://localhost:8080/api/;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}
# HTTPS server
#
server {
    listen       80;
    server_name  api.xxxxx.cn;
    return 301 https://$host$request_uri;
}

After the configuration is completed, restart Nginx to access your page and interface with different domain names.
Page: www.xxxxx Cn
Interface: api Xxxxx Cn/api/user/get_ All

Tags: Java Nginx SSL https

Posted by MatrixDancer on Tue, 31 May 2022 03:53:42 +0530