Note on the Spring Boot+Vue separated project deployment

Preface:

This is the first time for me to deploy the local project to the cloud server because the teacher of the Project required it to go online. There were many problems during the deployment. Finally, the project was successfully deployed and put online.

1. Apply for and configure a cloud server

Log in ali Cloud, purchase Ali Cloud ECS, beginners choose one-click configuration (select centos Linux server).

Configuring a security group:

Add front-end, back-end, and database ports to the security group configuration. The default value of mysql is 3306, and the authorization object is 0.0.0.0/0

The configuration is complete.

2. Modify the project configuration

[1]. Front-end projects

Modify the localhost of baseURL in main.js and all places related to localhost to the public IP address of ali Cloud server applied, using terminal command

npm run build
Copy the code

After packaging, the project generates dist folder, and the front-end project is packaged.

[2]. Back-end projects

Modify the localhost in the database configuration (properties.yml file) to be the public IP address of the aliccloud server applied, modify the POM files of each sub-project and parent project, and add the following configuration:

<package>jar</package>
Copy the code

Note: The advantage of packaging projects in jar package is that, different from the traditional WAR package packaging method, when the project is uploaded to the cloud server, the project packaged with JAR package can be run without additional downloading and configuration of tomcat server (The JAR package comes with Tomcat).

After rebuilding the entire project, use the operation button in the Maven sidebar of IDEA tool and follow the order of clean->compile->package->install. After completion, generate XXx. jar under the target folder of the project, which is the packaged project file. The back-end project is packaged.

3. Upload the project to the cloud server

[1]. Download the latest version of Xshell terminal simulation software

After the installation is successful, open it, add the server IP address in Host, and create a session:

Connection session:

Enter the user name and password as prompted to log in and remotely connect to the Aliyun server.

[2]. Install file transfer software Xftp

It is used to visualize files on the cloud server, reducing Linux commands. After the installation, create a session, add the host, user name, and password, and click OK.

[3]. Upload project

Generally, create a folder in the usr directory of the cloud server and transfer the packaged dist folder and JAR packages of the back-end project to this folder.

4. Configure the cloud server

[1]. Front-end Nginx configuration

Download the nginx package (ending with tar.gz) from the Linux official website, upload it to the Aliccloud server, and run the following command to decompress the nginx installation package (change the nginx version based on the downloaded version) :

The tar - ZXVF nginx, version 1.8.1 -. Tar. GzCopy the code

Enter the nginx-1.8.1 directory:

CD nginx, version 1.8.1 -Copy the code

Make compiles to install it:

./configure
make
make install
Copy the code

Install zlib library

CD ~ wget http://www.zlib.net/zlib-1.2.11.tar.gz tar -zxvf zlib-1.2.11.tar.gz CD zlib-1.2.11. /configure make make installCopy the code

Install the SSL

yum -y install openssl openssl-devel
Copy the code

Installing pcre

yum -y install pcre-devel
Copy the code

Basic operations of the Nginx service

Start the service:

/usr/local/nginx/sbin/nginx
Copy the code

Nginx is a public IP address of your server. If you can open a page like this, nginx has started successfully.

Restart the service:

/usr/local/nginx/sbin/nginx -s reopen
Copy the code

View services:

ps -ef | grep nginx
Copy the code

View the configuration:

vim /usr/local/nginx/conf/nginx.conf
Copy the code

Conf file (search for the file whereis xxx.conf and edit the file using the Linux command: CD to the directory where the file is stored and then use vim xxx.conf). Take the Fitnesshub-vue project as an example and add the following configuration:

