Hello everyone, I am programmer Yupi. The big project "Intelligent Collaborative Cloud Library" that I have been working on for more than 2 months is finally completed!
In order to allow more students to participate in learning, I directly put all the codeComplete open source ！
Open source warehouse:/liyupi/yu-picture
Sharing the source code is not enough. I also recorded a set of video tutorials to quickly put the source code online:/video/BV1akwGeSERK, the introduction of this project, front-end and back-end deployment methods, and project function demonstration are all in this video~
However, although the code is open source, the project’s video tutorials + text tutorials + resume writing methods + interview question solutions are only for
The following is a text tutorial for launching the intelligent collaborative cloud library project. It is recommended to use it in conjunction with the previous video tutorial.
The focus of this section is project deployment and online, which can be learned independently. I hope everyone can master this method of quickly launching projects online.
include:
-
Server initialization
-
Deployment planning
-
Install dependencies
-
Backend deployment
-
Front-end deployment
-
Test verification
-
Expand knowledge
1. Server initialization
First buy a server. New users of major cloud service providers are relatively cheap. It is recommended to look at it first.
It is recommended to choose a lightweight application server, which provides many out-of-the-box templates and helps us pre-install the environment and software, saving time and effort.
Yupi here chooses a lightweight application server pre-installed with the Pagoda Linux application, configured with 2 cores and 2 G, which is enough to deploy our project. Generally, just choose the latest version for application templates, as shown below:
Pagoda Linux is a visual Linux operation and maintenance management tool that provides many functions to help us manage servers and is suitable for small and medium-sized teams or individuals to learn and use.
After purchasing the server, enter the console and you can see the new server information. Be careful not to actively expose the public IP!
Click on the server to enter the details page, and open the 8888 Pagoda panel port in the firewall tab. Otherwise, you will not be able to access the Pagoda on your own computer.
The new version of lightweight application server has automatically opened this port for us. Otherwise, you need to manually add a firewall rule:
Enter the application management tab and log in to the pagoda.
When logging in for the first time, you need to log in to the server first and obtain the Pagoda default account password by entering a command, as shown in the figure:
After clicking to log in, enter the web terminal, copy the script and execute it:
According to the information output by the terminal, access the pagoda panel and enter the initial username and password:
When entering the pagoda for the first time, we will be prompted to install the environment. It is recommended to install LNMP (including Nginx server), which is suitable for deploying projects with front-end and back-end separation:
When entering the pagoda panel for the first time, remember to change the panel account password (you must log in again after each modification):
2. Deployment planning
Before formally operating the front-end and back-end deployment, we must first make a plan, such as which projects and services are to be deployed, which dependencies are required, which ports are occupied, etc.
1. Get the source code
The code of this project is open source:/liyupi/yu-picture
It is recommended that novices learn and deploy the yu-picture-backend directory and use the traditional layered architecture:/liyupi/yu-picture/tree/master/yu-picture-backend
Students with certain experience can learn to deploy the yu-picture-backend-ddd directory and use DDD domain-driven design:/liyupi/yu-picture/tree/master/yu-picture-backend-ddd
But the deployment methods of the two architectures are the same~
2. Deployment plan
In order to improve efficiency, both the front-end and back-end of this project are deployed using the Pagoda panel, which can easily manage the server.
When it comes to the specific deployment method, the front-end must follow the deployment mode of the Vue project and run based on Nginx; the back-end can directly use Pagoda's Java project manager to run the jar package.
Programming Navigation in Fish Skin
3. Address planning
Front-end: Forwarding through Nginx, the access address ishttp://{domain name}。
Backend: Forwarding through Nginx, the access address ishttp://{domain name}/api. Actually runs on port 8123.JDK recommended to choose version 17!
Why use Nginx for forwarding?
The front-end and back-end domain names are consistent to ensure that there will be no cross-domain problems.
Nginx: Server port 80, installed by default.
Database: Server port 3306, installed by default.
Redis: Server port 6379, requires manual installation.
4. Things to note
After planning, we need to open service ports that require external network access in the firewall of Tencent Cloud console, such as MySQL and Redis:
3. Install dependencies
1. Database
The Pagoda panel has automatically installed the MySQL database, which we can use directly.
Start by adding a database to your backend project. The database name should be consistent with the database name required by our project (here mianshiya), pay attention to the user name, password and access permissions:
Open the backend project in IDEA and check locally through the database panel whether the connection is normal:
Execute the script and initialize the library table:
Remember to verify whether the database table is created successfully, as shown below:
2、Redis
In the software store of Pagoda Panel, search and install Redis:
Just select the default version:
After the installation is complete, we need to configure Redis, enable remote access and configure a password, otherwise our own computer will not be able to connect to Redis:
After modifying the configuration, you must reload the configuration to take effect:
Finally, verify in the IDEA database panel whether the local can connect to the remote Redis:
3. Java environment
To deploy a Java project, the JDK must be installed. In the Pagoda panel, you can quickly install the specified version of JDK as shown in the figure below. Here we first install JDK 17:
It is recommended to install several more versions, such as JDK 8, 11, and 17. You can switch at any time when you need to use which version.
4. Other services
for example
If you do not know how to activate it, you can activate COS object storage through the tutorial in Chapter 4 and activate Alibaba Cloud Bailian AI in the tutorial in Chapter 9.
Note that you need to add the cross-domain configuration of the server IP (or the actual access front-end domain name) to the object storage, otherwise the image will not be loaded correctly when editing the image.
Next, we proceed with backend and frontend deployment respectively.
4. Backend deployment
1. Modify configuration
Reviseapplication-prodThe production environment configuration, including database, Redis, object storage, Alibaba Cloud Bailian AI key, etc., is replaced with the configuration specified when installing dependencies (such as user name and password).
Note that for performance, you must turn off the log of MyBatis Plus; for security, you must set a username and password for the Knife4j interface document.
The reference configuration is as follows:
# Online configuration file
# @author <a href="/liyupi">Programmer Fish Skin</a>
# @from <a href="">Programming Navigation</a>
server
2. Package deployment
First change the packaging configuration of the file and delete the main class configurationskipConfigure to package:
<build>
<plugins>
<plugin>
<groupId></groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<version>${}</version>
<configuration>
<mainClass></mainClass>
<skip>true</skip>
</configuration>
</plugin>
</plugins>
</build>
Open the backend project in IDEA, ignore tests and package:
The packaging is successful and the jar package file is obtained:
Upload the jar package to the server. For convenience, it is placed in the web root directory:
Then add the Java project,In the project execution command, the configuration of the production environment must be specified!You can also adjust the memory as needed:
After successful startup, you can see the status and port occupation as shown below:
If you find that the startup fails, you need to observe the log first. The following picture is just an example:
However, we currently cannot access the interface documentation through the browser:http://81.69.229.63:8123/api/
This is because our server firewall does not open port 8123.Here we deliberately don’t let go, because in the previous deployment plan, the backend needed to be forwarded through Nginx to solve the cross-domain problem.
3. Nginx forwarding
Create a new Nginx site, fill in the current server IP or your own domain name as the domain name, and fill in the root directory as you like (as long as it does not contain Chinese):
If you are accessing the backend interface (the address is/apiprefix), Nginx will forward the request to the backend service, and the corresponding configuration code is as follows:
location /api {
proxy_pass http://127.0.0.1:8123;
proxy_set_header Host $proxy_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_buffering off;
proxy_set_header Connection "";
}
However, for this project, HTTP forwarding configuration alone is not enough! The backend also needs to provide a WebSocket connection, so it must also forward WebSocket, and then add the following configuration to Nginx:
# Proxy WebSocket connection (specifically used for WebSocket requests)
location /api/ws {
proxy_pass http://127.0.0.1:8123;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_buffering off;
proxy_read_timeout 86400s;
}
Modify the Nginx configuration as shown:
After modification, you can access the interface through port 80 (can be omitted).
Be sure to comment out the following configuration!Otherwise, when accessing the interface document, there may be errors in loading static resources. Because the browser loads resources from the local cache instead of dynamically requesting resources.
5. Front-end deployment
For front-end deployment, please refer to Vite official documentation:/guide/
It is divided into three steps: modifying configuration, packaging and deployment, and Nginx forwarding.
1. Modify configuration
The online front-end needs to request the online back-end interface, so it needs to be modified.The request address in the file is online:
// Distinguish between development and production environments
const DEV_BASE_URL = "http://localhost:8123";
const PROD_BASE_URL = "http://81.69.229.63";
//Create Axios instance
const myAxios = axios.create({
baseURL: PROD_BASE_URL,
timeout: 10000,
withCredentials: true,
});
In addition, since this project uses WebSocket, it needs to be modified simultaneously.WebSocket connection address in the file:
const DEV_BASE_URL = "ws://localhost:8123";
const PROD_BASE_URL = "ws://81.69.229.63";
const url = `${PROD_BASE_URL}/api/ws/picture/edit?pictureId=${this.pictureId}`
2. Package deployment
1) Refer to Vite official website, atdefined in filepure-buildOrder:
{
"scripts": {
"dev": "vite",
"pure-build": "vite build",
"build": "run-p type-check \"build-only {@}\" --",
}
}
Why is there obviously alreadybuildOrdered, we still have to define it ourselvespure-buildWhere are the orders?
Because the scaffolding is built-inbuildThe command will perform type checking. If there are any type irregularities in the project code, the packaging will fail!
Although you can fix the types one by one by yourself, it will affect the efficiency too much and the gain outweighs the loss, so a cleaner build command is introduced.
2) Executionpure-buildcommand to execute the package build.
Note that if the version is lower, the build will fail. In this case, you can go to
After the build is successful, you can get the static files for deploymentdistTable of contents:
Upload all files in the dist directory to the server (you can create a new yu-picture-frontend directory). When there are many files, it is recommended to compress them locally first, upload the compressed package to the server, and then decompress it. As shown in the picture:
3. Nginx forwarding
Generally speaking, users cannot directly access files on the server and need to use Nginx to provide access to static files.
Modify the website directory configuration of the existing site to point to the front-end file root directory:
Then access the server address (or the domain name configured by yourself) to open the front-end website:
However, it has been verified that if you currently access other pages besides the homepage (such as /add_picture), if you refresh the page, a 404 error will occur.
This problem is because Vue is a single-page application (front-end routing), and the packaged file only has, the corresponding page file (such as /add_picture.html) does not exist on the server, so forwarding needs to be configured in Nginx. If a page file cannot be found, the home page file is loaded.
Modify the Nginx configuration and add the following code:
location / {
try_files $uri $uri/index.html /;
}
As shown in the picture:
After saving the configuration, refresh the page again and you can access it normally.
6. Test verification
Finally, let’s verify the online effect.
1) User registration and login
Then by modifying the database, set the user's role to administrator to use more functions.
2) Enter image management => Batch create image page, grab a batch of images as the initial data of the website
3) Enter the homepage and view the public gallery
4) Create a private space
5) Upload some pictures to the private space through file upload and URL upload:
6) View the pictures in the private space and try various search functions (such as searching by color):
7) Use the AI image expansion function to edit pictures (based on
8) Create a team space
9) Add a member to the team and set the role to "Editor"
10) Upload a picture to the team space, and then let 2 members enter editing at the same time:
If the image cannot be loaded normally during editing, it may be because the object storage does not have cross-domain configuration. Just supplement the configuration.
7. Expand knowledge
Let me share another way to deploy the backend faster. You can use Docker + Docker Compose to quickly deploy the backend dependencies and the backend project itself.
Docker container technology can be understood as an image when installing an operating system or an installation package when installing an APP. As long as the Docker configuration file is defined, services or projects can be quickly started based on the configuration.
Docker Compose can combine and orchestrate multiple Docker containers and quickly start multiple services or projects in sequence.
We provide you with an example Docker Compose configuration file that defines the startup of MySQL, Redis and Spring Boot projects. You can customize and modify it based on this file:
# Docker Compose file, used in Spring Boot projects, depends on MySQL and Redis
version
After you have the configuration file, you can use the Docker capability that comes with the Pagoda panel to deploy the project. Interested students can try it:
Programming Navigation in Fish Skin
at last
At this point, the entire project has been completed and launched. I hope that through this project, everyone can master the development, optimization and launch methods of enterprise-level projects, and improve all aspects of programming skills and programmer literacy.