Deployment and online process of front-end and back-end separation projects - and error resolution

Requirement: I just want to upload the front-end and back-end projects I wrote. It is no longer only accessible locally, but other people can also access my project, so as to record it so as not to forget it later. The article is very long and detailed. I go online by myself I will also post any errors I encounter. It is recommended to read it.

1. First buy a server

Because I have the privilege of being a student, I just prostituted a free server for a month, and I can get a total of 7 months, but I have to take an exam ==, I will leave you speechless after passing the exam, just click the link below. , Alibaba Cloud, Tencent Cloud, etc. can be essentially the same

Alibaba cloud student privileges free cloud server for 7 months

For the student server, there are only two regions. I chose Heyuan here , and the other default options are fine.

After buying ---------------------- click on the console in the upper right corner

Then click on the upper left corner to select the cloud server to see the server you bought

 If you are not a student but buying for the first time , you can directly select the product in the upper right corner - cloud server ecs. If you are an individual, it is recommended to choose this way

 

 

 

Notice! ! ! The account password configured above, take a text and remember it, it will be used when configuring xshell 

The change is as shown in the picture above, and other default options are fine, and then click to buy. After the purchase is successful------click the upper right corner to enter the console---click the upper left corner to select the cloud server ecs, if you don't know how to read the beginning of the article flow chart. click to see

 After clicking the example, you can see the cloud server you bought in the picture below. Remember where I typed the code, and then copy the public network ip address. + (public) after the ip is the public network ip

 2- Download Xshell, download pagoda in xshell

Xshell官网:NetSarang Homepage CN - NetSarang Website https://www.xshell.com/zh/

 After that, just fill in the account and password. It doesn’t matter and there are no restrictions. You can download it after filling it in. The installation is very simple and you don’t need to configure anything. Just pay attention to the download path, open xshell, the steps are as follows

 then click confirm

 3. Use xshell to install the pagoda

After copying the first one, paste it directly behind the number # in the above picture, right-click and select Paste--Enter to start downloading ------ An option pops up and directly select y------If there is still a choice---- It will download automatically after a few seconds

Pagoda panel download, free all-round server operation and maintenance software (bt.cn)

 

 After the pagoda is installed, it will display as follows. I copied this. The address of the external network panel on my side is like this. The serverip is your own public network ip. Just replace this directly: it is recommended to add the external network and internal network address and user name Passwords are copied and saved

External network panel address: http://SERVE:IP:13762/awhe1

 1----------Open the external network address, pop up, and just copy the above username and password values ​​into it. After entering, first register an account and bind it. There should be a home page, first Otherwise, you need to verify something after binding

The first time you enter, a pop-up window will appear first, download all directly

4. Create a database in the pagoda and bind the local database

Pay attention to the picture below, the database name, username and password are all set the same, easy to change and match, set the access permission to everyone, set the utf-8 format - and finally click submit to complete.

 

Click the backup import button --- pop-up window --- click upload from local --- click select file --- select your .sql database file --- click upload- ---Close the first pop-up window-------Click to import------Close the pop-up window-------Test whether the import is successful

 

 

Click the tool to see if the import is successful. If the import is not successful, there will be no file display

 

 5. The local database is connected to the database of the pagoda, and the synchronous modification operation is performed

After the connection is connected, the synchronous modification is realized. It is as simple as that. The port number must be consistent with the value of the port connection in the background.

 

 6. Open ports - both Pagoda and Alibaba Cloud must be opened, otherwise they may not be accessible

Pagoda's ports open --- open 8889 and 3306

 Aliyun open port ----- click configuration rules as shown in the figure below

 Just select 1 as the priority, the highest priority is

 7. Back-end project upload pagoda

Click on the file, find the default file under wwwroot, click upload on the left ------After uploading the packaged back-end file-----After the list is decompressed, it will be as shown below

 1-------Modify the interface address of the backend to the ip address of the public network. My side is the modification of the default.json file under the config folder. The following coded addresses are all changed to the ip address of the public network , the port number is 8889, database and user, and password are all changed to the account password of the database uploaded on the pagoda.

 Modify the listening port number of the app.js file and change it to port number 8889

 8. Download the pm2 startup project

Find the software store in the menu bar - search and download - after the download is complete - open the home page to display the switch

 Find pm2 in the software on the home page, open it and add the project

 If the startup is successful, it is as follows

 8-Use postman to test whether the interface request is successful

Protocol + public network ip + port number 8889, if there is a response, the request is successful

 Notice! ! ! ! Some projects report an error 502 problem when requesting, which is caused by the back-end project not writing a reverse proxy, csdn search and write it and it’s over

9. Front-end project configuration package upload

1- First add the site in the pagoda

The root directory hangs the address where the front-end files are stored under wwwroot, that is, the http folder. Other defaults, if you don’t buy a domain name, just copy the public IP into it, such as 132.1232

 

 2- After the site is added, click on the file ----- you will find an additional html folder under wwwroot

The default request address of the front-end project is changed to the ip address of the public network, and the others remain unchanged

 Use npm run build to start packaging ---------

Package and generate dist file-------compress dist file-------upload the compressed dist file to the http folder-------decompress dist file----- --Click the dist file and cut all the content inside to the html directory, as shown below

 10. Enter the project address on the website

The address is: http://public network ip

There is no need for a domain name here, and you can access it directly from the public network ip

This is the end of the article, I hope it will help you~~~

Guess you like

Origin blog.csdn.net/qq_44278289/article/details/130704428