以構建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: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 --restart=unless-stopped -v /usr/local/im-web/dist:/usr/share/nginx/html im-web:1.0