本文梳理一下nginx部署前端项目的一个过程
安装 Nginx
确保你已经在服务器上安装了 Nginx。可以使用包管理器（如 apt、yum 或 brew）进行安装。
安装完之后就能看到一个nginx的安装包，可以看到安装目录有sbin、conf、html目录
sbin文件主要来控制服务的启动和停止
conf主要是负责保存一些nginx的配置，前端的部署和一些重定向的配置都需要在这个地方配置
html这里有默认的index.html,这个目录主要我用来存放一些前端的包，不放在其他地方，这样不容易弄乱
Nginx 配置文件
打开conf目录下面，找到nginx.conf这个文件，这个是nginx的配置文件，如果要部署前端，需要在nginx的配置中做前端的路径映射。
打开你创建的配置文件，并添加以下基本配置：
ini
nginxCopy code
server {
listen 8888;
server_name your-domain.com; # 替换为你的域名或服务器 IP 地址
root /path/to/your/frontend; # 替换为你的前端项目的实际路径
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
# 可以添加其他配置，如缓存、gzip 等
}listen：listen表示监听的端口，也就是前端部署到哪个端口下面
server_name：如果当前服务器ip是 xx.xx.xx.xx 这里的server_name可以直接写成localhost，那么前端的访问路径就是xx.xx.xx.xx:8888，localhost表示本地的地址
index：index表示目录的入口文件
location：location表的是当前的访问路径，和js在浏览器中打印的location是同一个道理，表示当前路径，这里表示的是根路径"/",表示的是当访问 xx.xx.xx.xx:8888/ 的时候
-
location /：表示匹配所有路径为/的请求。 -
try_files $uri $uri/ /index.html;：这是try_files指令，用于尝试按顺序查找文件。 -
$uri：尝试直接访问与请求路径匹配的文件。 -
$uri/：尝试访问与请求路径匹配的目录。 -
/index.html：如果上述两者都失败，就重定向到/index.html页面。
root：前端项目的实际路径，之前说html是放部署的前端项目，比如我前端dist打包后放到了html目录下，/xxx/xxx/nginx-1.20.2/html/dist，那么我的root应该这么写 /xxx/xxx/nginx-1.20.2/html/dist, 和放置的路径是一样的
启动nginx
前面我们说到sbin文件目录是控制nginx的启动和停止的，现在nginx的配置已经初步完成了，我们可以来启动nginx尝试一下
在这之前可以看下服务器有没有其他的nginx启动
js
-ef|grep nginx可以通过查找命令，查找一下哪些nginx已经启动，一切正常之后，进入sbin目录，执行下面的命令，来启动我们刚刚配置好的nginx
js
./nginx.server start conf路径conf路径就是上方配置的文件路径，./nginx.server start /xxx/xxxx/conf/nginx.conf ，可以直接这么执行
执行启动命令，可以看到starting nginx 就是启动成功了
最后
最后在浏览器网址输入配置的ip地址和端口号，按照根路径访问的方式，就能访问到已经部署好的前端。
可以看到访问根目录的时候，直接访问到login页面了，这是因为多配置了一个重定向
js
location / {
# 重定向 / 到 /login
return 301 /login;
}这样访问根目录的时候，浏览器会直接重定向到login页面上。