Server project deployment summary (super detailed)

Series Article Directory

Linux operating system notes [super detailed]

This article mainly introduces how to deploy the separated front-end and back-end projects to the Alibaba Cloud server from four parts: preparation, project development, project packaging, and project deployment, and play your own projects on the server.
The final rendering of the project: enter ip to access! ! !

Insert picture description here

Article Directory



Preface

The approximate steps of the deployment process are as follows:

Insert picture description here

1. Preparation

1. Aliyun server (Linux CentOS 7.3 64bit)
2. Install Xshell and Xftp connection tools and successfully connect to the server.
3. Install JDK, Mysql, Redis, Tomcat, Nginx and other environments on the server, and ensure that the installation is successful!
4. After Mysql is successfully installed, use Navicat connection tool to connect to Mysql on the server.
5. After the Redis installation is successful, use the RedisDesktopManager connection tool to connect to the Reids on the server.

2. Project development and debugging

The deployed project is a small project that I did before, the Vue+SpringBoot front-end and back-end separated project.
1. Execute the SQL script to create a table on the server mysql.
2. Modify the Mysql connection configuration. Modify the Mysql database url, username, and password in the configuration file application.yml to configure the database on your actual server.
3. Modify the connection configuration of Redis. Modify the host, password and other connection information cached by Redis to configure Redis on your actual server.
4. Run the test locally. Start the front-end and back-end projects to ensure that the project runs successfully.

Three, project packaging

1. Front-end project construction and packaging. Switch to the project root directory and execute the following command.

npm run build:prod

Note: After the build and package is successful, it will be recorded in the root distdirectory to create a folder, which is to build the packaged front-end project file!
2. Build and package the back-end project. For convenience, Spring Boot has its own Tomcat application server, so the project will be packaged as an executable jar package by default.
Switch to the root directory of the project, the implementation mvn packagecan build packaging commands. Building completion and implementation of the package jar 包is located in targetthe folder.

Four, project deployment

1. Front-end deployment. Use the Xftp tool to upload the packaged dist folder of the front end to the server /usr/local/webfolder.
Modify the Nginx configuration file nginx.conf. Located in the directory, /etc/nginx

Insert picture description here


modify the configuration as follows:

# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/

user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid  /run/nginx.pid;

# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024;
}

http {
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 2048;

    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;

    # Load modular configuration files from the /etc/nginx/conf.d directory.
    # See http://nginx.org/en/docs/ngx_core_module.html#include
    # for more information.
    include /etc/nginx/conf.d/*.conf;

    server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  118.31.187.5;
     #  root         /usr/share/nginx/html;

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
           root   /usr/local/web/dist;
           try_files $uri $uri/ /index.html;
           index  index.html;
        }
      location /prod-api/ {  # 反向代理到后端工程
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://localhost:8088/;
        }


     #     error_page 404 /404.html;
    #     location = /404.html {
    #    }

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
            root html;
        }
    }

# Settings for a TLS enabled server.
#
#    server {
#        listen       443 ssl http2 default_server;
#        listen       [::]:443 ssl http2 default_server;
#        server_name  _;
#        root         /usr/share/nginx/html;
#
#        ssl_certificate "/etc/pki/nginx/server.crt";
#        ssl_certificate_key "/etc/pki/nginx/private/server.key";
#        ssl_session_cache shared:SSL:1m;
#        ssl_session_timeout  10m;
#        ssl_ciphers HIGH:!aNULL:!MD5;
#        ssl_prefer_server_ciphers on;
#
#        # Load configuration files for the default server block.
#        include /etc/nginx/default.d/*.conf;
#
#        location / {
#        }
#
#        error_page 404 /404.html;
#        location = /404.html {
#        }
#
#        error_page 500 502 503 504 /50x.html;
#        location = /50x.html {
#        }
#    }

}

The changes are as follows:

  location / {
           root   /usr/local/web/dist;
           try_files $uri $uri/ /index.html;
           index  index.html;
        }
 location /prod-api/ {  # 反向代理到后端工程
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header REMOTE-HOST $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://localhost:8088/;
        }

Execute the following command to reload Nginx to make it effective.

nginx -s reload

2. Back-end deployment. Use the Xftp tool to package the completed package jar包and upload it to the server /usr/local/webdirectory.
Use the background method to start the back-end project.

nohup java -jar xx_web.jar >/dev/null 2>&1 &

Note: Alibaba Cloud servers need to configure security groups and support port access; for example, ports 80, 8080, 3306, 6379, etc.


test

In the address bar of the browser, visit the IP to enter the background management system! ! !