1. Buy Aliyun
Ali cloud to buy the steps I will not explain more, tell you about my choice of configuration
To recap, centos is the most commonly used system in the enterprise. As for the version, do not choose too low, as it is too difficult to deal with the Centos 5.x version in the pagoda panel. Here we choose the version of 7.7, because I didn’t take a screenshot when I bought it, I took a new screenshot of the price of the old user, when I bought it, it was 227 yuan for the new user, and then I paid, here omitted 1000 words…
2. Set the root password
Now buy Ali cloud does not seem to set the root password in the purchase process, so when you buy, enter the ECS console page, clickTo view the instance you purchased, click more on the far right, click Password/Key, and reset the instance password.This is a password you need to remember. It’s useful later.
Note: after the password is changed, you need to restart the server.
3. Configure the pagoda panel
3.1 Downloading the Linux Pagoda
Note: Pagoda it is not a real software, but a visual UI page, we click the Pagoda official website home page under the Linux version now install
Jump to the following page:
If you scroll down, you will see a lot of commands. Since we are using centos7.x, we need to use the centos installation command.
Now that we know this command, we can go back to the ECS console and set the password where there is a remote connection operation. Click remote Connection.
Then log in your cloud server, the user name is root, and the password is the password you set before. Remember to restart the server after setting the password, otherwise the password will not take effect. After input, click OK to enter the cloud server. Then enter the command of centos system seen in the pagoda in the command line, and press Enter to execute the command and wait for the download to be completed.
After verifying that the installation is complete, you will eventually see a web address and username and password in the bottom few lines of the command line tool
Note: it is very important that the port number of the url generated here is 8888, but if you directly access it will be rejected, because we still need to do some configuration on Aliyun
We find the security group in network and Security, select the configuration rule on the right, and click add security group rule on the upper right after entering the page
Set the port range to 8888/8888. Then the authorization object is 0.0.0.0/0, now you can access the pagoda, enter the previous URL, enter the pagoda login page
Enter the account and password generated during the remote connection to log in
3.2 Modifying panel Settings in the Pagoda panel
Go to the left panel and modify the Settings to your liking. These Settings will be the url, port, account and password for the next time you open the pagoda.
4. Use the pagoda panel to help us deploy the project
4.1 Uploading project files
First of all, when we log in for the first time, there will be some selection software for us, which can be installed, of course, you can easily uninstall it, you can also choose not to install (I did not choose to install). Then enter the file bar, the system will prompt you to install pure-ftpd, you can install, compile install and speed install the best choice. Once installed, you can go to the files page, where you will see the files directory in your cloud system.
Go to the root directory WWW -> wwwroot and create a folder here. Put the contents of your vue project packaged in the dist folder.Note: the contents of the folder under the wwwroot directory here are the entry points for your project, so you need to place the contents of the dist folder in this folder, as I did.
4.2 Downloading nginx and Modifying the Configuration File
Then go to the app store and download Nginx. Once you’ve downloaded it, click on Settings and find the Server section in the configuration file
Set server_name to the IP address of your cloud server, listen to 80, and root to the address where the file was imported. Now you go to http://ip and you should be able to display your project, but the interface is definitely not available.
4.3 Importing a Database
Next we import the database
Enter the database section and click Add Database. The database name is the database name used by your project, the user name is the same, the password is set to the password used by your database, access permission local server, and click Submit.
Then click import in the middle to import your own database files as required,
After local upload, you also need to manually click the following import, it will prompt whether to overwrite, click overwrite.
4.4 Downloading the PM2 Manager and Configuring the Node Server
Then, since we are using a node.js server, we need to import the node.js server code into a file, also stored in wwwroot. Then install it in the app storePM2 managerAnd I’m gonna go ahead and hit Settings
Select the root directory of your Node server and the entry file. For me, the root directory is WWW /wwwroot/db/ and the entry file is app.js. After that, click Add. Next, in the module Manager section next to it, install the modules you will use in your project, such as Express. Enter a name and click Install. However, there is a huge hole that we need to change where we import modules in Node. We can’t import modules directly by the name of the module. This will cause an error. We find/WWW / / NVM/server versions/node/v12.16.1 / lib/node_modules the directory, copy it, put your the module will be pieced together, introduced the node, as shown in figure:
Note: the address copied here does not have that slash at the end, you have to add it.
Note: Since mysql also has ports, you need to continue to configure the security group for port 3306 in the ECS console as before
After setting this up, start your Node server in PM2 Manager
If your Node startup doesn’t have the same effect as mine, you can click log Management on the left. There is a path at the top of log Management, and you can open it to see if there is a problem.
4.5 Configuring a Reverse Proxy
With this set up, the final step is to set up the reverse proxy
Open nginx Settings, go to the configuration file, and inside the server braces, add this code
Change this address to the address of your node entry file startup server.
Once you’ve done this, you need to change the baseURL in the Axios section of your project’s source code (just change it here if you do). Concatenate three strings of API here, then change localhost to the IP address of your cloud server, here is my configuration
Then restart Nginx, as is required whenever configuration files are modified. You should now be able to access your project from your IP address normally
Github address of Imitation Pinduoduo Project:Github.com/liuyilong83…
Github address of imitation NetEase Cloud Music Project:
Github.com/liuyilong83…
Project Demo Address:
vue_pdd.coderlyl.cn/
vue_music.coderlyl.cn/login
Do is a vue development of the imitation pin Duo duo and imitation network yi Yun project, if you think it is good, can give me a thumbs up!