使用nginx部署静态网站详细教程

nginx介绍

Nginx 是一个高性能、开源的 Web 服务器软件，它可以作为反向代理服务器、负载均衡器和 HTTP 缓存等。在这里，我们将介绍如何在 Nginx 上部署静态 Web 服务器。

部署的前置条件

1. 确保你有一个已准备好的静态网站文件。
2. 你需要有一个运行中的服务器，可以是本地服务器或云服务器。
3. 服务器上已安装了 Nginx。

 使用nginx部署静态网站的详细流程 

1. 安装nginx。

2. 修改所需的配置文件。

3. 上传打包好的静态网站。

4. 重新加载nginx配置。

5. 测试。

实战演示 

接下来就nginx部署静态网站进行一次详细流程的演示，我这边使用的服务器的系统是EulerOS 2.0，其他操作系统的话操作基本也大同小异，无非是操作命令有细微区别，大家可自行百度自己使用的操作系统对应的操作命令

1，安装nginx。

在自己服务器的终端内进行操作

（1）更新本地软件包列表

yum update

输入命令后需要输入y确认操作，该过程可能时间较长，耐心等待即可

（2）使用命令安装Nginx

yum install nginx

输入命令后需要输入y确认操作 

 （3）命令查看是否安装成功

nginx -v

如图所示，出现nginx版本即代表安装成功

 2，修改所需的配置文件。

默认情况下，Nginx 的主配置文件位于 /etc/nginx/nginx.conf。我们需要查看并进行配置。

（1）找到主配置文件位置

cd /etc/nginx/

进入文件夹后输入ll命令查看文件夹下有哪些文件

可以看到文件夹中存在主配置文件nginx.conf

（2）编辑主配置文件 

vim nginx.conf

可以看到，初始打开的配置文件是这样的，输入英文字母i使文件进入编辑状态，编辑完成后点击esc退出编辑状态 ，然后输入:wq保存文件

我们需要做的配置内容为下面代码块内容，需要确保在 http 部分包含以下内容（如果不存在，可以手动添加） 

server { 
listen 80; 
server_name  你的服务器地址; 
root /usr/local/share/web
       }
 location / {
             ry_files $uri $uri/ /index.html;
            }
 location ~ /\.ht {
             deny all;
                  }

以下是修改完成后配置文件的截图，xx.xxx.xxx.xx是你自己服务器的地址即可 

 （3）创建其他配置文件

进入 /etc/nginx/conf.d/ 路径目录，并创建配置文件 web.conf

cd /etc/nginx/conf.d/

touch web.conf

获取服务器的ip地址

ip addr show eth0

 

inet后边的内容一直到brd之前就是服务器的ip地址

查看并编辑配置文件  web.conf

vim web.conf

输入以下 server 块内容，保存并关闭

server{
	listen 80;
	server_name 你自己服务器的ip地址;
	root /user/local/share/myweb;

	location / {
		allow all;
	}
}

3，上传打包好的静态网站。 

（1）创建根目录

进入 /usr/local/share/ 目录，并在其下用 mkdir 创建我们的根目录

cd /usr/local/share/

mkdir web

（2）在文件夹中上传自己打包好的dist文件中的内容

 4，重新加载nginx配置。

启动Nginx服务后再查看Nginx服务状态是否正常启动并正在运行

service nginx start

service nginx status

如果产生错误按照错误提示查找解决即可，优先考虑配置文件问题，可以使用 nginx -t 命令检查配置文件是否有语法错误。如果检查无问题也可能是文件权限问题，或是端口被占用，或是防火墙没有关闭，一一排查即可。

正常运行的截图如图所示 

5，测试

在网址栏输入服务器对应的网址即可访问