天天看点

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

前言

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

版本选择

这里服务器选择阿里云的云服务器ECS

操作系统版本: Centos 7.6

Nginx版本:1.19.0

(注意:选择操作系统时不要选择Centos8以上的版本,目前已经停止维护了!)

安全组配置

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

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

连接/传输文件软件下载

安全组配置好之后,就要开始连接服务器了。

之前的博文里采用的是putty(连接)+winscp(传输文件)的方案,然而putty的界面框太小,视觉体验不佳,这里采用新的工具方案:Xshell7(连接)+Xftp(传输文件)。

目前,这两款工具官网已对个人开发者免费开放下载,可以访问​​https://www.xshell.com/zh/free-for-home-school/​​ 在此处输入自己的邮箱,就可以在邮箱里获得下载链接。

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

开始部署

Step1:连接服务器

Xshell7/Xftp均可以用类似的方法连接服务器。

输入服务器的公网ip–>默认用户名:​​

​root​

​​–>输入自己设置的服务器密码

就能连接成功。

Step2:下载Nginx

首先用Xftp在​

​/home​

​​文件夹下新建​

​program​

​,取名随意,这里用来存放安装包和解压程序。

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

在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文件

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

再进行编译安装

make &      

安装好之后可以在​

​/usr/local​

​目录下,找到安装好的nginx文件

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

注:这里有读者可能存在一个疑问,ngnix版本是​

​1.19.0​

​​为什么这里是​

​1.20.2​

​​,这是因为在上面配置基本信息时,我初始把​

​nginx-1.19.0​

​​写成了​

​nginx-1.20.2​

​​,其实就是一个文件夹命名的事。如果按照上面的语句生成,只需要把后面的​

​nginx-1.20.2​

​​视作​

​nginx-1.19.0​

​即可。

Step5:启动Nginx服务

​/usr/local/nginx-1.20.2/sbin​

​目录下有个nginx脚本文件,运行它就可以启动Nginx服务

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

我们进入该目录

cd /usr/local/nginx-1.20.2/sbin      

启动服务

./nginx      
【Web开发】Nginx部署静态网页全流程

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

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

Step6:修改自己的配置文件

现在我们需要让Nginx指向自己的静态文件资源,我们可以修改这里的配置文件​

​nginx.conf​

​,用记事本打开。

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

在此处进行修改添加

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

这里的​

​usr/local/myhtml​

​是存放自己资源的文件夹,也可以换成其它你喜欢的位置。

顺带一提,Nginx的默认端口号是80,可以通过上面的listen属性值进行修改。修改好后,在对应的位置创建自己的资源文件夹

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

传入自己的页面

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

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

Step7:重启Nginx

最后,再重启一下Nginx,就可以看到成果了。

先回到sbin目录

cd /usr/local/nginx-1.20.2/sbin      

重启Nginx

./nginx -s reload      

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

继续阅读