介绍Nginx:
高性能:Nginx以事件驱动的方式处理请求,能够高效地处理大量并发连接,适合高负载的场景。
资源消耗低:相比其他Web服务器,Nginx占用的系统资源更少,能够在相同硬件上处理更多的请求。
可扩展性:Nginx支持模块化的架构,可以通过添加模块来扩展功能,满足不同需求。
反向代理和负载均衡:Nginx内置了反向代理和负载均衡功能,能够有效地分发请求到多个后端服务器。
高可靠性:Nginx经过长时间的实际应用验证,稳定性和可靠性较高。
总的来说,Nginx在高性能、低资源消耗、可扩展性和高可靠性方面表现出色,因此被广泛选择作为Web服务器和反向代理服务器。
安装 Nginx
一般的,我们都是使用 Docker 来进行这个 Nginx 的安装
要在Docker中安装Nginx,可以按照以下步骤进行操作:
首先,确保你已经安装了Docker。如果没有安装,可以根据你的操作系统在Docker官方网站上找到相应的安装指南。
打开终端或命令行界面,执行以下命令来拉取Nginx镜像:
docker pull nginx
这将从Docker Hub上拉取最新的Nginx镜像到你的本地环境。
当镜像拉取完成后,可以使用以下命令来创建并运行一个Nginx容器:
docker run --name mynginx -d -p 80:80 nginx
这个命令将创建一个名为mynginx的容器,并将容器的80端口映射到宿主机的80端口,使得可以通过浏览器访问Nginx服务。
现在,你可以通过浏览器访问http://localhost来查看Nginx默认页面,或者使用宿主机的IP地址来访问Nginx服务。
这样就完成了在Docker中安装Nginx的过程。
Nginx 的相关配置
worker_processes 1; # worker进程的数量 events { # 事件区块开始 worker_connections 1024; # 每个worker进程支持的最大连接数 } # 事件区块结束 http { # HTTP区块开始 include mime.types; # Nginx支持的媒体类型库文件 default_type application/octet-stream; # 默认的媒体类型 sendfile on; # 开启高效传输模式 keepalive_timeout 65; # 连接超时 server { # 第一个Server区块开始,表示一个独立的虚拟主机站点 listen 80; # 提供服务的端口,默认80 server_name localhost; # 提供服务的域名主机名 location / { # 第一个location区块开始 root html; # 站点的根目录,相当于Nginx的安装目录 index index.html index.htm; # 默认的首页文件,多个用空格分开 } # 第一个location区块结果 error_page 500502503504 /50x.html; # 出现对应的http状态码时,使用50x.html回应客户 location = /50x.html { # location区块开始,访问50x.html root html; # 指定对应的站点目录为html } }
其实我们相对来说只需要关注 location 中的相关配置就可以了,
但是对于 Nginx 了不起还是想多说一下这个的。
Nginx 的正向代理
正向代理是指代理服务器代表客户端向服务器发出请求,然后将服务器的响应返回给客户端。在Nginx中,可以通过配置代理服务器来实现正向代理功能。具体的配置如下:
server { listen 80; server_name localhost; location / { proxy_pass http://example.com; # 将请求转发到指定的服务器 proxy_set_header Host $host; # 设置请求头中的Host字段 proxy_set_header X-Real-IP $remote_addr; # 设置请求头中的真实IP地址 proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; # 设置请求头中的转发地址 proxy_set_header X-Forwarded-Proto $scheme; # 设置请求头中的协议类型 } }
以上配置将客户端的请求转发到http://example.com,并且在转发过程中设置了一些请求头信息,以便服务器能够正确处理请求。
Nginx的反向代理
Nginx的反向代理是指Nginx作为客户端与其他服务器进行通信,并将客户端的请求转发到这些服务器上。这种代理隐藏了真实的服务器,客户端只知道与Nginx通信,而不知道真正处理请求的服务器是谁。反向代理可以用于负载均衡、安全性增强和缓存等方面。
在Nginx中配置反向代理:
location / { proxy_pass http://backend_server; }
其中backend_server是真实服务器的地址。这样,当客户端发送请求时,Nginx会将请求转发到backend_server上,并将响应返回给客户端。
Nginx 的错误页面配置
在nginx中,可以通过配置自定义错误页面来提供更友好的用户体验。你可以在nginx的配置文件中使用error_page指令来指定不同错误码对应的错误页面,例如:
error_page 404 /404.html; error_page 500 502 503 504 /50x.html;
上面的配置指定了当出现404错误时,显示404.html页面;当出现500、502、503、504错误时,显示50x.html页面。
如果你想为所有的错误码都显示同一个错误页面,可以这样配置:
error_page 500 502 503 504 /error.html;
这样就会将所有500系列的错误都显示error.html页面。
一般如果我们选择部署前端项目并且使用 Nginx 的话,那么我们不需要单独的去启动这个 Nginx ,
Docker部署nginx
Docker 部署前端服务
准备工作:
1:准备 Nginx 镜像
2:准备 Dockerfile 文件
3:准备 Nginx 的配置文件
4:准备前端dist包
5:打包
6:启动
我们刚才已经说了这个 Nginx 的安装了,已经准备好了,接下来就是准备 Dockerfile 文件
# 使用nginx镜像 FROM nginx # 作者 MAINTAINER zhiyikeji # 删除nginx 默认配置 RUN rm /etc/nginx/conf.d/default.conf # 添加我们自己的配置 default.conf 在下面 ADD default.conf /etc/nginx/conf.d/ # 把刚才生成dist文件夹下的文件copy到nginx下面去 COPY dist/ /usr/share/nginx/html/
上面的内容就是 Dockerfile 文件中的内容
nginx 的配置文件 default.conf
server { listen 17878; server_name 192.168.10.1; #charset koi8-r; #access_log /var/log/nginx/log/host.access.log main; location /api/{ proxy_pass http://192.168.10.1:18081/; } location / { root /usr/share/nginx/html; index index.html index.htm; try_files $uri $uri/ /index.html; } #error_page 404 /404.html; # redirect server error pages to the static page /50x.html # error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } # proxy the PHP scripts to Apache listening on 127.0.0.1:80 # #location ~ \.php$ { # proxy_pass http://127.0.0.1; #} # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000 # #location ~ \.php$ { # root html; # fastcgi_pass 127.0.0.1:9000; # fastcgi_index index.php; # fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name; # include fastcgi_params; #} # deny access to .htaccess files, if Apache's document root # concurs with nginx's one # #location ~ /\.ht { # deny all; #} }
前端dist包我们直接冲前端要一份即可。
打包命令如下:
docker build -t vue-app .
启动命令如下:
docker run -d --name vue-app -p 8080:80 vue-app