Web开发Nginx部署静态网页全流程

Posted 2022-05-09 zstar-_

前言

之前写过一篇博文【Web开发】Vue+Springboot项目服务器部署（环境搭建+部署流程），里面涉及到nginx部署网页，但并不是非常详细。此篇就用来填补之前留下的一些坑，从零开始，重新用Nginx来部署一个静态网页。

版本选择

这里服务器选择阿里云的云服务器ECS
操作系统版本： Centos 7.6
Nginx版本：1.19.0
(注意：选择操作系统时不要选择Centos8以上的版本，目前已经停止维护了！)

安全组配置

Nginx默认端口是80，首先需要在服务器后台安全组开放80端口。

连接/传输文件软件下载

安全组配置好之后，就要开始连接服务器了。
之前的博文里采用的是putty(连接)+winscp(传输文件)的方案，然而putty的界面框太小，视觉体验不佳，这里采用新的工具方案：Xshell7(连接)+Xftp(传输文件)。
目前，这两款工具官网已对个人开发者免费开放下载，可以访问https://www.xshell.com/zh/free-for-home-school/
在此处输入自己的邮箱，就可以在邮箱里获得下载链接。

开始部署

Step1：连接服务器

Xshell7/Xftp均可以用类似的方法连接服务器。
输入服务器的公网ip–>默认用户名：root–>输入自己设置的服务器密码
就能连接成功。

Step2：下载Nginx

首先用Xftp在/home文件夹下新建program，取名随意，这里用来存放安装包和解压程序。

在XShell中使用下面的命令进入program文件夹

cd / 
cd /home/program

然后借助wget工具下载nginx

wget http://nginx.org/download/nginx-1.19.0.tar.gz

下载好压缩包之后，进行解包

tar -zxvf nginx-1.19.0.tar.gz

得到 nginx-1.19.0这个文件夹

这样就下载完毕

Step3：安装依赖

在配置nginx之前，需要安装一系列依赖，这里通过yum来进行安装

1、GCC——GNU编译器集合

yum install gcc

2、PCRE库（Nginx编译需要PCRE)

yum install pcre pcre-devel

3、zlib库（zlib库提供了开发人员的压缩算法，在Nginx的各种模块中需要使用gzip压缩)

yum install zlib zlib-devel

4、OpenSSL库（在Nginx中，如果服务器提供安全网页时则会用到OpenSSL库）

yum install openssl openssl-devel

注：安装需要进行选择时，输入y就可以

Step4：配置安装

进入到产生的nginx-1.19.0文件夹中

cd nginx-1.19.0

配置基本信息

./configure --prefix=/usr/local/nginx-1.19.0 --with-http_ssl_module --with-http_stub_status_module

配置完之后，可以看到目录下，多了一个Makefile文件

再进行编译安装

make & make install 

安装好之后可以在/usr/local目录下，找到安装好的nginx文件

Step5：启动Nginx服务

/usr/local/nginx-1.20.2/sbin目录下有个nginx脚本文件，运行它就可以启动Nginx服务

我们进入该目录

cd /usr/local/nginx-1.20.2/sbin

启动服务

./nginx

启动之后，就可以在浏览器页面里输入自己的公网IP(不用输入端口号，默认就是80端口)，这样可以看到nginx默认的欢迎页。

Step6：修改自己的配置文件

现在我们需要让Nginx指向自己的静态文件资源，我们可以修改这里的配置文件nginx.conf，用记事本打开。

在此处进行修改添加

这里的usr/local/myhtml是存放自己资源的文件夹，也可以换成其它你喜欢的位置。
顺带一提，Nginx的默认端口号是80，可以通过上面的listen属性值进行修改。

修改好后，在对应的位置创建自己的资源文件夹

传入自己的页面

注意首页改成index.html，也可以通过编辑前面的配置文件来修改这一规则。

Step7：重启Nginx

最后，再重启一下Nginx，就可以看到成果了。
先回到sbin目录

cd /usr/local/nginx-1.20.2/sbin

重启Nginx

./nginx -s reload

重启之后，再在浏览器内输入自己的ip，就能访问到了。

如果没有更新，可以在浏览器按F12开启开发者模式，以谷歌浏览器为例，清除缓存，就可以看到新界面了。