news 2026/7/18 15:34:58

前端项目容器化部署问题

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
前端项目容器化部署问题

可能对很多人来说不是问题,但是如果我尝试分析之前工程师做法的时候,总能发现一些很奇怪的操作
前端工程容器化,一般都会有一个nginx.conf

user nginx; error_log /root/error.log warn; pid /var/run/nginx.pid; worker_processes 4; worker_cpu_affinity 0001 0010 0100 1000; worker_rlimit_nofile 65535 ; events { use epoll; worker_connections 2048; } http { include /etc/nginx/mime.types; default_type application/octet-stream; log_format main '$remote_addr - $remote_user [$time_local] "$request" ' '$status $body_bytes_sent "$http_referer" ' '"$http_user_agent" "$http_x_forwarded_for"'; access_log /root/access.log main; #优化hash 表 # 服务器名称哈希表的最大值,更多信息请参考nginx部分优化。 server_names_hash_max_size 512 ; ###################################### #开启高效的传输模式 sendfile on; # 告诉nginx在一个数据包里发送所有头文件,而不一个接一个的发送 tcp_nopush on; tcp_nodelay on; ###################################### #隐藏版本信息 server_tokens off; ###################################### # 设置连接超时 #设置客户端连接保持会话的超时世间,超过这个世间,服务器关闭该连接 keepalive_timeout 300; #设置客户端请求头读取超时世间,如果超过这个世间,客户端没有发送任何数据,nginx 将返回 "Request time out 408" client_header_timeout 300; #客户端请求主体读取超时世间,客户端没有发送任何数据,nginx 将返回 "Request time out 408" client_body_timeout 300; #客户端的响应超时时间。这个设置不会用于整个转发器,而是在两次客户端读取操作之间。如果在这段时间内,客户端没有读取任何数据,nginx就会关闭连接。 send_timeout 300; ###################################### #########文件上传##################################### client_max_body_size 50m; ##缓冲区代理缓冲用户端请求的最大字节数 client_body_buffer_size 256k; ############################################## #ceshi_config server_names_hash_bucket_size 128; client_header_buffer_size 500k; large_client_header_buffers 8 32k; #指定链接到后端的超时时间 fastcgi_connect_timeout 300; #向fastcgi 发送请求的超时时间,指两次捂手后向fastcgi 传输请求的超时时间 fastcgi_send_timeout 300; #fastcgi 应答超时时间 fastcgi_read_timeout 300; #fastcgi 应答需要多大的缓冲区 fastcgi_buffer_size 128k; #fastcgi 应答 指定本地需要用多少个和多大的缓冲区来缓冲 fastcgi_buffers 8 128k; #fastcgi 繁忙的时候buffers 大小 fastcgi_busy_buffers_size 256k; #fastcgi 临时文件大小 fastcgi_temp_file_write_size 256k; ###################################### #开启压缩 gzip on; #设置对数据启用压缩的最少字节数。大于1k才压缩 gzip_min_length 1k; #打开 4个单位为16k 的缓存流用作压缩 gzip_buffers 4 16k; #gzip_http 版本选择默认即可 现在的版本基本支持 #gzip_http_version 1.0; # 设置数据的压缩等级。这个等级可以是1-9之间的任意数值,9是最慢但是压缩比最大的。 gzip_comp_level 3; # 设置需要压缩的数据格式 文本 JavaScript 等。 #gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript; gzip_types text/css text/xml application/javascript application/atom+xml application/rss+xml text/plain ; # vary header 支持, 该选项让前端缓存服务器能缓存经过gzip压缩界面 gzip_vary on; # 为指定的客户端禁用gzip功能。我们设置成IE6或者更低版本以使我们的方案能够广泛兼容。 gzip_disable "MSIE [1-6]\."; #允许或者禁止压缩基于请求和响应的响应流。我们设置为any,意味着将会压缩所有的请求 gzip_proxied any; upstream proxyServer{ server 10.101.10.6:31350 weight=1; server 10.101.10.7:31350 weight=1; server 10.101.10.8:31350 weight=1; } upstream openapiProxyServer{ server 10.101.10.6:30202 weight=1; server 10.101.10.7:30202 weight=1; server 10.101.10.8:30202 weight=1; } upstream saccFront{ server 10.101.10.6:30507 weight=1; server 10.101.10.7:30507 weight=1; server 10.101.10.8:30507 weight=1; } upstream psiFront{ server 10.101.10.6:30511 weight=1; server 10.101.10.7:30511 weight=1; server 10.101.10.8:30511 weight=1; } include /etc/nginx/conf.d/*.conf; }

接着看conf.d下面有啥,default.conf不用管

我们看acc3-front.conf里面配置的是啥

server { listen 18002; server_name acc3-front; location / { root /application/acc3-front/dist; index index.html index.htm; try_files $uri $uri/ /index.html; proxy_set_header Host $host; proxy_set_header X-real-ip $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } location /api { add_header 'Access-Control-Allow-Origin' '*'; proxy_pass http://proxyServer/api; } location /jwt { add_header 'Access-Control-Allow-Origin' '*'; proxy_pass http://proxyServer/jwt; } location /openapi { add_header 'Access-Control-Allow-Origin' '*'; proxy_pass http://openapiProxyServer/openapi; } location /file { root /application/acc3-front/file; index index.html index.htm; try_files $uri $uri/ /index.html; } location /sacc { add_header 'Access-Control-Allow-Origin' '*'; proxy_pass http://10.8.15.237:30507/sacc; } location /psi { add_header 'Access-Control-Allow-Origin' '*'; proxy_pass http://psiFront/psi; } location = /50x.html { root html; } }

从上面可以看出nginx.conf中它增加了upstream,这块代码导致镜像可移植性变差,如何优雅的处理这个问题呢?

jenkins

在docker部署jenkins

dockerrun-tid--restart=always-d--userroot--privileged=true-v/etc/localtime:/etc/localtime-p8080:8080-p50000:50000-v/home/jenkins/:/var/jenkins_home-v$(whichdocker):/usr/bin/docker-v/var/run/docker.sock:/var/run/docker.sock-v/usr/lib/jvm:/usr/lib/jvm:ro-v/home/maven:/usr/local/maven--namejenkins jenkins/jenkins:2.346.1-lts

需要进去到jenkins中,执行

ssh-keygen-trsa-b4096-C"eayc@jenkins"# 然后将这个里面的内容拷贝到git中root@d064e77749b3:/# ssh-keygen -t rsa -b 4096 -C "eayc@jenkins"Generating public/private rsa key pair. Enterfileinwhichto save the key(/root/.ssh/id_rsa): Enter passphrase(emptyforno passphrase): Enter same passphrase again: Your identification has been savedin/root/.ssh/id_rsa Your public key has been savedin/root/.ssh/id_rsa.pub The key fingerprint is: SHA256:ffNcGLNZ82KFKKriu6cA23ABohhijxQ2NW7HNQgiwEY eayc@jenkins The key's randomart image is: +---[RSA4096]----+|@Eo+. .o||X=* o.....||+..+ o..+.o||... o.Oo||o.S.o * o||*..=o||.o..o||o..||==|+----[SHA256]-----+ root@d064e77749b3:/# cat /root/.ssh/id_rsa.pubssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAACAQCe/dHyQgWd+F+un2RmJXZTDaEoIUzI2RlQ/yEwPMrhy2RMdXhRfdXXyTR1FGMLpMBCbYVYlh9uTrRvaPBCLpV2KznEyM52lsazKMy4yOOcAI5KEt3WYlQMH6IyhDakf6CTD32DYCysyLlj4QoH0yI0UxMWWlJ6/AR8jx1knua1ij9J9noo2SrRiAEuUHuHudvitbA2+EpMGBb4dVBVccx8F2XVkHWMd41CMv7vJxm6gylSVy3OI1V5+xSNG7JL/DqoD/dIZukW33yVCdNT7j3OlVkLYzbQDqp4JyI2BsdEUOFPuZfMQcjKTOt5TqkmcTWbENy0gXx1Glw3lrOE+YFonw6NRA4yEZB/FgfLMw5+20sVL7p8OFuhZt7hQBnk8rwK4N+TLgLY2d7OOVADfTgaoKY0v8Ku69y0XCekGxgACAs6ioEfsK3rvnTKsPfE3wMSO+tHjcfXq8Y5UsW22fJwVDuvJ7eEDctsIoOYHBa7fqu3pvmugseLc2AbfskcDbscDtayq7f7o2Qe/KT+lXcsf/kZNOjwH6OzJRaaWgyDLf17VkxF3h8yt4z5BSvrEwl2CODMJqE0Zqm4knuYaak1XNQxBilETvxQVBxjLBT/zL4msgbR6/mgliS4mY6y1GQBCl+WTmZNb2TTFPMdFtSD4CRdHBtfhCCk1WmOWLb6fQ==eayc@jenkins


在docker的jenkins中进行验证

gitls-remote-hgit@10.101.10.3:/eayc/acc/micro/acc-voucher.git

git parameter插件

也可以离线安装,git parameter
直接复制到plugins目录

重启jenkins,结果提示:

还需要


centos7.9中安装node v18.20.4,但是安装yarn会有问题,于是换rockylinux操作系统。接着要在rockylinux中安装docker。

sudodnf-yinstalldnf-plugins-coresudodnf config-manager --add-repo https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.reposudodnfinstall-ydocker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/7/14 14:10:35

lychee-rerank-mm实操手册:Streamlit界面三区布局与核心操作逻辑

lychee-rerank-mm实操手册:Streamlit界面三区布局与核心操作逻辑 1. 项目简介 lychee-rerank-mm是一个专门为RTX 4090显卡(24G显存)优化的多模态重排序解决方案。该系统基于阿里通义千问Qwen2.5-VL多模态大模型架构,集成了Lyche…

作者头像 李华
网站建设 2026/7/14 14:10:36

新手如何入门TTS?IndexTTS-2-LLM可视化界面使用教程

新手如何入门TTS?IndexTTS-2-LLM可视化界面使用教程 想试试自己生成一段听起来很自然的语音吗?比如给视频配音、做有声书,或者让智能助手说话?以前这可能需要复杂的代码和专业的设备,但现在,有了像IndexTT…

作者头像 李华
网站建设 2026/7/14 14:10:35

游戏工作室必备:绕过常见多开检测的3种实用技巧(2023实测有效)

游戏工作室多开实战指南:2023年主流检测机制与破解方案深度解析 在游戏工作室的日常运营中,多开客户端是提升效率的核心手段之一。然而,随着游戏厂商反作弊系统的不断升级,传统多开工具逐渐失效。本文将深入剖析2023年主流游戏采用…

作者头像 李华
网站建设 2026/7/14 14:10:34

深入 Go 语言 GMP 调度模型:高并发的秘密武器

深入 Go 语言 GMP 调度模型:高并发的秘密武器在云原生和微服务架构盛行的今天,Go 语言凭借其卓越的并发处理能力脱颖而出。无论是处理百万级的 WebSocket 连接,还是应对高吞吐的 API 网关,Go 都能以极少的资源消耗保持高性能。这一…

作者头像 李华
网站建设 2026/7/14 14:10:37

FireRed-OCR Studio部署教程:WSL2环境下Windows本地开发调试流程

FireRed-OCR Studio部署教程:WSL2环境下Windows本地开发调试流程 1. 学习目标与前置准备 你是不是经常遇到这样的场景:拿到一份纸质文档或者PDF截图,想把里面的文字、表格甚至数学公式提取出来,手动敲键盘不仅费时费力&#xff…

作者头像 李华