HUAWEI CLOUD cloud server evaluation pagoda + nginx deploys Springboot and Vue projects at the same time

Series Article Directory

HUAWEI CLOUD server evaluation chapter 1 [linux actual combat] HUAWEI Yunyao cloud server L instance Java, node environment configuration HUAWEI CLOUD
cloud server evaluation chapter 2 [linux actual combat] Unbutnu add SSH Key, start Springboot project
HUAWEI CLOUD cloud server evaluation chapter 3 [ Linux actual combat] Use Vue3, Element-plus menu components to build a carousel map
Huawei cloud cloud server evaluation Chapter 4 [linux actual combat] Pagoda + nginx deploy Springboot and Vue projects at the same time

---

foreword

In the first chapter, we configured the Java back-end environment (JDK, Maven), Vue front-end environment (Node, Npm) in the cloud service, and configured the git code management tool; in the second chapter, add to
github After obtaining the SSH Key, pull the Springboot project code from the cloud server and start it;
in Chapter 3, pull the Vue project code from the cloud server and start it;
in this chapter, we describe the pagoda operation and maintenance tool and nginx of Huawei Cloud Service The use of the service proxy function mainly solves the problem of deploying Springboot and Vue projects at the same time.

---

content overview

1. Find the pagoda service entrance, find the pagoda login name, password, bind the pagoda account, and install nginx; 2.
Configure the terminal environment in the pagoda;
3. Use the [software store] of the pagoda, find nginx, and find the html directory of nginx , Huawei cloud service is: /www/server/nginx/;
4. Use Pagoda’s [terminal] to package and compile the Vue project, and copy the contents of the packaged dist folder to [/www/server/nginx/html], At this point, you can see the home page of Vue's museum management system;
5. At this time, the Springboot project will be deployed. We use the agent forwarding port method to modify the nginx configuration, add path mapping under port 80 monitoring, and map to port 8080;
6. Modify the yml file of Springboot, configure port 8080 and start the service. At this time, you can see the home page of the csdn quality query system.

---

1. Find the pagoda service entrance, find the pagoda login name, password, and bind the pagoda account

1.1. Log in to HUAWEI CLOUD service and enter [Console]

On the [Overview] page of the [Console], find [My Resources] - [Cloud Server], click the mouse to open the [Cloud Server] page on the right; click the name of the cloud service to enter the cloud service detail page

1.2. Cloud server details page

On the server details page, you can see that there is a pagoda image, which means that this server comes with a pagoda operation and maintenance tool

1.3. Search [Pagoda Initialization], click on [Initialization Pagoda Panel - Yunyaoyun Server L instance]

Search [Pagoda Initialization], jump to the page: https://www.huaweicloud.com/s/JeWuneWhlOWIneWni-WMliU,
click [Initialize Pagoda Panel - Yunyao Cloud Server L instance]

1.4, follow the article operation, enter the pagoda panel

1.4.1. Configure the security group of the pagoda, and add port 8888 to the entry rule

1.4.2. Log in to the server terminal to obtain the login name and password of the pagoda

Log in to the cloud server and run the sudo cat /credentials/password.txt command line to obtain the user name and password of the pagoda management interface. You can see that the administrator user name is administrator.

You can also log in to the cloud server and run the cd /www/server/panel && btpython tools.py panel passwd administrator command to directly set the administrator password. Among them, "passwd" is the password of the administrator administrator. For example, cd /www/server/panel && btpython tools.py panel abc123456 administrator means that the password of the administrator administrator is abc123456.

1.4.3. Access the pagoda in the browser

Address: http://elastic public network IP:8888
In [1.2, cloud server detailed page], you can find [elastic public network IP]

1.4.4. Access the pagoda in the browser

Enter the username and password obtained in Step 1, and click Login.

After logging in, if the following prompt appears, please click "No account, register for free" to register on the official website of Pagoda.
After registering on the Pagoda official website, enter the registered mobile phone number and password here to log in to the Pagoda panel.

