私有化轻量级持续集成部署方案--03-部署web服务(下)
提示:本系列笔记全部存在于
Github,
可以直接在
Github 查看全部笔记
配置接口代理
前后端分离情况下,前端请求后端接口最常用的一种方式就是使用反向代理,反向代理会让浏览器认为是同源路径,也就实现了跨域操作。
目前流行的前端打包器,webpack
、vite
在开发模式,都具有反向代理的配置。
Nginx
服务器,反向代理也是最重要的功能之一,之前的 网关
实现方式就是使用了反向代理。此篇中主要是配置接口代理 和 通过镜像参数 配置 Nginx
接口代理
Dev 测试
当前使用的 web 模板项目中对于开发环境的 API 代理和访问接口请求都已经设置好了。只需要设置一下配置地址。
接口是在网上找的一个,接口地址为: http://jsonplaceholder.typicode.com/posts/1
.env.development 文件中配置代理域名地址
使用 Http 模块请求
配置完毕后使用 npm run dev
运行便可以看到请求结果。
Nginx 代理接口
Nginx
中使用代理也极为简单,只需要配置 location
events {
worker_connections 1024;
}
http {
include mime.types;
default_type text/html;
sendfile on;
keepalive_timeout 65;
charset utf-8;
error_log /var/log/nginx/error.log;
access_log /var/log/nginx/access.log;
server {
listen 80;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location ~* /api/(.*) {
resolver 8.8.8.8;
proxy_set_header Host $proxy_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-NginX-Proxy true;
proxy_pass http://jsonplaceholder.typicode.com/$1$is_args$args;
}
}
}
第二个 location 就是配置 API 接口代理。
location 配置了监听路由以 /api 开头的请求路由。将 /api 开头的请求路由转发到 proxy_pass 属性值
监听路由使用了正则匹配, proxy_pass 属性值中的 $1 是 location 监听路由中 (.*) 的匹配项。
注意:
- 使用域名做反向代理地址时,需要添加 resolver 解析。 https://developer.aliyun.com/article/486252
- 使用域名访问时,需要改变 Host 请求头,否则会报 403。https://blog.csdn.net/liyyzz33/article/details/95340765
添加成功后可以重新打包镜像然后本地部署测试。正常的情况下就如下图可以正常访问。
镜像版本改为 1.0.1
代理地址参数化
接下来完成一个操作:将 API 代理地址变为启动容器参数化配置。
参数化可以将 API 代理地址作为一个变量的形式脱离于镜像。具有更好的扩展性。
代理地址参数化思路
代理地址参数化这个操作可以分为两个步骤思考
使用 Nginx
变量
第一步是将 Nginx
中 proxy_pass 属性值变量化,Nginx
配置中是支持变量的,变量定义是以 $ 开头的。
Nginx
自身有许多变量提供,例如 $host。 Nginx
还支持自定义变量。 可以使用 set 定义变量,使用变量可以设置属性值。
proxy_pass 属性值可以使用一个变量设置 $SERVER_URL。
location ~* /api/(.*) {
resolver 8.8.8.8;
proxy_set_header Host $proxy_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-NginX-Proxy true;
proxy_pass $SERVER_URL/$1$is_args$args;
}
$SERVER_URL 这个变量怎么定义呢?
Nginx
支持在配置文件中定义变量,也支持在一个文件中定义变量,nginx.conf 中使用 include 引入定义变量的文件。
配置文件中可以引用一个文件(/etc/nginx/conf.d/*.variable),然后将变量定义在这个文件。
server {
listen 80;
include /etc/nginx/conf.d/*.variable;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
location ~* /api/(.*) {
resolver 8.8.8.8;
proxy_set_header Host $proxy_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-NginX-Proxy true;
proxy_pass $SERVER_URL/$1$is_args$args;
}
}
定义 Nginx 变量
第二步是定义创建 /etc/nginx/conf.d/*.variable 文件逻辑
这个逻辑需要在 Dockerfile
定义。可以直接写在 Dockerfile
中。
在此我定义了一个 .sh 文件, Dockerfile
中定义执行 .sh 文件。
#/bin/bash
# 设置多个环境变量到 environment variable
# echo -e "set \$variable1 $PATH;
# set \$variable2 $PATH;
# set \$variable3 $PATH;" >
# 设置单个环境变量到 environment variable
echo set \$SERVER_URL $SERVER_URL\; > /etc/nginx/conf.d/server.variable
deploy 目录中创建一个 variable.sh 文件,此文件中写入 创建变量文件
echo
命令将设置变量写入到 /etc/nginx/conf.d/server.variable 文件中。
第一个 $SERVER_URL 是 Nginx
变量名称,第二个 $SERVER_URL 是 Nginx
变量值,而这个变量值又是一个变量,这个变量由 Docker
提供。
此 .sh 执行配置写在 Dockerfile
FROM nginx:latest
COPY ./dist /usr/share/nginx/html
COPY ./deploy/nginx.conf /etc/nginx
# 创建存放sh文件目录
RUN mkdir /etc/nginx/sh
# 将 sh 文件 copy 到 镜像文件内
COPY ./deploy/variable.sh /etc/nginx/sh
# 设置环境变量初始值
ENV SERVER_URL=http://jsonplaceholder.typicode.com
# 设置variable.sh 执行权限
RUN chmod a+x /etc/nginx/sh/variable.sh
# 执行sh文件
RUN ["sh", "/etc/nginx/sh/variable.sh"]
# 容器应用端口
EXPOSE 80
在 Dockerfile
文件中新增了
- 创建了存放 sh 目录。
- 将 varibale.sh 文件拷贝到镜像内
- 使用 ENV 命令提供一个环境变量的默认值
- 设置 sh 执行权限
- RUN 命令执行 sh 文件
新增的命令是将 sh 文件写入到镜像中,进行执行。并设置了环境变量初始值。
代理地址参数化部署
测试部署
此时可以构建镜像进行本地测试,在此直接贴出测试结果。
进入容器内部查看 /etc/nginx/conf.d/server.variable 文件已经成功写入。
启动容器时没有设置 -e 属性,默认使用的是镜像内部默认值。可以启动容器时指定环境变量。有兴趣朋友可以将默认值改为其它值就行测试。
docker run --name web -p 7777:80 -itd -e SERVER_URL=http://jsonplaceholder.typicode.com yxs970707/deploy-web-demo:1.0.1
服务器部署
测试成功后,将镜像推送到 Docker Hub
, 进行重新部署
注意:重新部署前注意要清除原容器和 Volume,以保持整洁
version: '3.9'
volumes:
web-html:
name: web-html
driver: local
driver_opts:
o: bind
type: none
device: /volumes/web/html
web-nginx:
name: web-nginx
driver: local
driver_opts:
o: bind
type: none
device: /volumes/web/nginx
services:
nginx:
image: yxs970707/deploy-web-demo:1.0.1
container_name: web
restart: always
ports:
- 7777:80
volumes:
- web-html:/usr/share/nginx/html
- web-nginx:/etc/nginx
environment:
SERVER_URL: http://jsonplaceholder.typicode.com
以上是新的 YMAL 配置文件,
配置文件中添加了一个新增了一个新的 Volume,用于将容器内 /etc/ninx 目录文件暴露。
启动时配置了 SERVER_URL 环境变量。
PS: 需要创建 /volumes/web/nginx 和 /volumes/web/html 目录
使用此文件进行启动,启动成功后进行访问。
因为使用了 Volume 挂载了 /etc/nginx,可以在宿主机目录查看 .sh 和 .variable 文件
设置网关
部署完 web 项目后,接下来设置这个服务的网关
。
当前服务要部署到主域名。
第一步
申请并上传服务器 SSL 证书,并且创建 /volumes/gateway/logs/web 目录
第二步
网关(Nginx)
文件中配置 web 项目,代理到 7777 端口。
events {
worker_connections 1024;
}
http {
include mime.types;
default_type text/html;
sendfile on;
keepalive_timeout 65;
charset utf-8;
# 开启压缩
gzip on;
# 文件压缩类型
gzip_types text/plain text/css application/javascript application/json application/xml;
#设置压缩比率
gzip_comp_level 5;
server {
#SSL 访问端口号为 443
listen 443 ssl http2;
#填写绑定证书的域名
server_name mwjz.live;
#日志
error_log /var/log/nginx/web/error.log;
access_log /var/log/nginx/web/access.log;
#证书文件
ssl_certificate /etc/nginx/conf.d/ssl/mwjz/mwjz.live_bundle.crt;
#证书密钥文件
ssl_certificate_key /etc/nginx/conf.d/ssl/mwjz/mwjz.live.key;
ssl_ciphers SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!3DES:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
location / {
proxy_pass http://10.0.24.12:7777;
}
}
server {
#SSL 访问端口号为 443
listen 443 ssl http2;
#填写绑定证书的域名
server_name portainer.mwjz.live;
#日志
error_log /var/log/nginx/portainer/error.log;
access_log /var/log/nginx/portainer/access.log;
#证书文件
ssl_certificate /etc/nginx/conf.d/ssl/portainer/portainer.mwjz.live_bundle.crt;
#证书密钥文件
ssl_certificate_key /etc/nginx/conf.d/ssl/portainer/portainer.mwjz.live.key;
ssl_ciphers SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!3DES:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
location / {
proxy_pass http://10.0.24.12:9000;
}
}
server {
listen 80;
return 307 https://$host$request_uri;
}
}
第三步
上传配置文件并且重新加载配置文件
docker exec -it gateway nginx -s reload
重新加载 网关(Nginx)
配置后可以使用域名访问。
私有化轻量级持续集成部署方案--03-部署web服务(下)的更多相关文章
- 私有化轻量级持续集成部署方案--04-私有代码仓库服务-Gitea
提示:本系列笔记全部存在于 Github, 可以直接在 Github 查看全部笔记 企业级最流行的私有代码仓库是 Gitlab, 一开始我也打算部署 Gitlab作为私有代码仓库. 但部署完 d 成后 ...
- 私有化轻量级持续集成部署方案--06-私有镜像仓库-Harbor
提示:本系列笔记全部存在于 Github, 可以直接在 Github 查看全部笔记 针对私有镜像仓库的问题,Docker 官方提供了搭建仓库服务的镜像服务:registry,使用此镜像就可以部署私有仓 ...
- 私有化轻量级持续集成部署方案--03-部署web服务(上)
提示:本系列笔记全部存在于 Github, 可以直接在 Github 查看全部笔记 这一篇主要讲述部署一个 Web 项目,项目是我曾经搞的一个 VUE 模板项目:https://github.com/ ...
- 私有化轻量级持续集成部署方案--05-持续部署服务-Drone(上)
提示:本系列笔记全部存在于 Github, 可以直接在 Github 查看全部笔记 持续部署概述 持续部署是能以自动化方式,频繁而且持续性的,将软件部署到生产环境.使软件产品能够快速迭代. 在之前部署 ...
- 私有化轻量级持续集成部署方案--07-私有NPM仓库-Verdaccio
提示:本系列笔记全部存在于 Github, 可以直接在 Github 查看全部笔记 对于个人来说,私有NPM仓库 作用性基本很小,但是对于企业,私有NPM仓库 可以保护代码暴露,具有很大的意义. 也是 ...
- 私有化轻量级持续集成部署方案--02-Nginx网关服务
提示:本系列笔记全部存在于 Github, 可以直接在 Github 查看全部笔记 这一篇中使用 Nginx 部署网关中心,用来代理服务器中服务.网关中心有优点也有缺点,也可以不采用网关系统. 部署 ...
- 持续集成环境--Tomcat热部署导致线程泄漏
一.问题由来 我们组用jenkins部署了持续集成环境,(jenkins部署war包到远程服务器的tomcat). 每次提交了代码,jenkins上一键构建,就可以自动拉取最新代码,打war包,热部署 ...
- 用Jenkins+Gradle+Jetty实现持续集成、测试、部署
自动集成有很多种方案,本例用到的工具是Jenkins(前身Hudson)+Gradle+Jetty,关于Gradle可参考上一篇,Gradle常见问题. 本例项目名称: WAP Jetty 安装Jen ...
- 持续集成之Jenkins自动部署war包到远程服务器
一.无war包链接的情况 无war包链接时,需先下载war包到本地,然后执行: ---------------------------------------------以下部分为转载-------- ...
随机推荐
- java 多态 总结
1.前言 引用教科书解释: 多态是同一个行为具有多个不同表现形式或形态的能力. 多态就是同一个接口,使用不同的实例而执行不同操作. 通俗来说: 总结:多态的抽象类与接口有点相似: 父类不需要具体实现方 ...
- 详解Scrapy的命令行工具
接触过Scrapy的人都知道,我们很多操作是需要借助命令行来执行的,比如创建项目,运行爬虫等.所以了解和掌握这些命令对于scrapy的学习是很有帮助的! Scrapy 命令 首先,在scrapy命令中 ...
- python驱动SAP完成数据导出(一)
写在前面 我们使用Python驱动SAP时,经常会需要导出一些SAP报表数据至本地Excel文件.这个看似简单的问题背后,其实暗藏玄机,今天小爬就带各位同学好好捋捋. 以事务代码FB03(凭证清单)为 ...
- 如何对K8s进行考核?Kuberhealthy来打个样!
2019年11月,在圣地亚哥KubeCon,我们发布了kuberhealth 2.0.0--将kuberhealthy作为合成监测的Kubernetes operator.这个新功能为开发人员提供了创 ...
- vue组件实现图片的拖拽和缩放
vue实现一个组件其实很简单但是要写出一个好的可复用的组件那就需要多学习和钻研一下,一个好的组件必须有其必不可少的有优点:一是能提高应用开发效率.测试性.复用性等:二是组件应该是高内聚.低耦合的:三是 ...
- FilterChain过滤器链(Servlet)
在 Web 应用中,可以部署多个 Filter,若这些 Filter 都拦截同一目标资源,则它们就组成了一个 Filter 链(也称过滤器链).过滤器链中的每个过滤器负责特定的操作和任务,客户端的请求 ...
- dataTaDataTable 详细教程
DataTable 选项说明 特性 jQueryUI:true/false:控制是否使用jqueryUI样式,需要引入jQueryUI的CSS autoWidth:true/false:控制Datat ...
- Tomcat-IDEA整合Tomcat服务器
Tomcat(IDEA整合Tomcat服务器) 可以加多个版本tomcat
- 在Chrome中打开网页时出现以下问题 您的连接不是私密连接 攻击者可能会试图从 x.x.x.x 窃取您的信息(例如:密码、通讯内容或信用卡信息)
现象:在Chrome中打开网页时出现以下问题 您的连接不是私密连接 攻击者可能会试图从 x.x.x.x 窃取您的信息(例如:密码.通讯内容或信用卡信息). 当点开"了解详情"后显示 ...
- python使用pip安装库超时报错解决办法
原因:pip源超时了,安装不上 pip install matplotlib -i http://pypi.douban.com/simple --trusted-host pypi.douban.c ...