Docker Desktop 打包Unity WebGL 程序，在Docker 中运行Unity WebGL 程序

Docker Desktop 打包Unity WebGL 程序，在Docker 中运行Unity WebGL 程序

目录

1. 环境准备
2. Nginx配置
3. 容器操作
4. 镜像管理
5. 常用命令

---

环境准备

前提条件

• 已安装Unity并完成WebGL构建
• 已安装Docker环境

验证Docker安装

# 检查Docker版本
docker --version

# 测试基础功能
docker pull hello-world
docker run hello-world

获取Nginx镜像

#获取最新版本nginx
docker pull nginx

#获取指定版本的ngixn
docker pull nginx:1.25.3      

---

Nginx配置

目录结构准备

mkdir F:\DockerHostFiles\nginx_data\html
mkdir F:\DockerHostFiles\nginx_data\conf

配置文件 (default.conf)

这里的配置很奇怪，只要有server块就行，有其他块会报错。

server {
    listen       7963;
    server_name  localhost;
    root   /usr/share/nginx/html;
    index  index.html index.htm;

    # 日志配置
    error_log  /var/log/nginx/error.log debug;
    access_log /var/log/nginx/access.log main;

    # 静态文件服务
    location / {
        try_files $uri $uri/ /index.html;
        gzip off;  # 禁用动态压缩
        
        # CORS配置
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
    }

    # 预压缩文件处理
    location ~ \.gz$ {
        sendfile off;
        directio off;
        tcp_nopush off;
        gzip off;
        add_header 'Content-Encoding' 'gzip';

        # 按类型设置MIME
        location ~ \.js\.gz$ { types { application/javascript gz; } }
        location ~ \.wasm\.gz$ { types { application/wasm gz; } }
        location ~ \.data\.gz$ { default_type application/octet-stream; }
    }

    # 原始文件处理
    location ~ \.(js|wasm|data)$ {
        sendfile off;
        location ~ \.js$ { types { application/javascript js; } }
        location ~ \.wasm$ { types { application/wasm wasm; } }
        location ~ \.data$ { default_type application/octet-stream; }
    }

    # 错误页面
    error_page 404 /404.html;
    location = /404.html { internal; }
}

配置2

server {
    listen 7963;
    server_name localhost;
    root /usr/share/nginx/html;
    index index.html index.htm;

    # 日志配置
    error_log /var/log/nginx/error.log;
    access_log /var/log/nginx/access.log;

    # 开启静态gzip服务（自动提供预压缩文件）
    gzip_static on;

    location / {
        try_files $uri $uri/ /index.html;
        
        # CORS配置
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        
        # 禁用动态压缩（使用预压缩）
        gzip off;
    }

    # 正确设置MIME类型
    location ~ \.js$ {
        types { }  # 清除默认类型
        default_type application/javascript;
    }
    
    location ~ \.wasm$ {
        types { }
        default_type application/wasm;
    }
    
    location ~ \.data$ {
        types { }
        default_type application/octet-stream;
    }

    # 错误页面
    error_page 404 /404.html;
    location = /404.html {
        internal;
    }
}

容器操作

启动Nginx容器

运行nginx并且设置卷映射，
这里映射的端口应该和ngixn中的端口一致，在主机的58231端口绑定到容器的7963端口上

docker run -d --name my-nginx docker	运行容器名称为 my-nginx
-v F:\DockerHostFiles\nginx_data\html:/usr/share/nginx/html \	绑定html路径
-v F:\DockerHostFiles\nginx_data\conf:/etc/nginx/conf.d \	绑定conf路径
-p 58231:7963 \	绑定端口主机端口58231 映射到docker的7963端口
nginx	使用的镜像是 nginx

docker run -d --name my-nginx \
  -v F:\DockerHostFiles\nginx_data\html:/usr/share/nginx/html \
  -v F:\DockerHostFiles\nginx_data\conf:/etc/nginx/conf.d \
  -p 58231:7963 \
  nginx

镜像管理

提交容器为新镜像

-a 创作者名称
-m 日志信息
my-nginx 容器名称
my-nginx-unity-webgl-app 导出的新的镜像名称

命令内容
docker commit	提交
-a	作者名称
-m	日志内容
my-nginx	容器名称
my-nginx-unity-webgl-app	保存的镜像名称

docker commit -a "wyh" -m "Unity WebGL应用镜像" my-nginx my-nginx-unity-webgl-app

这时候可以使用docker images 看到有一个新的镜像被添加到镜像列表

导出镜像

将指定的镜像保存到指定的路径中，路径应使用双引号包裹

docker save -o	将文件保存输出
“M:\DockerHostFiles\outFiles\Nginx_outFiles\my-unity-webgl-app.tar”	输出路径，包名
my-nginx-unity-webgl-app

docker save -o "M:\DockerHostFiles\outFiles\Nginx_outFiles\my-unity-webgl-app.tar" my-nginx-unity-webgl-app

导入镜像

将刚刚的镜像导入到docekr中，但是需要先将之前的镜像删除docker rmi my-nginx-unity-webgl-app

docker load -i	docker 加载
“M:\DockerHostFiles\outFiles\Nginx_outFiles\my-unity-webgl-app.tar”	被包的路径

docker load -i "M:\DockerHostFiles\outFiles\Nginx_outFiles\my-unity-webgl-app.tar"

验证镜像

docker images

常用命令参考

# 查看Docker系统信息
docker info

# 查看版本信息
docker version

# 查看运行中的容器
docker ps

# 查看所有容器
docker ps -a

# 重启容器
docker restart [容器名称/ID]

# 启动已停止容器
docker start [容器名称/ID]

# 停止容器
docker stop [容器名称/ID]

# 执行容器内命令
# 在my-nginx 这个容器中执行nginx -s reload 命令
docker exec -it my-nginx nginx -s reload