Docker: Building and Pushing H5 Images

📢 This article was translated by gemini-2.5-flash

Create a new directory and place your web files into ./dist.

In the root directory, create a dockerfile with this content:

1
2
3
4
5
6
# Use nginx:1.20 as the base image
FROM nginx:1.20
# Copy contents of the local 'dist' directory to /usr/share/nginx/html/dist/ inside the container.
COPY dist/ /usr/share/nginx/html/dist/
# Replace the Nginx image's default config with our local nginx.conf.
COPY nginx.conf /etc/nginx/nginx.conf

Create nginx.conf with this content:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
#user  nobody;
worker_processes  1;
events {
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    #tcp_nopush     on;
    keepalive_timeout  65;

    # HTTP server
    server {
        listen 80;
        server_name  localhost;

        location / {
            root   /usr/share/nginx/html/dist;
            index  index.html index.htm;
        }

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

Run this build command:

1
docker build -t username/imagename:v1.0 .

Tagging to Modify Image Name

Image naming convention for pushing:

1
docker push registry_username/image_name

To change the tag:

1
docker tag name username/imagename:v1.0

If you omit the tag, it defaults to latest when pushing. To push:

1
docker push username/imagename:v1.0

Reference Articles

docker: Packaging H5 Project Images

Pushing Docker Images to Docker Hub