Front-end and back-end project development notes-environment construction (1)

1. Download the code from https://gitee.com/renrenio/renren-security

1. Project description

• renren-security is a lightweight, front-end and back-end Java rapid development platform that can quickly develop projects and deliver [private work tools]
• A permission system developed using SpringBoot, Shiro, MyBatis-Plus, Vue3, TypeScript, Element Plus, Vue Router, Pinia, Axios, and Vite frameworks, with a very low threshold and ready to use. From the beginning of the design, we paid great attention to security, protecting enterprise systems and making everything so simple.
• A code generator is provided. You only need to write about 30% of the code, and the rest of the code is automatically generated by the system, which can quickly complete the development task.
• Supports mainstream databases such as MySQL, Dameng, Oracle, SQL Server, PostgreSQL, etc.
• Demo address: http://demo.open.renren.io/renren-security (account password: admin/admin)

2. Has the following characteristics

• Friendly code structure and comments, easy for reading and secondary development
• Realize the separation of front-end and back-end, and perform data interaction through tokens. The front-end no longer needs to pay attention to back-end technology.
• Flexible permission control can control pages or buttons to meet most permission requirements.
• Provides CrudService interface to encapsulate additions, deletions, modifications and queries, making the code more concise
• Page interaction uses Vue3.x, which greatly improves development efficiency.
• Complete department management and data permissions, and control of data permissions through annotations
• Complete XSS prevention and script filtering to completely eliminate XSS attacks
• The complete code generation mechanism can generate entity, xml, dao, service, vue, and sql codes online, reducing development tasks by more than 70%.
• Introducing quartz scheduled tasks, which can dynamically complete tasks such as adding, modifying, deleting, pausing, restoring, and viewing logs.
• Introducing the Hibernate Validator verification framework to easily implement back-end verification
• Introducing cloud storage services, already supported: Qiniu Cloud, Alibaba Cloud, Tencent Cloud, etc.
• Introducing swagger document support to facilitate writing API interface documents

3. Data permission design ideas

• User management, role management, department management, can operate the data of this department and sub-departments
• Menu management, scheduled tasks, parameter management, dictionary management, system logs, no data permissions
• Business functions, query and operate data according to user data permissions [You can also query personal data without the data permissions of this department]

4. Project structure

renren-security
├─renren-common public model
│
├─renren-admin admin station
│ ├─db SQL script
│ │
│ ├─modules model
│ │ ├─job Fixed time appointment
│ │ ├─log Nisshi management
│ │ ├─oss 文品存储
│ │ ├─security Safety model
│ │ └─sys family management (core)
│ │
│ └─resources ├─renren-ui Vue3 front end process │ │ └─generator.properties Generator, placement Text │ ├─application.yml All-station placement statement │ ├─template Generator model board (possible addition and modification) │ ├─mapper MyBatis statement │ └─resources ├─renren-generator generator │ ├─renren-api API service │ │ │ └─application.yml all-station placement statement │ ├─public quiet resource
│ ├─mapper MyBatis statement

5. Technology selection:

• Core framework: Spring Boot 2.7
• Security Framework: Apache Shiro 1.12
• Persistence layer framework: MyBatis 3.5
• Timer: Quartz 2.3
• Database connection pool: Druid 1.2
• Log management: Logback
• Page interaction: Vue3.x

6. Software requirements

• JDK1.8
• Maven3.0+
• MySQL8.0
• Oracle 11g+
• SQLServer 2012+
• PostgreSQL 9.4+
• Dream 8

7. Local deployment

• Download source code via git
• Idea and eclipse need to install the lombok plug-in, otherwise it will prompt that the get set method of the entity cannot be found.
• Create the database renren_security, the database encoding is UTF-8
• Execute the db/mysql.sql file under renren-admin to initialize the data
• Modify the application-dev.yml file under renren-admin and update the MySQL account and password.
• In the renren-security directory, execute mvn clean install
• Eclipse and IDEA run AdminApplication.java to start the project [renren-admin]
• renren-admin access path: http://localhost:8080/renren-admin
• swagger document path: http://localhost:8080/renren-admin/doc.html
• Restart the front-end project, the front-end address is: https://gitee.com/renrenio/renren-ui [renren-ui has been merged into the renren-security warehouse, the warehouse address is: https://gitee.com /renrenio/renren-security
  First npm install and then npm run dev】
• Account password: admin/admin

8. Online deployment, public network access

8.1. Use cloud server

You can rent a cloud server to build your own project, and then configure the public IP address and port number for access. The public IP provided by the cloud server allows users to access your project through the Internet, but you need to pay attention to network security and server performance.

There are generally two types of server purchases:

