vue项目部署 nginx 配置

nginx配置

nginx启动、停止、重新加载配置

要启动nginx需要运行可执行文件，nginx通过 nginx - s 指令名 调用可执行文件。

nginx -s stop 快速关机
nginx -s quit 优雅关机
nginx -s reload 重新加载配置文件
nginx -s reopen 重新打开日志文件

nginx配置文件的结构

nginx由模块组成，这些模块由配置文件中指定的指令控制。指令分为简单指令和块指令。简单指令由名称和参数组成，由空号分隔，分号结尾。块指令则是被包裹在大括号 {} 中的简单指令集合。一些顶级指令被称为上下文，用于将不同类型的指令组合在一起：events => 常规连接处理 、 http => http连接 ...，在这些上下文之外的指令被称为在主上下文中。

配置文件中 # 符号为注释符号。

提供静态内容

指令 server 用来控制对特定域或IP地址的资源请求的处理。

指令location 用来指定 / 与来自请求的url路径相匹配。

指令 root 用于指定文件路径。

指令 index 可设置多个参数，如果没有指定具体的访问资源，就依次向后寻找。

当url路径请求 / 时，将匹配到 root 指令指定的 /blog/dist文件目录进行响应(这里的路径要从服务器的根路径开始，如 /etc/nginx/www/)。

可以设置多个 location 块指定不同url请求路径的响应。如, 添加location指令 /images/ 用来提供静态文件响应，它将匹配由 、images/ 开头的请求。如，请求 http://localhost:images/1.png ,nginx 会发送 /blog/images/1.png 响应请求。

server {
	listen 8080;
	root /blog/
    location / {
        root /blog/dist;
        index  index.html index.htm;
    }

    location /images/ {
        root /blog;
    }
}

设置一个简单的代理服务器

nginx 常见用途之一是将其设置为代理服务器，服务器接收请求，将它们传递给代理服务器，从代理服务器检索响应，并发送给客户端。

上下文 http 中，可包含一个或多个server块来定义控制请求处理的虚拟服务器。

指令 listen 用于端口侦听。

指令 proxy_pass：

指定代理服务器的协议、地址以及端口（可选）
如果一个域名解析为多个地址，则所有地址以循环方式使用。
可指定url，如果指定url将和 location => root 指令一样匹配请求。

http {
  server {
	listen 8080;
	root /workspace/blog-server/;
    location / {
        proxy_pass http://localhost:1337;
    }

    location ~ \.(gif|jpg|png)$ {
        root /workspace/blog-server/public/images;
    }
  }
}

location 可以使用正则表达式进行匹配，正则表达式需要前置一个~符号。 ~ \.(gif|jpg|png)$ 过滤所有以 .gif 、.jpg 或 .png 结尾的请求并映射到 /workspace/blog-server/public/images 目录，传递给上面配置的代理服务器。

nginx更多参数配置

user 指令：nginx运行时有两个进程，主进程和worker工作进程，一个主进程拥有多个工作进程。nginx主进程以root权限运行，之后读取默认配置文件（如/etc/nginx/nginx.conf ）中的user指令配置，使用user指令指定的用户启动工作进程 worker process。

user nobody; # 指定启动nginx工作进程的用户及用户组
worker_process auto;
events {

    # configuration of connection processing

}

nginx模块化配置

为了使配置更易于维护，可将配置文件不同配置内容拆分成单独文件，并使用主配置文件中的 include指令来引用其他配置文件。

# 引用 conf.d目录下所有后缀为.conf 的配置文件
include conf.d/*.conf;

配置完成后，可使用 nginx -t检查配置文件是否正确。

如果出现下面的ok和successful就代表正确，否则需要检查配置文件。

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

确认配置完成后使用 nginx -s reload 重新加载配置文件。

代理服务器配置在线生成工具

https://www.digitalocean.com/community/tools/nginx?global.app.lang=zhCN

vue项目打包部署-路由history模式下非根路径刷新404问题

添加try_files命令参数，对应参数为文件地址和重定向地址，重定向地址可以设置url地址也可以使用code设置，如404，如果设置try_files 没有设置重定向地址，页面刷新会报500。

try_files命令按顺序检查文件是否存在，并使用第一个找到的文件进行请求处理。通过在名称末尾指定最后一个参数指向命名位置，这里重定向到index.html 页面.

格式1：try_files file ... uri;  格式2：try_files file ... =404;

变量$uri 指当前的请求URI,不包括任何参数。如果请求为http://www.baidu.com/test, $uri 就是test。

try_files $uri $uri/ /index.html ;

假设请求的是 /test路径，因为设置了root 参数，这里的 $uri 就是 /blog/dist/test，这里会先寻找 /blog/dist/test.html，如果找不到就接着寻找 /blog/dist/test/ 文件目录,如果都找不到，就重定向到 /blog/dist/index.html .

server {
	listen 8080;
	root /blog/
    location / {
        root /blog/dist;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html ;
    }

    location /images/ {
        root /blog;
    }
}

nginx官方文档：

http://nginx.p2hp.com/en/docs/beginners_guide.html

https://docs.nginx.com/nginx/admin-guide/basic-functionality/managing-configuration-files/

https://blog.csdn.net/weixin_42130892/article/details/107065551

https://www.jianshu.com/p/8e523f59df67

查看error.log

rewrite or internal redirection cycle while internally redirecting to "/inde

静态文件路径错误