server { listen 9000; server_name www.fitnesshub.com; #charset koi8-r; #access_log logs/host.access.log main; location / { root /usr/myproject/dist; autoindex on; index index.html index.htm; Try_files $uri $uri/ /index.html; }}Copy the code

Nginx.cnf is configured as follows:

http { include mime.types; default_type application/octet-stream; #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 logs/access.log main; sendfile on; #tcp_nopush on; #keepalive_timeout 0; keepalive_timeout 65; #gzip on; server { listen 9000; server_name www.fitnesshub.com; #charset koi8-r; #access_log logs/host.access.log main; location / { root /usr/myproject/dist; autoindex on; index index.html index.htm; try_files $uri $uri/ /index.html; } #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; } # proxy the PHP scripts to Apache listening on 127.0.0.1:80 # #location ~ \.php${# proxy_pass http://127.0.0.1; #} # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 # #location ~ \.php${# root HTML; # fastcgi_pass 127.0.0.1:9000; # fastcgi_index index.php; # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name; # include fastcgi_params; #} # deny access to .htaccess files, if Apache's document root # concurs with nginx's one # #location ~ /\.ht { # deny all; #} } # another virtual host using mix of IP-, name-, and port-based configuration # #server { # listen 8000; # listen somename:8080; # server_name somename alias another.alias; # location / { # root html; # index index.html index.htm; # } #} # HTTPS server # #server { # listen 443 ssl; # server_name localhost; # ssl_certificate cert.pem; # ssl_certificate_key cert.key; # ssl_session_cache shared:SSL:1m; # ssl_session_timeout 5m; # ssl_ciphers HIGH:! aNULL:! MD5; # ssl_prefer_server_ciphers on; # location / { # root html; # index index.html index.htm; # #}}}Copy the code

After editing, use Esc to exit the editing mode and save the configuration. Run the :wq+ Enter command or qa! + Enter Exits the file editing screen

Reload the configuration file:

You need to reload the configuration file after modifying it

/usr/local/nginx/sbin/nginx -s reload
Copy the code

The nginx.conf file is now configured.

Access the server IP address and see your project.

[2]. Back-end project configuration

Download JDK 1.8 from the official website (Linux version), upload it to the cloud server, and decompress it:

tar -zxvf jdk-8u151-linux-x64.tar.gz
Copy the code

Configure the JAVA environment:

vim /etc/profile
Copy the code

Add the following:

Export JAVA_HOME=/usr/ Java /jdk1.8.0_151 (use your JDK directory instead) export CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar export PATH=$PATH:$JAVA_HOME/binCopy the code

perform

source/etc/profile
Copy the code

Viewing the Installation

java -version
Copy the code

Get things done.

Then install mysql for Linux

OS :Centos 7.4 MySQL version: MySQL 5.7

Logging In to the Server

1. Download the database

cd usr/local/src/
wget https://repo.mysql.com//mysql57-community-release-el7-8.noarch.rpm
Copy the code

2. Install mysql

yum -y install mysql57-community-release-el7-8.noarch.rpm
Copy the code

3. Check the mysql installation

yum repolist enabled | grep mysql.*
Copy the code

4. Check mysql Server

yum install mysql-community-server
Copy the code

5. Start mysql

systemctl start mysqld
Copy the code

Set boot autostart:

systemctl enable mysqld
systemctl daemon-reload
Copy the code

Then log in to MySQL

Obtain the default password and run

grep "A temporary password is generated for root@localhost" /var/log/mysqld.log
Copy the code

My password here is s9vmy4eOPc.p

Log in mysql

mysql -uroot -p
Copy the code

Enter the initial password and run the following command to change the password:

ALTER USER 'root'@'localhost' IDENTIFIED BY 'your password'; ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'your password';Copy the code

Note: the password after Mysql8.0 must contain lowercase letters, special symbols, numbers

The setting succeeded.

through

exit; 
Copy the code

Command to exit MySQL and log in again with the new password

Modify the my.cnf file configuration

use

whereis my.cnf
Copy the code

or

After the implementation of the path which the mysql above plus -- verbose -- help | grep - A 1 'Default options' can see my. The path of the CNFCopy the code

Find the file location and then

Vi/XXX /my.cnf(/etc/my.cnf)Copy the code

If the initial file is as follows, you do not need to configure it. If the initial file is not as follows:

[mysqld] # # Remove leading # and set to the amount of RAM for the most important data # cache in MySQL. Start at 70% of  total RAM for dedicated server, else 10%. # innodb_buffer_pool_size = 128M # # Remove leading # to turn on a very important data integrity option: logging # changes to the binary log between backups. # log_bin # # Remove leading # to set options mainly useful for reporting servers. # The server defaults are faster for transactions and fast SELECTs. # Adjust sizes as needed, experiment to find the optimal values. # join_buffer_size = 128M # sort_buffer_size = 2M # read_rnd_buffer_size = 2M datadir=/var/lib/mysql socket=/var/lib/mysql/mysql.sock # Disabling symbolic-links is recommended to prevent assorted security risks symbolic-links=0 log-error=/var/log/mysqld.log "/etc/my.cnf" 27L, 960CCopy the code

Upload the SQL database file to the cloud server and execute it

First, package the SQL file locally (select export), then upload the packaged SQL file (fitnesshub.sql as an example) to the/TMP directory.

Run the following command in mysql to import the SQL file:

Create database fitnesshub use Fitnesshub set names UTf8MB4 source/TMP /fitnesshub.sqlCopy the code

Then the screen will continue to roll, and finally prompt import success.

MySQL5.7 Setting remote access

Select database

use mysql;
Copy the code

Enable remote connection root username % All users can access password password

GRANT ALL PRIVILEGES ON *.* TO 'root'@'%' IDENTIFIED BY 'your password' WITH GRANT OPTION;
FLUSH PRIVILEGES; 
Copy the code

or

create user 'root'@'%' identified with mysql_native_password by 'your password';
grant all privileges on *.* to 'root'@'%' with grant option;
flush privileges;
Copy the code

Restart mysql service

service mysqld restart
Copy the code

If you still can’t connect remotely after the above steps, check whether the firewall on the server is enabled

service iptables status
Copy the code

If the firewall is enabled, disable it

service iptables stop
Copy the code

Alternatively, open the firewall to open port 3306

Firewall-cmd --zone=public --add-port=3306/ TCP --permanent firewall-cmd --reloadCopy the code

Change the default encoding of mysql database to UTF8MB4

Modify /etc/my.cnf configuration file and add encoding configuration under [mysqld] as follows:

character_set_server=utf8mb4
init_connect='SET NAMES utf8mb4'
Copy the code

Mysql > restart mysql server

systemctl restart mysqld
Copy the code

Mysql > select * from mysql;

show variables like '%character%';
Copy the code

This is where you can connect remotely.

Mysql > create remote connection

Create a mysql connection in Navicat and enter the public IP address, account (root) and password of the aliyun server to remotely log in.

5. Run the deployed project

[1]. Start of front-end project

The front-end project is reverse-proxied by nginx to the sbin directory in the nginx installation directory

Run the following command:

./nginx -c /usr/local/nginx/conf/nginx.conf
Copy the code

Description:

Low the/usr/local/nginx/conf/nginx. Conf is your own nginx. Conf.

● The -c parameter specifies the path to the nginx configuration file to load.

How does Linux restart Nginx?

Restart smooth:

1. Go to the sbin directory in the nginx installation directory

2. Run the following command:

./nginx -s reload
Copy the code

The front-end project was started and completed

[2]. Back-end project start

Run the command:

java -jar xxx.jar
Copy the code

Then press Enter to see the startup status of the project in Xshell.

If multiple services need to be enabled, run the Linux command and press Enter

Linux command to keep the project always running on the cloud server

nohup java -jar xxx.jar &
Copy the code

Closing the Java process

Ps Query the process ID

Ps - ef | grep your jar package nameCopy the code

Two processes will then be displayed. Select the one with xxx.jar (usually the first).

Kill the process

Kill -9 Your Java process numberCopy the code

End of 6.

At this point, the spring Boot and VUE back-end separation project has been successfully deployed on the cloud server. You can log in to the public IP address and the front-end project port number to access the deployed project.

Finally, attach the Linux command daquan address: www.linuxcool.com

This article and article Segmentfault community synchronous update: segmentfault.com/a/119000004…