There are many online tutorials written a lot of things, novices may be a bit confused, now I write this article is to better help novices, how to deploy their front-end projects to their own servers.
First of all, we must have our own Ubuntu server. If we don’t have one, we can go to Alibaba cloud’s official website to buy one. Now Alibaba cloud is engaged in activities. PS: I didn’t advertise
Then we prepare our front-end project, whether you are a Vue project or an ordinary jQuery project, it is the same. The front-end project of this article is Vue.
Clone it to our server through git, and my front-end project is in / home
The following is my front-end project directory and content, we mainly use the packaged dist folder.
Then we started installing nginx
After installation, let’s simply configure nginx
Enter the directory / etc / nginx / sites enabled, and then copy a copy of the default to the current folder. I’ll name it myself. Now I’ll name it resume.zengjielin.top
Then we modify it resume.zengjielin.top The contents of the document are as follows
You just need to change the part of my red box
Explain_ Name write your domain name
Locations write the path of your front-end directory. You can view the path of your front-end through the command PWD. There is a screenshot on it.
Then save and restart your nginx configuration.
Next, we visit our website: resume.zengjielin.top (copy the website to the browser to view the results)
Deploying front end project to server using nginx
1、 Upload the packaged code of the local front end to the server
For example, the dist folder of the front-end project is the packaged code
The SCP command is used under Mac to transfer the file to the server directly
SCP – P – R / git project / code / dist root @ (server IP): / Project
The above command is to transfer the local / git project / code / dist file to your server’s / project directory
The dist file is in the corresponding directory of the server
2、 Configure nginx
The location is / usr / local / nginx / conf
If the 8086 port here belongs to Alibaba cloud server, it should be opened first
After modification, restart nginx.
There are pits here. If you find that the modification doesn’t work, there are the following solutions
1. Maybe the previous nginx service has not been shut down
You can use the command
ps aux | grep nginx
kill -9 6446 6447
Shut down nginx service
2. Specify the configuration file to use when nginx is turned on
CD to the target of starting nginx
Start nginx with the specified configuration
nginx -c /usr/local/nginx/conf/nginx.conf
The common command of nginx is attached
Sudo nginx (start nginx)
Sudo nginx – s reload (restart nginx)
3、 Local access
After the above two steps have been completed, we will visit them locally nginx.conf You can access the domain name and port set in
4、 Cross domain request
We just set it up nginx.conf One configuration is
It means that the port of the background service is 8000. When I access the server_ name:8086/api/ It will flow to the service opened in the background.
So when the front page requests the background, the domain name and port should be server_ name:8086/api/
Example: the following figure shows the path for the front end to initiate the request
Link to this article:https://blog.csdn.net/a_wtf_pgm/article/details/105103958