Deployment record of angular + spring boot project

preface

The log system online test needs to deploy the project to the server. I will share my implementation process below.

Vomit bad: let the epidemic end early. It's too hard to live in isolation.

Connect server

Select tool

ssh

I only heard about SSH at the beginning, so I didn’t think of SSH at first. My first reaction was to check it. What I found out was to use SSHfinder(MAC OS), fortunately, the teacher stopped me in time and didn’t do too much useless work.

SSH introduction:
Full name:Secure Shell(secure enclosure protocol)
Simple understanding: add a shell to your network transmission to ensure the safety of the transmission process.
Installation:mac Os，linux，win10（1803And later) all support SSH protocol.
Verification method:sshTwo methods for verification can be referred to (understood):Two authentication methods of SSH

Basic commands:

1. Connect to the server:
(1) No specified port: SSH [email protected] Example: SSH testu[email protected]Server.com
(2) Specified port: SSH-pport [email protected] Example: SSH – P 4200 testu[email protected]Server.com （p(in lowercase)

2. Upload local files to the server:
(1) No specified port: SCPyourLocalFilePath [email protected]:serverPath
Example: SCP/Users/test/Downloads/stop.sh testU[email protected]Server.com:/usr/home/log/app/log/api
(2) Specified port: SCP-P port yourLocalFilePath [email protected]:serverPath （P(in words, the same below)
Example: SCP-P 3306 /Users/test/Downloads/stop.sh testU[email protected]Server.com:/usr/home/log/app/log/api

3. Upload the local folder to the server:
(1) No port specified: SCP – RyourLocalFilePath [email protected]:serverPath
Example: SCP – R/Users/test/Downloads/stop.sh testU[email protected]Server.com:/usr/home/log/app/log/api
(2) Specified port: SCP-P port -r yourLocalFilePath [email protected]:serverPath
Example: SCP-P 3306 -r /Users/test/Downloads/stop.sh testU[email protected]Server.com:/usr/home/log/app/log/api

Project deployment

Two main parts:Angular + Springboot

The first: angular deployment

Two episodes:pack + upload

1. Packing

Enter the corresponding front desk project executionng build, we will see an additional dist folder in the foreground project, as shown in the following figure:

2. Upload

We just need todistThe folder with the same name as the foreground item under the folder can be uploaded, as shown in the following figurewebfolder:

Corresponding SCP upload command example: SCP-P 2209 -r /Users/test/log/web/dist/web testU[email protected]Server.com:/usr/home/test/app/test

The second: springboot deployment

withAngular：pack + upload, but more database establishment.

1. Packing:

The packaging of springboot should be relatively simple. You can directly use its ownspring-boot-maven-pluginPlug in. For details, please see Mr. Liao Haifeng’sSpringboot application packaging

Command:mvn clean package
After executing the command, the target folder is added, as shown in the following figure:

The author is usingmvnThe command has not been recognized. It is found that there is no such command after checking. However, the fact that my project can run also shows that I have Maven package. Finally, it is found that:

But there is no environment variable configured in the current login user. Because no history was foundmavenThe installation position of the package is determined to passbrewReinstall, and the results are reported as follows:

So he stubbornly went on, finally gave up and downloaded it manually. PeriodbrewAnd reassembled it, and as a resultnginx，mysqlThere’s nothing left. Fortunately, the configuration is still there.

2. Upload

To be packagedjarThe file can be uploaded to the server, as shown in the figure above ☝️ bylog-app.jar。 Specific upload command referenceAngularUpload.

3. Establish database

My stupid operation ❌： I started by connecting directly to the servermysqlThe silly operation was asked to use by the teachernavicat。

Direct usenavicatEstablish connection with servermysqlConnect to operate the database of the server.
I won’t talk more about establishing a database because it’s relatively simple.

Nginx settings

Give aDemo:

server {
    listen 8081;
    server_name xxx.xxx.com;

    location / {
       root /home/test/app/log/web;
       try_files $uri $uri/ /index.html;
   }

   location /test/ {
        proxy_pass http://127.0.0.1:8089/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
   }
}

Basic commands:
nginx -tView configuration
nginx -s reloadReload nginx

It’s done? I feel like I don’t poke the needle. ✌️

It’s too early to be happy ❗

Is this the end? It’s reasonable to say yes. It runs the backstage (front desk) happilyjsCan be executed directly), enabled successfullynginx, you can run anywhere.

But when it comes to the students, they test:
Senior, 502 ♿。 After my own test, I found that as long as I disconnected from the server, the background will no longer run.
Fortunately, this problem is easy to solve:
Just let him run in the background:nohup java -jar test.jar

summary

promote:
1、 The first is the improvement of data access ability,
2、 The ability to solve problems, search keywords is very important, and solving problems is the process of constantly approaching the search keywords.

Insufficient:
Anxiety is an old problem, but I believe it will get better a little bit