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

zstar-_

已于 2022-05-09 10:04:43 修改

阅读量8.8k

点赞数 7

分类专栏： Web开发文章标签： nginx 前端 vue.js

于 2022-05-08 23:00:15 首次发布

本文链接：https://blog.csdn.net/qq1198768105/article/details/124655415

版权

Web开发专栏收录该内容

15 篇文章 6 订阅

订阅专栏

前言

之前写过一篇博文【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文件
在这里插入图片描述
注：这里有读者可能存在一个疑问，ngnix版本是1.19.0为什么这里是1.20.2，这是因为在上面配置基本信息时，我初始把nginx-1.19.0写成了nginx-1.20.2，其实就是一个文件夹命名的事。如果按照上面的语句生成，只需要把后面的nginx-1.20.2视作nginx-1.19.0即可。