Following the previous article, I put the developed system in the Alibaba Cloud server and successfully launched it.
01 Preface
After the previous article, the last time I wrote an article on how the back-end system built by the front end is connected to a local database or an online database, but all the projects we develop cannot be run locally, so we have to put it Put it on the server so that others can also access it through your public network address. It was quite strenuous today. After encountering several pits, I will tell you how to solve these problems.
But if you want to put the project on the server, you must have a server that belongs to you, otherwise there is no way to do it. If you do n’t have one, you can go to Alibaba Cloud to buy one. The student price is relatively cheap, which is more than 100 a year. Here I recommend that you must play with how to operate the server. It is also one of the necessary skills as a front-end. Without further ado, start.
02 Connect to the server
First of all, we will connect after purchasing the server. You can find online content about how to purchase and configure. It is a very simple operation.
We can choose a connection tool, I chose FinalShell here, you can also choose other. We first open the software to create a new link, enter the server's public IP and password and you can connect.
Since most of the servers use linux system, everyone must know some linux instructions to facilitate file operations. There are only a few commonly used instructions, and complex ones are basically not used. As a beginner, we can understand.
- cd into a certain folder, you can enter multiple levels, such as cd var / www /
- ls check which files or folders are in the current folder
- pwd check your current location
- vim xxx edit the xxx file, enter i after editing, you can edit, press the exit key (esc), then enter: wq to exit and save
- cat xxx View this file xxx
After understanding these, you can start server deployment. In fact, it is a relatively simple operation, but there are some instructions to delete. Delete operation, suitable for entry and those who are accustomed to window.
03 File upload
After connecting, it is basically similar to the operation of the window. You choose a location to put your project. I usually put it under var / www. You can also choose any location you like, just remember where to put it.
Path introduction problem
Before uploading, we need to package your project and execute npm run build to package the project. This is what you need to do when your project is online. Generally, we usually use npm run dev to start a local server. But you have to change some things before packaging, otherwise your project will not be accessible after you put it on. Where to change?
We have a config folder under the project root directory, which contains an index.js configuration file, modify the value of assetsPublicPath under dev, such as:
dev: {
env: require('./dev.env'),
port: process.env.PORT || 7999,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: './',
proxyTable: {
'/api': {
target: 'http://localhost:3000/api',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},
What we usually develop is '/', now we have to change it to './'. This value indicates the relative path of the referenced resource in index.html after your project is packaged. I have to say that I actually stepped on this pit before, but I could n’t summarize it before, and I did n’t have the habit of summarizing. Now I know the benefits of blogging. If I step on this pit again in the future ... No, not in the future Yes.
Static resource reference
After we package the project, a dist folder will be generated under the root directory, and then we can take a look at the contents, except for a static and an html file. This is a single-page application, and only one export is exported in the end.
We can modify the index.js file under the server folder that we wrote earlier. We used the express framework before, so we added:
const path = require('path');
app.use(express.static(path.join(__dirname, '../dist')));
The meaning here is that we introduce the content of the static file, if we do not refer to our project, it will not start, and no page will be displayed.
Nginx proxy problem
Our online website is for others to see, so we set up a proxy so that all requests can be directed to your project address. Before we configure it, we must first install the nginx server. It is relatively simple on the server. Of course, your server must also have a node environment. One line of commands:
npm install -y nginx
Then after the installation is complete, we will go to its configuration file to see, the default path is under /etc/nginx/nginx.conf, we do not need to change. We can check it through the cat command. If you want to configure it, use the vim command. Here we use the vim command to go in and find the server, like my configuration here:
server_name is your IP address, you can also write your domain name, but you need to have domain name related configuration and resolution, we will ignore it for now. Then we saw the location here, where you wrote your project, and I put it under var / www / vue-admin. After the modification, we exit and save. Restart the nginx server, otherwise the configuration may not take effect:
service nginx restart
After this configuration, we can find your project every time you access the public IP + port (default port 80), and your project will be displayed. To sum up, we are actually wandering between writing bugs and finding bugs.
04 Start project
Do n’t worry, we configured some things above, but the project has not been started yet. What we need to do is install the relevant dependencies first. We upload the package.json file of the project to the same level as the dist folder, and then execute npm install. If the installation is not successful or the network speed is very slow, you can switch to the domestic Taobao mirror:
npm install --registry=https://registry.npm.taobao.org
This process may take a little time. After the installation is complete, we enter the server folder, execute node index.js to start our service, it will connect to the database, we can use the written interface to query the database. It is worth noting that we cannot use a local database connection, because your database cannot be accessed online. It is best to install a mysql server on the server and import the data into it. This part is also relatively simple. Just one click.
After the project starts, we can enter your ip + port to access your project, such as 12.56.567.789:3000. Because it defaults to port 80, my port is already occupied, so I use port 3000, which is the port 3000 that the server monitors after starting. Here you can change it to something else, but you also need to change when you visit .
There may be students ’server ports that are not open, which leads to unsuccessful project operation. We can go to the Alibaba Cloud console to find out the security group configuration and open your port. Because it is more troublesome every time. All ports are open.
If there is no accident, we can see your own project, if there are errors or other things, you can look at the browser console. But here we will have a problem, that is, if we shut down the server, our server service will stop, which is not okay, my page can not be hung like this forever. So we use a relatively cow thing pm2, called the process to wait.
05 pm2
To be honest, when I first heard about this thing, I felt quite powerful, because I hadn't touched it, and it sounded something too. In fact, when you use it, you will feel the same principle as installing an npm package.
First of all, it must be used to install the operation, and it is also a simple command to get it, execute the following command under the / directory:
npm install -g pm2
Then add it to the environment variable, we can do this:
vim /etc/profile
Add at the very bottom of the file:
export NODE_HOME=/root/node-v8.9.1-linux-x64
export PATH=$PATH:$NODE_HOME/bin
After exiting and saving, recompile this file:
source /etc/profile
So far we have done the installation and configuration process of pm2, and then we will start our project happily. Under the server folder, enter the following command:
pm2 start index.js
We found that even if we closed the window, the program worked perfectly. So far our configuration and all procedures have been completed, and everyone should have successfully completed their projects.
06 Summary
In fact, recalling the whole process, it is a bit cumbersome to say that it is simple, but this is always an operation we have to try. When I first contacted, I did n’t even have basic commands, but it ’s okay, just follow the tutorial and slowly , Anyway, you can reinstall it if it is broken. Computer classmates should toss about this cumbersome configuration, because you will be in touch later, exercise in advance.
If we successfully implemented it from the beginning, I think you are no longer a little white, but you have become a server veteran. If you are interested in the server, you can learn more about linux-related instructions. In the future, it is not impossible to switch to an operation and maintenance engineer.
