nginx的安装和html部署问题

在之前自己的项目都是运行在本地服务器，但是这种方式这样别人就访问不到，然后就了解到可以用nginx部署到服务器，下面是我自己简单接触nginx的一些内容。

nginx的安装过程比较简单，也不用配置环境啥的，即装即用

首先去官网下载 nginx http://nginx.org/en/download.html

版本的话选择之前的版本可能稳定些，我本人下载的是 nginx/Windows-1.21.6

建议下载到D盘目录（注意：路径不能带有中文），下载后直接解压，得到以下文件

有很多种方法启动nginx

(1)直接双击nginx.exe，双击后一个黑色的弹窗一闪而过

(2)打开cmd命令窗口，切换到nginx解压目录下，输入命令 nginx.exe 或者 start nginx ，回车即可

（可以直接在文件夹上面直接cmd进入路径下的命令行窗口）

3.检查nginx是否启动成功

直接在浏览器地址栏输入网址 http://localhost:80，回车，出现以下页面说明启动成功

start nginx        #启动 Nginx

nginx -s reopen #重启Nginx

nginx -s reload #重新加载Nginx配置文件，然后以优雅的方式重启Nginx

nginx -s stop #强制停止Nginx服务

nginx -s quit #优雅地停止Nginx服务（即处理完所有请求后再停止服务）

nginx -V #显示版本和配置选项信息，然后退出

 tasklist /fi "imagename eq nginx.exe"     # 查看windows任务管理器下Nginx的进程命令

 在cmd中启动nginx后 输入命令   tasklist /fi "imagename eq nginx.exe" ，出现以下内容

在进入服务器部署之前，现在本地测试部署能不能成

本人的前端项目基于vue搭建，先在vscode里面 npm run build 打包，成功后会生成一个dist文件夹，把里面的内容全部复制到nginx的 html 文件夹中

 确保nginx是启动状态，在浏览器输入本机ip  http://127.0.0.1  就会访问到该项目

这里使用的是腾讯云的Windows服务器

nginx安装步骤和本地一致，直接把nginx压缩包复制到服务器进行解压安装，这里不多阐释

部署过程和本地一样，把dist文件夹下的所有内容复制到nginx的html文件夹中

启动nginx就可以在服务器的本地通过 http://127.0.0.1 访问到相应内容

把 ‘127.0.0.1’换成服务器公网 ip ，就可以在本地访问到部署在服务器上的项目了，由于服务器是24小时工作的电脑，所以不用担心nginx会停止的问题

在部署后发现一个很大的问题，就是刷新页面直接 404 了

 解决方法：

修改nginx的配置文件nginx.conf （建议使用 vscode 打开该文件）

在locatio里面加上代码    try_files $uri $uri/ /index.html; 

 在这里解释一下try_files的意思，顾名思义try files 尝试获取文件。
 如果一个地址是localhost:8080/home
那么uri指的是home地址,uri/指的是home文件夹
这段代码的意思是，如果访问一个地址首先会尝试读取第一个地址的页面文件，第一个地址无法访问的话会访问同名文件夹，如果文件夹也不存在那么就返回默认的index.html文件，这样配置好之后再刷新就能正常显示了。

本人是初次接触nginx的小菜鸟，文章如有错误，恳请大家提出问题，本人不胜感激

文章对大家有帮助的话，希望大家能动手点赞鼓励，大家未来一起努力     长路漫漫，道阻且长     

转载请注明出处：https://blog.csdn.net/qq_52855464/article/details/124590640?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22124590640%22%2C%22source%22%3A%22qq_52855464%22%7D&ctrtid=X0ZhT​​​​​​​