Aliyun server + nginx deploys the entire process of the front-end project

1. Alibaba Cloud server (Here, Alibaba Cloud server is free for newcomers to experience, but after the free trial for newcomers, they will not be able to enjoy subsequent purchase benefits for newcomers, so I bought Tencent Cloud later)

Step 1: Since the server has been purchased here, the purchase process will not be demonstrated. First, enter the Alibaba Cloud console -> instance , where you can view the running status and public network ip.

Step 2: Set a password for the instance. Note: The password set here will be used in subsequent deployments.

Step 3: You need to configure the security group, such as: 80, 443, etc., by manually adding, otherwise, when you use the public network IP to access, you will not be able to access it.

2. Download xshell and xftp

• xshell download address: xshell
  Click the free authorization page in the figure below to enter and download xshell and xftp. For specific steps, please refer to the free download link of xshell and xftp

• Create a new session window, where the ip is the public network ip in the Alibaba Cloud server, and then click OK
  

• Double-click the name in all sessions, the SSH user name pop-up window will pop up, and the user name is root by default.

• Enter the password entered when the instance was created ( Note: When Alibaba Cloud uses xshell to log in, the password box may be grayed out, and the solution is listed in the fourth point )
  
  . After clicking Confirm, the following figure appears to indicate that the creation is successful
  

• Solve the problem that the password box may be grayed out when Aliyun uses xshell to log in
  

• Here we need to enter the Alibaba Cloud console, console -> instance , click Remote Connection, and then log in. You may be required to set a password here.
  

• Once logged in, enter commands vim /etc/ssh/sshd_config into the session box.
  

• After pressing Enter, press ithe key to edit the following content. Change the last item to yes: PasswordAuthentication yes. Then press esc, then :wqexit and save. Then restart the sshd service systemctl restart sshd.service and log in again At this point, you can already enter the password!!!

3.Installation of nginx

1. Run the following command to install Nginx-related dependencies.

yum install -y gcc-c++
yum install -y pcre pcre-devel
yum install -y zlib zlib-devel
yum install -y openssl openssl-devel

2. Run the wget command to download Nginx 1.21.6.

You can directly obtain the URL of the installation package of the corresponding version through the Nginx open source community, and then download the Nginx installation package to the ECS instance through wget URL. For example, the download command for Nginx 1.21.6 is as follows:

wget http://nginx.org/download/nginx-1.21.6.tar.gz

3. Run the following command to decompress the Nginx 1.21.6 installation package, and enter the folder where Nginx is located.

tar zxvf nginx-1.21.6.tar.gz
cd nginx-1.21.6

4. Check the platform installation environment.

./configure --prefix=/usr/local/nginx

5. Compile the source code

make && make install

6. Execute the following command, and then enter the public network ip into the browser, as shown in the figure below, it indicates that the service is successful

/usr/local/nginx/sbin/nginx

If the following situation occurs, the port is occupied.

Check the running status of the service:

ps -ef | grep nginx

It can be seen that the port is already running, so the service needs to be stopped: kill 18317
finally restart the service to run:

/usr/local/nginx/sbin/nginx
/usr/local/nginx/sbin/nginx -s reopen

4. Upload static resources

1. Clicking on the icon in the figure will open xftp
   
2. Create an empty folder in the directory /root to store static resources
   
   Here directly copy the front-end packaged project to the newly created folder
   

5. Configure nginx

1. At this time, if you want your front-end files to be accessible, you need to modify the nginx configuration item file. Execute the following command to access the configuration item file:

vim /usr/local/nginx/conf/nginx.conf

2. The content of the configuration item file in xshell needs to be modified as follows, press ito edit:
   
   After modifying the configuration, escexit editing, :wqsave and exit.
   Finally restart the service.