简述nginx部署前端应用

575 阅读2分钟

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.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 系统下部署

待更新。。。