Install the base composition software.
Please select Nginx in LNMP (because the memory is only 2G, you only need to install nginx), set all other options to [Not selected], select [Extreme installation], select [One-click installation] on the LNMP side, and wait for the installation until Finish.

2. Configure the terminal environment in the pagoda

Add the host information in the terminal of the pagoda, fill in the [server IP] and [password], and the second time it will automatically enter without password;

3. Use Pagoda's [Software Store], find nginx, and find the html directory of nginx

Use Pagoda's [Software Store], find nginx, and find the html directory of nginx. The nginx directory of Huawei Cloud Server is: /www/server/nginx/
conf: the configuration file html is stored in it
: the static resource file is stored in it

---

4. Use Pagoda's [Terminal] to package and compile the Vue project

Use Pagoda's [terminal] to package and compile the Vue project, and copy the contents of the packaged dist folder to [/www/server/nginx/html]

4.1. Check [Chapter 3], use npm run build to package and compile the Vue project

4.2. Copy the contents of the packaged dist folder to [/www/server/nginx/html]

Use the cp or mv command to move the files/folders under dist to the [/www/server/nginx/html] directory

4.3. At this point, you can see the home page of Vue's museum management system

Access address: http://139.159.230.49/
The picture is not optimized, it is stored in the cloud server, and the service is provided through the cloud server traffic, so the loading is relatively slow

---

5. At this time, the Springboot project is going to be deployed. We use the proxy port forwarding method to modify the nginx configuration, add path mapping under port 80 monitoring, and map to port 8080

5.1, nginx configuration to homepage management

In [Software Store], configure nginx as [Home Page Display]

5.2. Click [nginx service] from the home page

5.3. In [nginx Management], switch to [Configuration Modification]

Modify [server] on line 68, modify the listening configuration on port 80, and then click [Save]

	server
    {
    
    
        listen 80;
        server_name http;
        index index.html index.htm index.php;
        root  /www/server/nginx/html;

        #error_page   404   /404.html;
       

        location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
        {
    
    
            expires      30d;
        }

        location ~ .*\.(js|css)?$
        {
    
    
            expires      12h;
        }

        location ~ /\.
        {
    
    
            deny all;
        }
        
        location /csdn
        {
    
    
            proxy_pass http://localhost:8080;
        }
       
        access_log  /www/wwwlogs/access.log;
    }

5.4. In [nginx Management], switch to [Service]

First [reload configuration], then [restart] service

5.5. At this point, the nginx forwarding configuration has been completed

It can be seen [5.3] code area, path/csdn under port 80 of this machine, proxy port 8080 of this machine

server
{
    
    
    ......
	location /csdn
	{
    
    
	    proxy_pass http://localhost:8080;
	}
}

---

6. Modify the yml file of Springboot, configure port 8080 and start the service

6.1, find the yml configuration file

In the file, enter the place where the project stores the yml configuration file: /home/java/code/csdnQc/src/main/resources

6.2. Double-click the [application.yml] file to compile the port

6.3, recompile the project

6.3.1. Quickly open the root directory of the project

6.3.2, compile the project

Enter the command: mvn clean package

6.3.3. Check whether the Java project has been started

ps -ef | grep java
If there is one, use the kill -9 command to kill the Java process

6.4. Start the project in background mode

nohup java -jar spiderX-0.0.1-SNAPSHOT.jar >log.file 2>&1 &

6.5. At this point, you can see the csdn batch quality query system

Enter the address in the browser to access the csdn batch quality query system
Address: http://139.159.230.49/csdn/static/index.html

---

Summarize

The above is what I want to talk about today. This article introduces how to install nginx, modify nginx configuration, configure nginx local agent, use terminal, compile Vue project, run Vue project, compile Springboot project, run Springboot project, etc. in Ubuntu system. . The Vue project and the Springboot project can be deployed and run at the same time when the cloud server only opens port 80, and other more services can also be configured in an agreed way.