Hi everyone, I'm programmer Fishskin. in September, I was in a state of extreme bursting and managed to finish the latest project I took you all to doInterview Brush-Up Platform 。
When we finish a project, we must remember to put it online so that we can complete the "closed loop" of learning and write it on our resume to be competitive.
Not only did I open source the code for this project, but I also recorded a special episode of the
Code open source:/liyupi/mianshiya-next
Go-live video tutorials:/video/BV1mixreSE6t/
Below is also sharing some key actions for deploying a project through text for you to get a handle on how to go live with your project quickly.
Included:
-
Server initialization
-
Deployment planning
-
Installation of dependencies
-
Back-end deployment
-
Front-end deployment
-
test and verify
I. Server initialization
First buy a server, all major cloud providers have discounts for new users. We recommend light application servers, which provide a lot of out-of-the-box templates that help us pre-install the environment and software, saving time and effort.
Fish skin here to choose a pre-installed Pagoda Linux application of lightweight application server, the configuration of the 2 core 2 G, deployment of our project (core functionality version) enough.However, be sure to note that the operating system, if it is CentOS, must >= 8 or it will not be able to support the front-end deployment of this project!It's usually good to choose the latest version, as shown below:
After purchasing the server, go to the server details page and put through the 8888 Pagoda panel port in the Firewall tab, otherwise you will not be able to access the Pagoda on your own computer.
Go to the Application Management tab and log in to Pagoda. The first time you log in, you need to log in to the server and get the default account password of Pagoda by entering the command as shown in the picture:
After clicking login, go to the web terminal, copy the script and execute it, you will get the initial account password and panel address:
Visit the Pagoda panel, the first time we enter the Pagoda, we will be prompted to install the environment, here it is recommended to install LNMP (including Nginx server), suitable for the deployment of front-end and back-end separation of the project:
II. Deployment planning
Before formally operating the front-end and back-end deployments, we have to do a planning process, such as which projects and services to deploy, which dependencies are needed, which ports to occupy, and so on.
For convenience, both the front-end and back-end of this project are deployed using pagoda panels, which can easily manage the server.
When it comes to specific deployment methods, the front-end should follow the server-side rendering deployment model, based on the run; the back-end can run the jar package directly.
Front-end: forwarded via Nginx, accessed athttp://{domain}The Node service is actually running on port 3000. Since it is a Node service, it actually runs on port 3000.
Backend: forwarded via Nginx, accessed athttp://{domain}/apiThe actual port is running on port 8101. The actual operation is on port 8101.
Why use Nginx forwarding?
This allows the front-end and back-end to access the same domain name, ensuring that there are no cross-domain issues.
After doing the planning, we need to open the service ports in the firewall of the Tencent Cloud console that need to be accessed from outside the network:
III. Installation of dependencies
1、Node environment
Go to Pagoda Panel - Website - Node Project and you will be prompted to install Node Version Manager, click Install:
Then you can use it to install the version, first update the version list, and then select the stable version of > 18. Here Fishskin selects v20.17.0 to install:
2. Database
The Pagoda Panel has automatically installed the MySQL database, so we can use it directly.
First add a database for the backend project. Keep the name of the database the same as the one we need for our project (mianshiya in this case), and pay attention to the username, password, and access rights:
Open the backend project in IDEA and check locally through the database panel that the connection is working:
Execute the script to initialize the library tables and import the initial sample data, then remember to verify that the database tables were created successfully.
3、Redis
In the Software Store in the Pagoda panel, search for and install Redis, just select the default for the version:
Once the installation is complete, you need to configure Redis, enable remote access and configure a password, otherwise we can't connect to Redis from our own computer:
Be sure to reload the configuration after modifying it. Finally, verify in the IDEA Database panel that you can connect locally to the remote Redis:
4. Java environment
To deploy a Java project, you must install the JDK. In the Pagoda panel, you can quickly install the specified version of the JDK by using the following figure.
It is recommended to install several versions, such as JDK 8, 11, 17, which can be switched at any time when you need to use which version.
Next, we perform separate back-end and front-end deployments.Note that since the front-end server-side rendering project will call the back-end interface when deployed, the back-end must be deployed first.
IV. Back-end deployment
1. Modify the configuration and code
modificationsapplication-prod The production environment configuration, including database, Redis, etc., is replaced with the configuration (e.g., username, password) specified above when installing the dependencies.
2、Packaging deployment
Open the backend project in IDEA, ignore the tests and package it:
Package successfully, get the jar package file, need to upload the jar package to the server:
Then add the Java project.Note that the port should be consistent with the configuration of the production environment and that the project execution command should specify the configuration of the production environment!
After successful startup, you can see the status and port occupancy as shown:
However, we are not able to access the interface documentation through a browser at this time because our server firewall does not liberalize port 8101.We're purposely not letting go here.Because in the previous deployment plan, the backend needed to be forwarded through Nginx to resolve cross-domain issues.
3, Nginx forwarding
Create a new site (Nginx), fill in the domain name with the current server IP or your own domain name, and fill in the root directory randomly.
If the access is to a back-end interface (the address has the/api prefix), then Nginx forwards the request to the back-end service. Modify the Nginx configuration as shown:
Once modified, the interface can be accessed on port 80 (which can be omitted).
V. Front-end deployment
1、Modify the configuration
The online front-end needs to request the online back-end interface, so you need to modify the The request address in the document is on the line:
// Create an Axios instance
// Distinguish between development and production environments
const DEV_BASE_URL = "http://localhost:8101";
const PROD_BASE_URL = "http://1.117.71.203";
const myAxios = axios.create({
baseURL: PROD_BASE_URL,
timeout: 10000,
withCredentials: true,
});
2、Packaging deployment
1) Modify the configuration fileIf you are deploying in standalone mode, you don't need to upload the node_modules directory when uploading to the server.
/** @type {import('next').NextConfig} */
const nextConfig = {
output: "standalone",
};
export default nextConfig;
2) Execution defined in the documentbuild command to perform a packaged build.
When building, you may encounter some type errors, which do not affect the operation, but will be detected in the packaging, so you can modify it according to the actual situation. Alternatively, you can just ignore TypeScript errors during packaging. Modify the configuration file:
/** @type {import('next').NextConfig} */
const nextConfig = {
typescript: {
// !! WARN !!
// Dangerously allow production builds to successfully complete even if
// your project has type errors.
// !! WARN !!
ignoreBuildErrors: true,
},
};
export default nextConfig;
After successful packaging, you see the information in the figure below, and you can visualize which pages use static rendering and server-side rendering:
Then a standalone directory is created in the .next directory, which is the front-end package that can be deployed independently.But the directory must be organized according to the following pattern, and there must be no mistakes!
-
Move the public directory from the project root to .next/standalone.
-
Move the .next/static directory into .next/standalone/.next
The organized directory structure is as follows:
Upload all files in the standalone directory to the server (you can create a new mianshiya-frontend directory):
After uploading to the server, add the Node project. Take care to change the startup options (start or customize the command)node ) and project ports (3000):
3, Nginx forwarding
Modify the Nginx configuration to reverse proxy to the service when accessing front-end resources. The configuration code is similar to the back-end reverse proxy:
location / {
proxy_pass http://127.0.0.1:3000;
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 "";
}
Be sure to comment out the following configuration! to allow static resources to be properly reverse proxied.Otherwise there may be an error loading static resources when the page is accessed:
VI. Test validation
Finally, let's validate the on-line results.
Visit the home page, the question booklet page, and the topic booklet page, and they all work fine:
Visit the question bank detail page and it displays normally:
Logging in to your administrator account allows you to access and use the administrative capabilities normally:
ultimate
At this point, the entire project has been completed on-line, I hope you can master the enterprise-level project development, optimization and on-line methodology through this project, to get the full range of programming skills and programmer quality enhancement. If you encounter errors in the online process, do not panic, look at the logs of the front and back end to troubleshooting can be, the video tutorial also gives you an example of troubleshooting problems, it is recommended to watch.
Code open source:/liyupi/mianshiya-next
Go-live video tutorials:/video/BV1mixreSE6t/