本文梳理一下nginx部署前端项目的一个过程

安装 Nginx

确保你已经在服务器上安装了 Nginx。可以使用包管理器（如 apt、yum 或 brew）进行安装。

安装完之后就能看到一个nginx的安装包，可以看到安装目录有sbin、conf、html目录

sbin文件主要来控制服务的启动和停止

conf主要是负责保存一些nginx的配置，前端的部署和一些重定向的配置都需要在这个地方配置

html这里有默认的index.html,这个目录主要我用来存放一些前端的包，不放在其他地方，这样不容易弄乱

Nginx 配置文件

打开conf目录下面，找到nginx.conf这个文件，这个是nginx的配置文件，如果要部署前端，需要在nginx的配置中做前端的路径映射。

打开你创建的配置文件，并添加以下基本配置：

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启动

-ef|grep nginx

可以通过查找命令，查找一下哪些nginx已经启动，一切正常之后，进入sbin目录，执行下面的命令，来启动我们刚刚配置好的nginx

./nginx.server start conf路径

conf路径就是上方配置的文件路径，./nginx.server start /xxx/xxxx/conf/nginx.conf ，可以直接这么执行

执行启动命令，可以看到starting nginx 就是启动成功了

最后

最后在浏览器网址输入配置的ip地址和端口号，按照根路径访问的方式，就能访问到已经部署好的前端。

可以看到访问根目录的时候，直接访问到login页面了，这是因为多配置了一个重定向

location / { 
# 重定向 / 到 /login 
return 301 /login; 
}

这样访问根目录的时候，浏览器会直接重定向到login页面上。

🙏 感谢您花时间阅读这篇文章！如果觉得有趣或有收获，请关注我的更新，给个喜欢和分享。您的支持是我写作的最大动力！

往期好文推荐