Ubuntu releases vue online projects through nginx

Ubuntu releases vue online projects through nginx

One: Install nginx

1: Run the following command

sudo apt-get install nginx

2: After installation, check whether the installation is successful

nginx -v // 查看版本
nginx -t // 查看配置文件是否成功
配置成功会显示:
nginx: the configuration file /xxx/xxx/nginx.conf syntax is ok
nginx: configuration file /xxx/xxx/nginx.conf test is successful

Two: Access nginx

1: After the successful configuration is displayed, enter the address in the browser to access
http://location (location is the public network ip address of the server, if you do not know the local ip address, enter: curl ifconfig.me command query) at
this time in the browser can See the following page, indicating that ubuntu is installed successfully and can be accessed normally
insert image description here

Three: upload files

1: First create an index.html file

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    这是个测试的页面
</body>
</html>

2: Create a folder on the server

mkdir test

3: Upload the html file into the folder you just created

命令行使用scp命令
scp index.html 服务器用户名@服务器ip地址:/test/

4: Edit the nginx.conf file: nginx accesses port 80 by default

在http模块中配置server模块
server {
    
    
		listen 80; // 监听的端口
		server_name _;  // servername,有域名的这里配置域名
		root /test;
		index index.html;
	}
}

5: Save and exit the editor after editing, restart nginx

nginx -s reload

6: Go to the browser to visit and you can see the page.
If you want to configure other ports, the configuration is the same, but pay attention to the port must be released in the firewall, otherwise an error will be reported: network_error 7:
If you need to configure multiple items on one port , use the following configuration

server {
    
    
		listen 80;
		server_name _;
		location / {
    
    
			alias /test/; // 这里使用alias不要使用root,否则会报错
			index index.html;
		}
		location /xxx {
    
    
			alias /xxx/xxx/;
			index index.html;
		}
	}
}
// 默认访问的是 / 

The release of the vue project is the same as above
Package > upload server > configure alias or root folder > set index.html entry file > restart nginx > visit the page

It is also the first time for me to use nginx to publish front-end projects. I don’t know much about the configuration of nginx. The above are just the results of my recent learning. If there is something wrong, please give guidance in the comment area. If you have any questions, you can also private message me~~~

Guess you like

Origin blog.csdn.net/m0_46496355/article/details/123687958
Recommended