image-20251101224806945

image-20251101224917851

image-20251101224941672

1
2
3
4
5
6
7
8
9
10
11
#启动
nginx

#检查进程
ps -ef | grep nginx

#查看端口占用情况
lsof -i:80

#控制nginx的停止或重启
nginx -s signal(signal是下图中的任意一个)

<img src=”./images/快速nginx/image-20251101231003548.png”

静态站点部署

输入下面的命令，然后找到nginx.conf，安装方式不同会导致这个配置文件的位置不同

1
2
3
4
5
#查看Nginx的安装目录 编译参数以及配置文件和日志文件的位置各种信息
nginx -V

使用vscode打开这个配置文件
连接shelter@192.168.23.128

<img src=”./images/快速nginx/image-20251101231500956.png”

往下翻找到一个server的部分，然后在 server 里面还有一个location，这个location就是匹配我们在浏览器中输入的URL的，比如这里的斜线就表示匹配根目录，也就是当我们只输入一个localhost后面什么都不输入的时候，就会匹配到这个location中的内容，然后就会到它里面指定目录下去找一个index.html这个文件也就是默认页面。

这里html就是根目录所对应的文件夹，它是一个相对路径，是相对于nginx安装的文件夹

1
2
3
4
5
6
7
8
9
10
11
12
13
server {
       listen       80;
       server_name  localhost;

       #charset koi8-r;

       #access_log  logs/host.access.log  main;

       location / {
           root   html;
           try_files $uri $uri/ /index.html;
           index index.html index.htm;
       }

这个框架可以把Markdown格式的文档转换成静态页面

image-20251102023012047

1
2
3
4
5
6
7
8
9
10
11
cd nginx
hexo init blog-demo
ls
cd blog-demo
ls
hexo g#生成静态站点，放到public文件夹
hexo s#启动本地服务器

#部署
cd public
cp -rf * /opt/homebrew/var/www/

配置文件

worker进程的数量就可以通过配置文件来修改，一打开就可以看到下面的这行，后面的数字就是worker进程的数量，默认1改成10，

1
2
3
4
5
6
7
worker_processes  10;
#检查配置文件的内容是否正确，会提示原因
nginx -t
#重新加载
nginx -s reload
#查看nginx进程，这时候应该是10个
ps -ef |grep nginx

也可以设置成auto，这样Nginx就会根据内核的数量自动设置worker进程的数量

1
worker_processes  auto;

配置文件主要由三个配置块组成，最外面是全局块（全局配置）

然后是events块，主要是一些服务器和客户端之间网络连接的一些配置

然后是一个http块，http块里面又可以包含多server块，也叫虚拟主机，在最下面一行可以看到有一个include servers/*，表示把servers目录下的所有配置文件都包含进来，这样就可以把每个虚拟主机的配置都放到一个单独的文件里面，让主配置文件看起来更加简洁清晰

include这个指令还可以包含其他的配置文件，比如include mime.types，把mime.types文件包含进来

反向代理负载均衡

简单来说 正向代理就是代理客户端，反向代理就是代理服务端

跟着视频弄了三个服务端口号，然后修改一下config，添加一个upstream的配置，这个就是反向代理配置，后面的名字可以随便取，括号里是需要被代理的服务器的配置

配置完再在下面的server里再添加一个location配置，比如所有以app开头的请求都被代理到刚刚的upstream中，proxy_pass的地址需要和刚刚upstream后面的名字保持一致。

1
2
3
4
5
6
7
8
9
10
11
12
upstream backend{
	ip_hash;
	server 127.0.0.1:8000 weight=3;
	server 127.0.0.1:8001;
	server 127.0.0.1:8002;
}
server{
	xxx
	location /app{
		proxy_pass http:/backend;
	}
}

然后重载运行，打开网址可以看到一个localhost/app切换了三个页面，默认是轮流的方式代理，如果一台电脑比其他两台要好，就可以使用权重weight调整负载均衡策略，权重越大被请求的次数也就越多

还有个负载均衡策略就是ip_hash，这个策略会根据客户端的iP地址进行一个哈希，同一个客户端的请求就会被分配到同一个服务器上，这样就解决了一些session相关的问题

HTTPS配置

HTTPS协议是HTTP协议的安全版本，它通过对传输的数据进行加密来保证数据的安全性

http默认端口80，而HTTPS协议的默认端口是443，HTTPS协议需要使用到SSL证书，在主流的云平台上都可以免费申请到SSL证书，如果没有云平台也没有关系，我们可以通过 openssl 命令来自己生成一个自签名的证书，使用下面这三行命令就可以了，或者也可以将这三行命分合并成一个命分

image-20251102030051052

输入之后提示我们输入信息比如国家 省份 城市 公司 邮箱等等，这些信息就是待会生成证书文件里面的信息，填写完成之后 就会生成两个文件，一个是私钥文件 private.key，另外一个就是证书文件以pem结尾。这两个文件需要放到服务器上然后在Nginx的配置文件中进行配置

首先需要在监听后面加上一个ssl，然后下面 server name 后面一般填写自己的网站域名，如果是本地测试的话可以随便填一个，然后下面两行就是我们刚刚生成证书文件和私钥文件的路径，再下面是一些加密协议和算法相关的配置，下面这几行配置一般都是固定的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
server{
	listen 443 ssl;
	server_name localhost;
	#证书文件名称
	ssl certificate /opt/homebrew/etc/nginx/cacert.pem;
	#证书私钥文件名称
	ssl_certificate_key /opt/homebrew/etc/nginx/private.key;
	# ssl验证配置
	ssl session timeout  5m;··# 缓存有效期
	#安全链接可选的加密协议
	ssl protocolS TLSV1 TLSV1.1 TLSV1.2 TLSv1.3
	# 配置加密套件/加密算法，写法遵循 openssl 标准。
	SSL CipherS ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
	# 使用服务器端的首选算法
	ssl_prefer_server_ciphers on;
	#charset koi8-r;
}

配置完重新启动nginx，然后打开浏览器

还有一点就是我们一般都会配置一个重定向来让HTTP的请求自动跳转到HTTPS，配置方法就是在HTTP的 Server 里面加上下面这一行就可以了

1
2
3
4
5
6
#这个是再添加一个server块
server{
	listen 80;
	server_name geekhour.net www.geekhour.net;
	return 301 https://$server_name$request_uri;
}

虚拟主机

Nginx中的虚拟主机就是通过server块来实现的，每个server块就是一个虚拟主机，然后通过 server_name来指定这个虚拟主机的域名，这样当我们访问这个域名的时候就会被这个server块所匹配，然后就会执行这个server块中的配置

我们也可以把nginx.conf中的server部分的内容复制一份，然后在server目录下新建一个文件粘贴进去就可以了，这里新建一个local.conf的文件然后把上节课的server内容复制进去

这里老师用vue再新建一个站点，然后新建一个vue.conf。

server的后面加上一对花括号，然后再来配置一下监听的端口，端口号可以随意配置，然后再来配置一个 server_name，在生产环境这里一般需要配置成你的域名，然后再来添加一个location的配置用来指定这个虚拟主机的根目录，也就是我们刚刚打包好的Vue项目的目录，把root后面的路径改成我们刚刚打包好的dist目录就行了

1
2
3
4
5
6
7
8
server {
	listen 5173;
	server_name localhost;
	Location/{
		root /Users/yiny/vue-demo/dist;
		index index.html index.htm;
	}
}