1. Go to a computer mall/online mall to buy a server, and then deploy it to your own computer room. The server is actually an upgraded version of a personal computer, but the cost is generally expensive, ranging from hundreds of thousands to millions, plus broadband fees. , dedicated maintenance in the later stage, generally individuals, small and medium-sized companies are not recommended to purchase and use, because the cost is indeed a bit high, except for local tycoons
2. Purchasing a cloud server is more reliable and cost-effective, and the cost is reasonable. Easy to use and efficient, it is the best choice for personal webmasters. This article focuses on how to purchase and use cloud servers. Cloud servers (Elastic Compute Service, ECS) are simple, efficient, safe and reliable , computing services with elastically scalable processing capabilities. Its management method is simpler and more efficient than physical servers. Users can quickly create or release as many cloud servers as they want without purchasing hardware in advance.

8.2. Use of DNS services

The domain name can be resolved to the IP address of the project through the DNS service. Users can access the project through the domain name, which is more friendly and convenient than directly using the IP address.

1. Domain name explanation and source

Domain name (English: Domain Name), also known as a network domain, is the name of a computer or computer group on the Internet consisting of a string of names separated by dots. It is used to control the computer during data transmission. Location identifier (sometimes also referred to as geographical location).
Since IP addresses are inconvenient to remember and cannot display the name and nature of the address organization, people designed domain names and mapped domain names and IP addresses to each other through the Domain Name System (DNS). , making it easier for people to access the Internet without having to remember a string of IP addresses that can be directly read by machines.

2. Domain name registration and purchase

Log in to the Tencent/Alibaba domain name registration page, check whether the domain name has been registered, and then purchase it.

3. Domain name registration

You can refer to Tencent’s registration process. Because the registration process is relatively complicated, I will not explain it here. It is enough to look at the link below
Registration link: https://cloud.tencent .com/product/ba

8.3. Using a reverse proxy

When the project is running on the local network, a reverse proxy can be used to forward requests to the local project address. This can be achieved using the reverse proxy function of a web server such as Nginx or Apache.

8.4. Use intranet penetration tools

The intranet penetration tool can access projects in the local network through the public network. For example, you can use intranet penetration tools such as ngrok and peanut shell to map local projects to the public network, allowing users to access local projects through the public network.

It should be noted that when using the public network to access local projects, you need to pay attention to network security issues, especially when using cloud servers, you need to strengthen the security defense of the server, otherwise you will be vulnerable to network attacks and malicious access.

8.5 Use ngrok this time

The following example uses ngrok:

1.Official website registration

Official website address: https://ngrok.com/
tips:若使用邮箱注册自行认证

2. Download the compressed package of the corresponding deployment computer

Unzip the downloaded ngrok compressed package and enter the command prompt window in the corresponding directory (you can also directly enter cmd in the display bar at the top of the corresponding directory and press Enter or right-click in the blank space of the directory and "Open in Terminal");

3. Execute deployment

Tips: Note that subsequent ngrok commands that need to be executed need to be executed in the locally decompressed ngrok directory.

After entering the command prompt window, execute the (Add Account Information provided by the official website) command to add your own account information.

Execute the command to expose your local corresponding service port to the public network to achieve penetration.

ngrok http 8001

authentication failed: Your account is limited to 1 simultaneous ngrok agent session.

You can run multiple tunnels on a single agent session using a configuration file.

To learn more, see https://ngrok.com/docs/secure-tunnels/ngrok-agent/reference/config/
ERR_NGROK_108
Ngrok crashed and reported a 108 error,

Solution:
Check the following link:
https://stackoverflow. com/questions/51865000/ngrok-killing-a-tunnel-from-windows-7-command-line

我采用了这个方案，成功了

After penetration, an external access address will be provided, allowing the external network to access your locally deployed services.

并且登录成功

4. Fixed domain name

After completing the above three points, you can achieve external network access. However, there will be a problem that the access address will be inconsistent every time it is started. At this time, you need to go to the official website to complete the relevant configuration.

Enter the configuration page and add a new domain name

Copy the fixed domain name to complete local deployment (you can also use the configuration file)

After copying the configuration, press ctrl+c on the command prompt page to stop the previously deployed intranet penetration locally and execute the copy command.

ngrok http --domain=promoted-one-loon.ngrok-free.app 8001

This completes the fixed domain name operation

5. Front-end and back-end project penetration

If you start the front-end and back-end projects locally and need to penetrate the external network, how to achieve it (one is that you can configure nginx or other gateways, here you can only penetrate this gateway; or follow my following processing method) .
Previously, I only configured the front-end penetration, but did not configure the front-end and front-end penetration together.

View the official website documentation: https://ngrok.com/docs/secure-tunnels/ngrok-agent/reference/config/

First check the configuration file address, use the command ngrok config check

to modify the configuration file (add the following configuration on the existing basis, and add two tunnels at the front and back ends)

tunnels:
  frontdemo:
    proto: http
    addr: 8001
    #domain: wxn.test.com
  backdemo:
    proto: http
    addr: 8080
    #domain: wxn.test.com
    # inspect: false

Start tunnel (command prompt window execution)

#前后端都启动
ngrok start --all
#只启动前端/后端
ngrok start frontdemo
ngrok start backdemo

Click visit site to go to the page

The actual request backend is still local:
http://localhost:8080/renren -admin/login

6. In actual online use, you only need to configure the gateway or the front-end port of nginx to be exposed to the external network to ensure network security.