前端项目容器化部署问题

原创已于 2026-03-22 20:58:26 修改 · 284 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

warrah

关注

标签

#前端 #docker

分类云计算与devops

于 2026-01-19 20:59:49 首次发布

岁月会计云——前端开发专栏收录该内容

74 篇文章

订阅专栏

可能对很多人来说不是问题，但是如果我尝试分析之前工程师做法的时候，总能发现一些很奇怪的操作
前端工程容器化，一般都会有一个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

docker run -tid --restart=always -d --user root --privileged=true -v /etc/localtime:/etc/localtime -p 8080:8080 -p 50000:50000 -v /home/jenkins/:/var/jenkins_home -v $(which docker):/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 --name jenkins jenkins/jenkins:2.346.1-lts

需要进去到jenkins中，执行

ssh-keygen -t rsa -b 4096 -C "eayc@jenkins"
# 然后将这个里面的内容拷贝到git中
root@d064e77749b3:/# ssh-keygen -t rsa -b 4096 -C "eayc@jenkins"
Generating public/private rsa key pair.
Enter file in which to save the key (/root/.ssh/id_rsa): 
Enter passphrase (empty for no passphrase): 
Enter same passphrase again: 
Your identification has been saved in /root/.ssh/id_rsa
Your public key has been saved in /root/.ssh/id_rsa.pub
The key fingerprint is:
SHA256:ffNcGLNZ82KFKKriu6cA23ABohhijxQ2NW7HNQgiwEY eayc@jenkins
The key's randomart image is:
+---[RSA 4096]----+
|@Eo+. .o         |
|X=* o.. .    . . |
|+..+ o    . . +.o|
|  ...    o .   Oo|
|o .     S . o * o|
| *     .   . = o |
|. o . .       o  |
|   o ..          |
|    ==           |
+----[SHA256]-----+
root@d064e77749b3:/# cat /root/.ssh/id_rsa.pub
ssh-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中进行验证

git ls-remote -h git@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。

 sudo dnf -y install dnf-plugins-core
 sudo dnf config-manager --add-repo https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
 sudo dnf install -y docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin

nacos配置

宿主机的端口需要开放

开放dubbo的端口

# 根据你自己的dubbo来
firewall-cmd --permanent --zone=public --add-port=28220-28250/tcp
# 重新加载
firewall-cmd --reload

端口虽然开放，但是还是有问题，提示

Caused by: org.apache.dubbo.remoting.RemotingException: client(url: dubbo://172.19.0.2:28222/org.apache.dubbo.metadata.MetadataService?codec=dubbo&connections=1&corethreads=2&dubbo=2.0.2&group=eayc-user-server&heartbeat=60000&port=28222&protocol=dubbo&release=3.0.12&retries=0&side=provider&threadpool=cached&threads=100&timeout=5000&version=1.0.0) failed to connect to server /172.19.0.2:28222 client-side timeout 3000ms (elapsed: 3002ms) from netty client 172.20.0.2 using dubbo version 3.0.12

原因是两个微服务不在一个网络中

[root@portainer ~]# docker inspect eayc-user-server | grep -A 15 "Networks"
            "Networks": {
                "eayc-user-server_default": {
                    "IPAMConfig": null,
                    "Links": null,
                    "Aliases": [
                        "eayc-user-server",
                        "eayc-user-server"
                    ],
                    "DriverOpts": null,
                    "GwPriority": 0,
                    "NetworkID": "ef7bcfbc27b0ae8abc9e1628a51bba9385227f823da810bcead6669ddfab67d4",
                    "EndpointID": "95e644c293c10a3f76f900c979e61e6332d80f99b143e4fa64691fbd0808e5ec",
                    "Gateway": "172.19.0.1",
                    "IPAddress": "172.19.0.2",
                    "MacAddress": "ca:05:0c:ac:20:9c",
                    "IPPrefixLen": 16,
[root@portainer ~]# docker inspect acc-mbms-server | grep -A 15 "Networks"
            "Networks": {
                "acc-mbms-server_default": {
                    "IPAMConfig": null,
                    "Links": null,
                    "Aliases": [
                        "acc-mbms-server",
                        "acc-mbms-server"
                    ],
                    "DriverOpts": null,
                    "GwPriority": 0,
                    "NetworkID": "3aa3ac7520a8dba33e9b552829bf7b1566422095bd6d6102a1bb96462ffec6aa",
                    "EndpointID": "ffb225a230e1b6c06d153331f88f0a8f07bbd591aa621d08f70b9f981c2a24f7",
                    "Gateway": "172.20.0.1",
                    "IPAddress": "172.20.0.2",
                    "MacAddress": "f2:ad:fb:82:87:e7",
                    "IPPrefixLen": 16,

定义网路

docker network create eayc-network

调整docker-compose.yml，于是

version: '3.8'

networks:
  eayc-network:
    external: true


services:
  acc-mbms-server:
    image: 10.101.10.9:8081/eayc/acc-mbms-server:3.0.0-2026.3.22-3
    container_name: acc-mbms-server
    restart: unless-stopped
    networks:
      - eayc-network       # 使用同一个网络
    environment:
      - SPRING_APPLICATION_JSON={"nacos":{"server-addr":"10.101.10.19:8848","namespace":"prod","dubbo-addr":"10.101.10.19:8848","dubbo-namespace":"dubbo-prod"}}
      # Spring Profile 可以单独设置
      - SPRING_PROFILES_ACTIVE=prod
    volumes:
      - acc-mbms-server_logs:/application/logs  # 将数据持久化到命名卷
      - acc-mbms-server_upload:/application/upload
    ports:
      - "30508:8368"  # 格式： 主机端口:容器端口
volumes:
  acc-mbms-server_logs:  # 声明一个命名卷
  acc-mbms-server_upload: 
    # driver: local # 默认就是local驱动，通常无需指定