前端项目容器化部署问题

可能对很多人来说不是问题,但是如果我尝试分析之前工程师做法的时候,总能发现一些很奇怪的操作

前端工程容器化,一般都会有一个nginx.conf

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里面配置的是啥

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,这块代码导致镜像可移植性变差,如何优雅的处理这个问题呢?

相关推荐
GISer_Jing2 小时前
2026前端技术潜在主流前沿方向
前端·人工智能·reactjs
切糕师学AI2 小时前
Vue 中的生命周期钩子
前端·javascript·vue.js
掘金-我是哪吒2 小时前
提升服务器性能,解决前端首页加载过慢的问题
运维·服务器·前端
暴富暴富暴富啦啦啦2 小时前
使用 v-html 仅渲染新数据的方法
前端·javascript·vue.js
light_in_hand2 小时前
CSS博客
前端·css
林_xi2 小时前
二次封装一个vue3签字板signature pad
前端·javascript·vue.js
w***76552 小时前
vue2和vue3的区别
前端·javascript·vue.js
n 55!w !1082 小时前
静态网页作业
前端·css·css3
缘木之鱼2 小时前
CTFshow __Web应用安全与防护 第一章
前端·安全·渗透·ctf·ctfshow