Welcome to visit personal blog website: www.zhuxin.club
1. Project structure
Blog.js + React Hooks + Antd + Axios
Service: back-end service for the blog project, using the egg.js technology stack.
Admin: blog backend management system, using the stack of create-react-app + React Hooks + Antd + Axios.
Files: Directory for storing static resources (such as uploaded images) used by blogs.
Github address of the project
2. Prepare for the deployment
2.1 Purchasing a Cloud Server
Go to Ali Cloud (take Ali cloud as an example below), Tencent cloud and other cloud service platforms to buy cloud server ECS. The specific purchase configuration depends on the size of their own projects. Generally speaking, the configuration of 1 core CPU, 2 gb memory and 1 MB bandwidth is sufficient for personal projects.
You will get a server instance and a public IP address (your server’S IP address). Today’s websites are actually accessed after we enter the url and perform DNS domain name resolution, that is, after turning to the corresponding public IP address.
2.2 Purchasing a registered domain name
Still go to Alibaba Cloud, Tencent Cloud or any other place where you can buy a domain name to pick up an available domain name and buy it. After domain name purchase, real-name authentication, domain name resolution (binding public IP address to your domain name), website domain name ICP record and public security network record are required. For details, refer to the use and record guidance of domain name purchase platform for operation. Only after the completion of the website domain name ICP record can make the domain name can access the corresponding public IP, that is, your website can be accessed by the public. Website domain name record review generally takes a long time (10-30 days), you can wait for the project deployment at the same time, and then after the domain name application, you can modify part of the configuration.
Additional information about domain names:
Take www.baidu.com as an example. Strictly speaking, baidu.com is a domain name (unique in the world). The domain name is bound to the public IP address of the server one-to-one. And WWW is just a host name, a domain name can have multiple hosts, such as zhidao.baidu.com, tieba.baidu.com.
3. Set up the server environment
3.1 Connecting to the Server
On Windows, we use Xshell (Linux command line operation tool) to connect to the server, and enter the public IP address and server instance password to create a connection session. As shown below:
After successfully connecting to the server, you can go to the command line interface (CLI) of the server (root directory by default).
3.2 Environment Construction
3.2.1 Mysql Database
Since the database used for the blog project’s local development is the egg-mysql plug-in, we need to configure the mysql database:
Mysql > install mysql
sudo dnf install @mysql
2: Set mysql to start automatically upon startup.
sudo systemctl enable --now mysqld
Mysql > set password and security
sudo mysql_secure_installation
Note: When setting whether to allow root to log in remotely, it is recommended to set no (enter n) so that we can operate mysql remotely.
Mysql > select * from ‘mysql’;
mysql -uroot -p
Then enter the password to enter the MSQL operating environment.
Mysql > restart mysql
sudo systemctl restart mysqld
Mysql > select * from ‘SQL’;
Switch the database using the use database name, and then run the following command:
Source Absolute address of the SQL file
We can import our local database structure and data into the server mysql, where the absolute address of SQL file can be obtained by PWD.
Ps: SQL files can be exported locally by using navicat tools and then transmitted to the server.
3.2.2 Installing the Node Environment
Since our blog projects are developed and run on a Node environment, we need to install Node on a Linux server.
1: Install the NVM.
NVM (Node Version Manager) is a bash script for Node management that allows you to manage multiple node.js versions. With NVM, you can install or uninstall any version of Node.js that you want to use or test. Use the following command to install the NVM. Be careful not to use sudo, as this will cause the root user to enable the script.
The curl - o - https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.0/install.sh | bash
2: Install node:
NVM Install Node or NVM Install Node version
You can install multiple versions of Node multiple times and view the installed versions of node through NVM LS, as shown in the following figure:
The line with the arrow is the version of Node.js used in the current shell session. Default is the default node.js version when you open a new shell session.
3: Switch the current Node version:
NVM Use Version number
Such as the NVM use v14.13.1
4: Switch to the default Node version:
NVM Alias Default Version
Such as NVM alias Default v14.13.1
After installing and setting up the Node version, you can use NPM and Node as you would in a Windows environment
3.2.3 installation PM2
PM2 is a Node application process manager with load balancing function. Can run in the background, it is mainly used to guard the Node process. We’ll use it later when we run the project, and we’ll explain more. After installing the Node, run the following command to install the PM2:
npm install pm2 -g
3.2.4 install Nginx
Nginx is a high-performance HTTP and reverse proxy Web server, which is often used to configure project process port listening, interface proxy forwarding, and server static resource path. The details will be explained later when the project runs and configures. Use the following command to install Nginx:
sudo yum install nginx
Start nginx and set it to boot:
sudo systemctl enable nginx
sudo systemctl start nginx
Restart the nginx:
nginx -s reload
4. Project deployment
4.1 Uploading Code
We use Xftp tool mainly for server and local file transfer and editing operations. Similar to Xshell, a link session is created by entering a public IP address and an instance password, as shown below:
We can then transfer the folder of our project code from local to any path in the server directory (it is not recommended to put it in the root directory, there may be some file permissions issues).
Because our previous project code was written based on the local development environment, some configured connection IP port (such as database, back-end service) is basically localhost: XXXX. Therefore, before the code is uploaded to the server, we can create a special IP port configuration JS file in the appropriate position of the code and export it, and then carry out different IP port configuration by judging the current code environment (online or development). Instead of writing localhost as in the development environment, you can import it directly where you need to refer to the IP port.
4.2 Running Projects
Before running a project, make sure that node_modules dependencies for each project are successfully installed.
2 running blog
Back in Xshell, go to the Blog folder (front End project directory) and use the PM2 installed above to start and daemon the project process. Why use PM2 to control project execution instead of script commands originally configured in the project? After starting with the original script command, the process will be destroyed when we disconnect from the server. So, to keep the site always accessible, wouldn’t we have to keep our computers on and connected to the server at all times? This is obviously unreasonable! The PM2 startup daemon is designed to solve this problem. Common PM2 commands are as follows:
1: Create, start and daemon a Node project process:
Pm2 start NPM --name User-defined process name -- run start
Note: Once you create a new process and name it, it will remain permanently in the list of available processes unless you delete it.
2. View information about all created processes.
pm2 list
3: Displays detailed information about the specified process.
Pm2 show Process ID
The process ID is the unique id generated when a process is created. You can query the process id by running the pm2 list command.
4: Start all/specified created processes:
pm2 start all
Pm2 start INDICATES the id of the process
5: Restart all/specified created, running processes:
pm2 reload all
Pm2 reload PROCESS ID
6: Delete all/specified created processes:
pm2 delete all
Pm2 ID of the delete process
7: Stop all/specified created, running processes:
pm2 stop all
Pm2 Stop PROCESS ID
4.2.2 to run the service
Switch to the Service folder path first. After successfully running the blog front-end project, you need to start the Service, the back-end service, to provide interface data support. Since the back-end service is developed by egg.js, it is worth mentioning that the egg-scripts command built into the framework does not require a PM2 daemon, as explained in the official figure below. So we can start and stop the back-end services directly on the server by executing NPM start or NPM stop.
Supplementary notes:
By default, the mysql database does not allow direct connection through public IP addresses. Therefore, the egg-mysql configuration is still configured with the local IP port (localhost:3306) for both the online environment and the development environment, and the connection is successfully implemented with the nginx configuration for the online environment. See the nginx configuration section below.
Holdings to run the admin
Switch to the admin folder path first. The blog’s admin project is built with the create-React-app scaffolding. Since it is packaged to generate static resource files based on production, we need to use Nginx to configure its server access path, more on that later. Before that, we can run NPM run build to package the static resource files used in the production environment. By default, the static resource files are generated in the bulid folder of admin.
4.3 Nginx configuration
4.3.1 Preparing for the Configuration
Nginx will configure port listening for each project. Please make sure that some necessary server ports (such as the default port 80 on the homepage and the mysql database port 3306) are available. Take Ali Cloud as an example, its port configuration is set through the server instance-security group rule configuration. In addition, we should also open some ports (port numbers can be customized) for nginx to configure port proxy forwarding for each project process.
4.3.2 Configuration Description
Even if the above projects are successful, we still have to know how to access the corresponding page in the browser, which is where Nginx comes in. The default path for nignx configuration files is /etc/nginx/nginx.conf. We open the file, do a basic configuration and give a detailed description of the configuration items. As shown in the following example:
# blog configuration
A server corresponds to a port listening configuration
server {
#listen Set the listening port (indicates the configuration when accessing http://public IP address: listening port)
listen 80 default_server;
listen[: :] :80 default_server;
# Server_name Optional, your domain address (such as www.baidu.com), listen should be set to port 80 after this configuration. Because domain names are accessed through port 80 by default, you can configure proxy forwarding in the lower part. This server configuration is used to access this domain name
server_nameDomain name address;Root is the default server absolute path for accessing the public IP address + the current listening port. This parameter is used to access static resources
rootThe absolute path to the project file;#
# Load configuration files for the default server block.
Configure the proxy forwarding address when accessing the current domain address or IP port
location / {
For example, if we want to use the IP port of the blog project process when we want to access the current domain name, we can configure the IP port in the following proxy-pass.
proxy_passProxy forwarding address;# for example http://127.0.0.1:xxxx
proxy_set_header Host $host;
}
# or
location / {
For example, our admin project production environment should access the index.html entry file in the corresponding packaged static resource directory when accessing the home page.
charset utf-8;
The index. HTML file is set to the root directory and is concatenated to the root directory
index index.html ;
}
http://public IP :80/ BBB (http://public IP :80/ BBB)
location /aaa {
The IP port of the back-end service used here for general configuration of cross-domain interface requests
proxy_passProxy forwarding address;# for example http://127.0.0.1:xxxx
proxy_set_header Host $host;
}
http://public IP :80/ BBB (http://public IP :80/ BBB)
location /bbb {
The IP port of the back-end service used here for general configuration of cross-domain interface requests
proxy_pass http://127.0.0.1:7001;
# configure the path to the page that encounters various errors (the current project is generally not used)
error_page 404 /404.html;
location = /404.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
Copy the codeAfter the configuration is saved, execute nginx -s reload to restart niginx for the configuration to take effect.
Nginx configuration takes a bit of time for beginners to debug, so here we will try and do the necessary data queries.
After completing the configuration and passing the access, our initial server deployment process is basically over, and what we need to do afterwards is the maintenance of the project.