一文教你学会使用Nginx
source link: https://server.51cto.com/article/777723.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
一文教你学会使用Nginx
前段时间，了不起给大家说过如果使用 Docker 发布自己的后端项目，也就不再使用 Jar 包进行项目的发版操作，但是这其中就又涉及到了前端如何发版，为什么这么说，因为资深前端开发，可能知道各种发版内容等，但是对于一般的前端开发来说，走到build后，就已经算是比较不错了，接下来如果没有运维的话，那么在不使用 jekins 的情况下，就只能是后端来进行发版了，今天我们讲讲这个docker 是如何发布前端应用的。
现在部署前端服务，肯定少不了 Nginx，了不起就先从这个 Nginx 来开始讲一下吧。
“Nginx是一款轻量级的HTTP服务器，采用事件驱动的异步非阻塞处理方式框架，这让其具有极好的IO性能，时常用于服务端的反向代理和负载均衡。”
选择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页面。
另外，你也可以使用变量来动态指定错误页面的路径，例如：
error_page 404 = /custom404.php;这样就可以根据具体情况动态指定404错误对应的页面路径。
了解完这些内容，我们就可以来看一下部署这个前端应用了。
一般如果我们选择部署前端项目并且使用 Nginx 的话，那么我们不需要单独的去启动这个 Nginx ，
而我们使用的则是通过前端的依赖，导入这个 Nginx ,也相当于是依赖这个 Nginx,我们来看看这个 Docker怎么部署，
Docker 部署前端服务
准备工作：
1：准备 Nginx 镜像
2：准备 Dockerfile 文件
3：准备 Nginx 的配置文件
4：准备前端dist包
我们刚才已经说了这个 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 17878:19529 vue-app这样我们就发版完成了，是不是很简单，但是你要了解Nginx 的相关内容才算是了解了。你学会了么？
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK