代码之家 › 专栏 › 技术社区 › pigfox

Docker不反映对html文件的更改

webassembly go docker html

pigfox · 技术社区 · 5 年前

我正在构建一个Webassembly应用程序,Docker不反映对html文件的更改。有什么建议吗?

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上运行。

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>

0 回复 | 直到 5 年前

pigfox 5 年前

docker运行-p 8989:8989测试3