Docker 不反映对 html 文件的更改答案

【问题标题】：Docker not reflecting changes to html fileDocker 不反映对 html 文件的更改
【发布时间】：2020-09-18 06:24:46
【问题描述】：

我正在构建一个 Webassembly 应用程序，而 Docker 没有反映对 html 文件的更改。在构建 Docker 文件之前，我会修剪系统，希望这会强制进行全新的构建。有什么指点吗？

FROM golang:alpine AS builder
ENV GO111MODULE=on \
    CGO_ENABLED=0 \
    GOOS=linux \
    GOARCH=amd64 

COPY . .
COPY ./server.go .
COPY ./favicon.ico .
COPY ./assets /assets
EXPOSE 8989
CMD ["go", "run", "./server.go"]

这就是我运行构建容器的方式。

docker system prune -a -f
docker build --no-cache -t test3 . 
docker run -it test3

html 文件作为我开始使用的第一个版本在 localhost 上运行。这是服务器。go

package main

import (
    "flag"
    "fmt"
    "net/http"
    "strings"
)

type FileSystem struct {
    fs http.FileSystem
}

var listen = flag.String("listen", ":8989", "listen address")
var dir = flag.String("dir", ".", "directory to serve")

func main() {
    flag.Parse()
    directory := "./"

    fileServer := http.FileServer(FileSystem{http.Dir(directory)})
    http.Handle("/", fileServer)

    fmt.Printf("Web server running. Listening on %q", *listen)
    err := http.ListenAndServe(*listen, http.FileServer(http.Dir(*dir)))
    fmt.Printf("%v\n", err)
}

func (fs FileSystem) Open(path string) (http.File, error) {
    f, err := fs.fs.Open(path)
    if err != nil {
        return nil, err
    }

    s, err := f.Stat()
    if s.IsDir() {
        index := strings.TrimSuffix(path, "/") + "/index.html"
        if _, err := fs.fs.Open(index); err != nil {
            return nil, err
        }
    }

    return f, nil
}

最后是html文件。

<!DOCTYPE HTML>
<html>
    <head>
        <title>Wasm 1.0</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
        <link rel="stylesheet" href="./assets/css/main.css" />
        <link rel="icon" href="./favicon.ico?v=1">
        <link rel="icon" type="image/png" sizes="96x96" href="./assets/images/icons/icon-96x96.png">
        <link rel="icon" type="image/png" sizes="96x96" href="./assets/images/icons/icon-128x128.png">
        <link rel="icon" type="image/png" sizes="96x96" href="./assets/images/icons/icon-144x144.png">
        <link rel="icon" type="image/png" sizes="96x96" href="./assets/images/icons/icon-152x152.png">
        <link rel="icon" type="image/png" sizes="96x96" href="./assets/images/icons/icon-192x192.png">
        <link rel="icon" type="image/png" sizes="96x96" href="./assets/images/icons/icon-384x384.png">
        <link rel="icon" type="image/png" sizes="96x96" href="./assets/images/icons/icon-384x384.png">
        <link rel="manifest" href="./assests/manifest.json">
        <meta name="msapplication-TileColor" content="#ffffff">
        <meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
        <meta name="theme-color" content="#ffffff">
    </head>
    <body class="is-preload">
        <script src="./assets/js/wasm_exec.js"></script>
        <script>
        wasm_filename = "./assets/main.wasm";   
        function message(s){
            document.getElementById("message").textContent = s;
        }

        function load_wasm(){
            if (!WebAssembly.instantiateStreaming) { // polyfill
                WebAssembly.instantiateStreaming = async (resp, importObject) => {
                    const source = await (await resp).arrayBuffer();
                    return await WebAssembly.instantiate(source, importObject);
                };
            }

            const go = new Go();

            WebAssembly.instantiateStreaming(fetch(wasm_filename), go.importObject)
            .then(results => { go.run(results.instance); })
            .catch((err) => {
                message("Error Loading WebAssembly - " + err);
                console.error(err);
        //      location.reload(true);
                });
        }

        load_wasm()
    </script>
    <nav id="nav">
        <ul class="container">
            <li><a href="/">Reload</a></li>
        </ul>
    </nav>

    <div id="message" class="message"></div>
    <article id="top" class="wrapper style1">
        <div class="container">
            <div class="row">
                <div class="col-4 col-5-large col-12-medium">
                    &nbsp;
                </div>
                <div class="col-8 col-7-large col-12-medium">
                    <header>
                        <h1><strong>Wasm</strong>.</h1>
                    </header>
                    <a class="button large" onclick="sum();">Calculate</a>
                    <div><input type="text" id="num1"></div>
                    <div><input type="text" id="num2"></div>
                    <div><input type="text" id="result"></div>
                </div>
            </div>
        </div>
    </article>

    <script src="./assets/js/jquery.min.js"></script>
    <script src="./assets/js/jquery.scrolly.min.js"></script>
    <script src="./assets/js/browser.min.js"></script>
    <script src="./assets/js/breakpoints.min.js"></script>
    <script src="./assets/js/util.js"></script>
    <script src="./assets/js/main.js"></script>
    <script src="./assets/js/app.js"></script>
    </body>
</html>

【问题讨论】：

您是否删除了网络浏览器中的缓存，或者您是否尝试使用 curl 访问该页面？
我清除了浏览器中的缓存
你附加到docker并检查html文件的内容了吗？还请检查您的路径是否是最新的，因为 --no-cache 应该可以完成这项工作。
P.S.不要 go run ./server.go - 使用 go build 作为 docker 文件构建的一部分，然后运行 exe。使用多阶段构建，因此您可以使用最小的图像 - 而不是臃肿的 golang 图像 - 这实际上是用于构建的。

标签： html docker go webassembly

【解决方案1】：

问题是我需要做端口转发：

docker run -p 8989:8989 test3

现在可以了。

【讨论】：