简述nginx部署前端应用

傑丶
690 阅读4分钟

1 windows 系统下部署

1.1 下载nginx

Nginx是一款轻量级的Web服务器、反向代理服务器，由于它的内存占用少，启动极快，高并发能力强，在互联网项目中广泛应用。

直接去官网下载 nginx.org/en/download…，下载一个Windows下的全新版本，如图：

image-20220507171249426.png

想了解更多详细的内容，上图右侧“documentation -> nginx windows” 有很详细的说明，本文档只做简单的应用和避坑使用。

下载完之后解压如下图：

image-20220507171941070.png

1.2 配置nginx

1.2.1 nginx常用命令

start nginx     # 启动nginx   
nginx -h        # 打开帮助
nginx -t        # 检查配置文件是否正确
​
# 以下命令均要先启动nginx才能执行
nginx -s stop   # 快速停止
nginx -s quit   # 完整有序的关闭
nginx -s reopen # 重新启动（注意不会重新读取配置文件）
nginx -s reload # 重新读取配置文件
tasklist /fi "imagename eq nginx.exe" # 查看任务进程是否存在

1.2.2 如何运行

首先以管理员方式运行cmd，如下图所示：

image-20220507172543134.png

然后用命令切换到nginx的根目录下，如下图所示：

image-20220507172945677.png

然后启动nginx服务，启动时会一闪而过是正常的，如下图所示：

image-20220507173452744.png

不要直接双击nginx.exe！不要直接双击nginx.exe！不要直接双击nginx.exe！一定要在dos窗口启动，不要直接双击nginx.exe，这样会导致修改配置后重启、停止nginx无效，需要手动关闭任务管理器内的所有nginx进程（可能不止一个nginx进程），再启动才可以

查看任务进程是否存在，下图表示进程启动成功了：

tasklist /fi "imagename eq nginx.exe"

image-20220507173549192.png

在任务管理器的详细信息tab栏中可以查看到对应的进程：

image-20220507174432752.png

此时在浏览器中访问 localhost，如果出现了如下界面，表示nginx已经启动成功了：

image-20220507173805329.png

如果未启动成功，常见错误有：

  1. 端口号被占用
  2. nginx文件夹路径含中文
  3. 其他错误参见下图中的错误日志：

image-20220507174712159.png

1.2.3 配置一个站点

在conf目录下的nginx.conf 文件中进行配置：

只配置一个站点时可用如下配置：

image-20220507180144587.png

nginx的webapp目录下将前端资源文件放入即可：

image-20220507180238627.png

1.2.4 配置多个站点

配置多个站点时可用如下配置：

image-20220507181428812.png

nginx的webapp目录下将前端资源文件放入即可：

image-20220507181504978.png

1.2.5 配置无缓存

在 Nginx 中配置无缓存（即禁用缓存）通常是为了确保每次客户端访问时都从服务器获取最新的资源，而不是从浏览器缓存或代理缓存中读取。你可以通过设置适当的 HTTP 响应头来禁用缓存。

配置步骤：

你可以通过在 Nginx 的配置文件中添加以下指令来禁用缓存。

  1. 编辑 Nginx 配置文件：通常配置文件位于 /nginx/conf/nginx.conf。
  2. 禁用缓存：在 server 或 location 块中添加以下缓存控制头。
server {
    listen 80;
    server_name yourdomain.com;

    location / {
        # 禁用缓存的 HTTP 头
        add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate";
        add_header Pragma "no-cache";
        add_header Expires 0;
        
        # 其他配置
        root /var/www/html;
        index index.html index.htm;
    }
}

解释：

  1. Cache-Control：no-store 表示不缓存任何内容，no-cache 强制每次都重新验证，must-revalidate 表示如果缓存过期，必须重新获取，proxy-revalidate 适用于缓存代理服务器。
  2. Pragma：no-cache 用于 HTTP/1.0 客户端，指定浏览器不要缓存响应。
  3. Expires：将其设置为 0 或一个过去的时间，确保浏览器认为资源已过期。

其他注意事项：

  • 确保你的缓存配置适用于你希望禁用缓存的所有资源或路径。
  • 如果你有代理服务器或 CDN 在前端缓存，你可能还需要对它们做类似的配置，或者通过配置 Cache-Control 标头来防止缓存。
  • 如果你在生产环境中需要完全禁用缓存，通常建议在使用 no-store 时保持谨慎，因为它可能会增加网络流量并影响性能。

测试：

配置完成后，重启 Nginx 服务：

nginx -s quit
start nginx

你可以使用浏览器的开发者工具（F12）查看响应头是否包含：

Cache-Control: no-store, no-cache, must-revalidate, proxy-revalidate
Pragma: no-cache
Expires: 0

这样就完成了 Nginx 的无缓存配置。

1.3 阿里云服务器开放80端口

如果配置完后，外网还是访问不了部署的站点，可能是阿里云服务器安全组未开启80端口。参考下面文档去开启下即可：

zhuanlan.zhihu.com/p/462158186

blog.csdn.net/m_de_g/arti…

1.4 解决报错

1.4.1 缺少文件目录

在 logs/error.log 中找到最新的报错信息：

2024/08/23 09:34:16 [emerg] 5804#17296: CreateDirectory() "C:\Users\DELL\Desktop\nginx-1.20.2/temp/client_body_temp" failed (3: The system cannot find the path specified)

解决方案：

在nginx根目录添加 temp 文件夹即可

2 Linux 系统下部署

待更新。。。

avatar
文章
阅读
粉丝