Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目

简介: Nginx配置详解Docker部署Nginx使用Nginx部署vue前端项目

介绍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


相关文章
|
30天前
|
应用服务中间件 BI nginx
Nginx的location配置详解
【10月更文挑战第16天】Nginx的location配置详解
|
9天前
|
存储 负载均衡 中间件
Nginx反向代理配置详解,图文全面总结,建议收藏
Nginx 是大型架构必备中间件,也是大厂喜欢考察的内容,必知必会。本篇全面详解 Nginx 反向代理及配置,建议收藏。
Nginx反向代理配置详解,图文全面总结,建议收藏
|
22天前
|
应用服务中间件 API nginx
nginx配置反向代理404问题
【10月更文挑战第18天】本文介绍了使用Nginx进行反向代理的配置方法,解决了404错误、跨域问题和302重定向问题。关键配置包括代理路径、请求头设置、跨域头添加以及端口转发设置。通过调整`proxy_set_header`和添加必要的HTTP头,实现了稳定的服务代理和跨域访问。
115 1
nginx配置反向代理404问题
|
7天前
|
应用服务中间件 网络安全 nginx
轻松上手Nginx Proxy Manager:安装、配置与实战
Nginx Proxy Manager (NPM) 是一款基于 Nginx 的反向代理管理工具,提供直观的 Web 界面,方便用户配置和管理反向代理、SSL 证书等。本文档介绍了 NPM 的安装步骤,包括 Docker 和 Docker Compose 的安装、Docker Compose 文件的创建与配置、启动服务、访问 Web 管理界面、基本使用方法以及如何申请和配置 SSL 证书,帮助用户快速上手 NPM。
34 1
|
11天前
|
资源调度 前端开发 JavaScript
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第10天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤,包括安装依赖、创建混淆脚本、修改 `package.json` 脚本命令、构建项目并执行混淆,以及在 HTML 文件中引用混淆后的文件。通过这些步骤,可以有效提高代码的安全性。
|
27天前
|
缓存 负载均衡 应用服务中间件
Nginx配置
【10月更文挑战第22天】在实际配置 Nginx 时,需要根据具体的需求和环境进行调整和优化。同时,还需要注意配置文件的语法正确性和安全性。
46 7
|
29天前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
|
1月前
|
前端开发 JavaScript 应用服务中间件
终极 Nginx 配置指南
本文介绍了Nginx的基本配置及其优化方法。首先,通过删除注释简化了Nginx的默认配置文件,使其更易于理解。接着,文章将Nginx配置文件分为全局块、events块和http块三部分进行详细解释。此外,还提供了如何快速上线网站、解决前端history模式404问题、配置反向代理、开启gzip压缩、设置维护页面、在同一IP上部署多个网站以及实现动静分离的具体配置示例。最后,附上了Nginx的基础命令,包括安装、启动、重启和关闭等操作。
|
14天前
|
前端开发 JavaScript 安全
vite3+vue3 实现前端部署加密混淆 javascript-obfuscator
【11月更文挑战第7天】本文介绍了在 Vite 3 + Vue 3 项目中使用 `javascript-obfuscator` 实现前端代码加密混淆的详细步骤。包括项目准备、安装 `javascript-obfuscator`、配置 Vite 构建以应用混淆,以及最终构建项目进行混淆。通过这些步骤,可以有效提升前端代码的安全性,防止被他人轻易分析和盗用。
|
1月前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
155 0
下一篇
无影云桌面