前言：

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

1.简单介绍安装过程

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

1.1 下载nginx

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

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

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

1.2 启动nginx

有很多种方法启动nginx

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

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

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

3.检查nginx是否启动成功

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

2.nginx的一些常用命令

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" ，出现以下内容

3.本地部署

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

3.1前端html部署

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

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

4.服务器部署

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

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

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

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

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

5.解决刷新报错问题

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

解决方法：

修改nginx的配置文件nginx.conf （建议使用 vscode 打开该文件，可以在本地修改好然后复制到服务器）

修改位置如下

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

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

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

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

转载请注明出处：https://blog.csdn.net/qq_52855464/article/details/124590640

nginx的安装和html部署问题相关推荐

Linux下nginx的安装及部署
Linux下nginx的安装及部署一. nginx的安装 1. nginx安装需要很多依赖包(并不知道是干神马的,连接好网络,敲命令直接安便是了) 安装GCC 和GCC-C++(若没有安装gcc) ...
nginx的安装部署，热升级与回退，日志切割以及gzip(文字压缩)
1.安装部署nginx (1)安装 tar zxf nginx-1.14.0.tar.gz vim auto/cc/gcc #CFLAGS="$CFLAGS -g"##注销日志的d ...
nginx - nginx的安装部署
目录什么是nginx? 1. nginx的安装 1.1 yum安装和编译安装的区别 1.1.1 yum安装的优点和缺点 1.1.2 编译安装的优点和缺点 1.2 nginx编译安装脚本 1.3 ...
nginx的安装部署
首先切换到nginx用户(确定已经在Linux服务器上新建了一个nginx用户) su nginx 进行安装前的检查,检查服务器上是否安装了gcc-c++ rpm -qa|grep gcc-c++ 如 ...
【Linux】在Ubuntu下部署nginx——nginx的安装与卸载
介绍这里是小编成长之路的历程,也是小编的学习之路.希望和各位大佬们一起成长! 以下为小编最喜欢的两句话: 要有最朴素的生活和最遥远的梦想,即使明天天寒地冻,山高水远,路远马亡. 一个人为什么要努力? ...
uwsgi模式_nginx+uwsgi 和nginx+gunicorn区别、如何部署
[线上环境部署Django,nginx+uwsgi 和nginx+gunicorn,这两种方案,应该如何选择?] 大家是采用的何种部署方式? 第一种,高并发稳定一点我们公司使用的是nginx+gun ...
centos losf 安装_Linux Centos7部署环境安装-CentOS
Linux Centos7部署环境安装-CentOS Centos7部署环境安装及Linux常用命令 centos系统下各文件夹的作用 centos7修改系统默认语言 centos7安装rz/sz命令 ...
Nginx的安装和多域名配置的实现方法
这篇文章主要介绍了Nginx的安装和多域名配置的实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考.一起跟随小编过来看看吧 Nginx安装 centos6.x yum默认没有nginx的软件 ...
Jenkins+Github+Nginx实现前端项目自动部署
Jenkins+Github+Nginx实现前端项目自动部署前言最近在搭建一个自己的网站,网站框架搭好了要把项目放到服务器运行,但是每次更新网站内容就要手动部署一次,实在很麻烦,于是就想搭建一套自 ...

nginx的安装和html部署问题

前言：