ubuntu安装nginx并发布vue项目

1.安装nginx

1.1.更新源列表

apt-get update

1.2.安装nginx

apt-get install nginx

1.3.查看nginx版本，确认是否安装成功

nginx -v

2.nginx文件默认路径

使用apt-get安装后，nginx的默认路径为

• /usr/sbin/nginx：主程序
• /etc/nginx：存放配置文件(nginx.conf)
• /usr/share/nginx：存放静态文件
• /var/log/nginx：存放日志

3.配置nginx

3.1.配置监听端口号、访问IP、代理跨域

nginx.conf配置文件中并没有配置端口号和IP，这个我们需要自己手动添加，为了便于修改，我们将vue项目的配置放在其他地方文件里，在nginx.conf 只需要将vue项目的配置文件所在路径引入即可。

3.2.创建配置文件

将文件存放到/etc/nginx/hosts下

• 进到/etc/nginx

cd /etc/nginx

• 创建hosts文件夹

mkdir hosts

• 进到/etc/nginx/hosts

cd /etc/nginx/hosts

• 新建 server0.host 文件，名字和后缀可以自己命名，这个文件用来保存vue项目的相关配置

touch server0.host

• 编辑server0.host文件

vim server0.host

• 添加以下配置

server {
    listen       8080;                   #自己设置端口号
    server_name  xxx.xxx.xxx.xxx;        #自己设置ip地址
    location / {
        root   /usr/share/nginx/dist;        #这里写vue项目打包好的dist文件的地址
        index  index.html;               #这里是vue项目的首页，需要保证dist中有index.html文件
        try_files $uri $uri/ @router;
    }
 
    location @router {
		rewrite ^.*$ /index.html last;            #解决重新刷新页面，页面空白的问题
	}
        
    location /api/ {                                #/api/不是固定的，得看你项目里面定义的是什么，这里就是什么
        proxy_pass http://xxx.xxx.xxx.xxx:9090/;    #9090是后端端口
        proxy_set_header Host $host;
    	proxy_set_header X-Real-IP $remote_addr;
    	proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
    error_page   500 502 503 504  /50x.html;#错误页面
}
# 如有多个服务可以配置多个server
server {
    listen       8081;                   #自己设置端口号
    server_name  xxx.xxx.xxx.xxx;        #自己设置ip地址
    location / {
        root   /usr/share/nginx/dist;        #这里写vue项目打包好的dist文件的地址
        index  index.html;               #这里是vue项目的首页，需要保证dist中有index.html文件
        try_files $uri $uri/ @router;
    }
 
    location @router {
		rewrite ^.*$ /index.html last;            #解决重新刷新页面，页面空白的问题
	}
        
    location /api/ {                                #/api/不是固定的，得看你项目里面定义的是什么，这里就是什么
        proxy_pass http://xxx.xxx.xxx.xxx:9090/;    #9090是后端端口
        proxy_set_header Host $host;
    	proxy_set_header X-Real-IP $remote_addr;
    	proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
    error_page   500 502 503 504  /50x.html;#错误页面
}

• Host头部 ：这个指令设置了传递给后端服务器的 Host 头部。$host是nginx的变量，表示客户端请求中的 Host 头部的值。这是必须的，因为后端服务器需要知道客户端请求的主机名以正确响应请求。
• X-Real-IP头部 ：这个指令设置了传递给后端服务器的 X-Real-IP 头部，它将客户端的真实IP地址（即发起请求的客户端的IP地址）传递给后端服务器。在nginx作为反向代理时，$remote_addr 变量代表了客户端的IP地址。
• X-Forwarded-For头部：这个指令设置了传递给后端服务器的 X-Forwarded-For 头部，用于记录所有代理服务器（包括nginx本身）的IP地址。这个头部对于了解请求的真实来源特别有用，尤其是在多级代理的情况下。$proxy_add_x_forwarded_for 是nginx的变量，它会自动将当前请求的客户端IP地址添加到 X-Forwarded-For 头部的列表中。

Host头部是必须的，因为后端服务器需要知道请求的主机名。如果不设置，后端服务器可能无法正确处理请求。
X-Real-IP 和 X-Forwarded-For 头部通常情况下是推荐加上的，特别是在nginx作为反向代理时。这些头部可以帮助后端服务器获取客户端的真实IP地址和代理链信息，用于调试、安全审计和其他用途。虽然有些情况下可以不加，但通常推荐加上以确保最佳的请求处理和安全性。

3.3.配置vue项目文件路径

cd /etc/nginx

编辑nginx.conf文件

vim nginx.conf

添加以下配置文件，告诉nginx配置文件所在路径

include /etc/nginx/hosts/*.host;

3.4.检查nginx配置文件语法是否有错误

nginx -t

如果没有语法错误，将会显示类似以下内容：

nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

4.nginx相关指令

4.1.启动nginx

systemctl start nginx

4.2.停止nginx

systemctl stop nginx

4.3.重启nginx

systemctl reload nginx

4.4.查看nginx状态

systemctl status nginx

5.nginx卸载指令

移除 nginx 软件包以及和 nginx 相关的共享配置和数据文件。但它不会删除依赖的软件包或配置文件

sudo apt-get remove nginx nginx-common

purge命令将会移除 nginx 软件包及其相关的配置文件，完全清理掉所有与 nginx 相关的数据

sudo apt-get purge nginx nginx-common

自动移除已经不再需要的系统依赖包。当您移除软件包后，可能会产生一些不再需要的依赖包，autoremove命令可以将这些不再需要的包一并清理掉

sudo apt-get autoremove

移除 nginx 软件包以及共享的配置和数据文件，但是针对的是名为 nginx-full 的特定软件包和 nginx-common

sudo apt-get remove nginx-full nginx-common