測試將靜態 web 放上 IPFS

上傳靜態 web 檔案上傳至 IPFS

將網頁檔案放入 staging 目錄內 Exp.

$ ls -lR staging/ipfs-web/
staging/ipfs-web/:
total 200
-rw-r--r--    1 jonathan root           199 Sep  6 11:56 index.html
-rw-r--r--    1 jonathan root        199261 Sep  6 11:58 test.png

將網頁檔案上傳至 ipfs

$ docker exec ipfs_host ipfs add -r /export/ipfs-web
added QmUUiF7Q7VTSxxP3fCj9eujb8iCjxQ7xsCa3fu9gP8aN5b ipfs-web/index.html
added QmXjMZ2w2dXrimcSsY6gfLmdZVTZKsF9UrZRzeijYyd2a2 ipfs-web/test.png
added QmNgePP9fbtEjNarsjMMER4wapB6qHnraJe6JfinCK7cnM ipfs-web
 194.79 KiB / 194.79 KiB  100.00%

使用 ipfsbrowser 驗證

$ curl https://api.ipfsbrowser.com/ipfs/get.php?hash=QmNgePP9fbtEjNarsjMMER4wapB6qHnraJe6JfinCK7cnM
<!DOCTYPE html>
<html>
<head>
<title>IPFS 網頁測試</title>
</head>
<body>

<h1>這是 IPFS 網頁測試</h1>
<p>This is a paragraph.</p>

<img src="test.png" alt="測試圖片">

</body>
</html>
$ curl https://api.ipfsbrowser.com/ipfs/get.php?hash=QmXjMZ2w2dXrimcSsY6gfLmdZVTZKsF9UrZRzeijYyd2a2
Warning: Binary output can mess up your terminal. Use "--output -" to tell
Warning: curl to output it to your terminal anyway, or consider "--output
Warning: <FILE>" to save to a file.
$ curl https://api.ipfsbrowser.com/ipfs/get.php?hash=QmUUiF7Q7VTSxxP3fCj9eujb8iCjxQ7xsCa3fu9gP8aN5b
<!DOCTYPE html>
<html>
<head>
<title>IPFS 網頁測試</title>
</head>
<body>

<h1>這是 IPFS 網頁測試</h1>
<p>This is a paragraph.</p>

<img src="test.png" alt="測試圖片">

</body>
</html>

因為 QmXjMZ2w2dXrimcSsY6gfLmdZVTZKsF9UrZRzeijYyd2a2 是 png 圖檔, 所以會出現 Warning 的訊息

Warning: Binary output can mess up your terminal. Use "--output -" to tell
Warning: curl to output it to your terminal anyway, or consider "--output
Warning: <FILE>" to save to a file.

有時因為 ipfsbrowser 無法即時找到 ipfs hash 就會出現類似以下的結果, 需要多執行幾次就可以正常

$ curl https://api.ipfsbrowser.com/ipfs/get.php?hash=QmXjMZ2w2dXrimcSsY6gfLmdZVTZKsF9UrZRzeijYyd2a2
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
:
    <div class="main">

        <!--404 section start-->
        <section class="ptb-100 bg-image full-height" data-overlay="8">
:
    <script src="https://vanwa.tech/assets/js/vendors/hs.megamenu.js"></script>
    <script src="https://vanwa.tech/assets/js/app.js"></script>
    <!--endbuild-->
</body>

</html>

設定 Cloudflare 的 IPFS Public Gateway

在網域內啟用 Web3
訂閱 IPFS Gateway Basic 方案 (每個月流量 50GB, 每 GB US$0.25, 可以建立 15 IPFS Gateway)
建立一個 IPFS Gateway (網址: ipfs-web.ichiayi.com → ipfs 上傳的目錄 CID: QmNgePP9fbtEjNarsjMMER4wapB6qHnraJe6JfinCK7cnM
透過瀏覽器開啟 https://ipfs-web.ichiayi.com 就可以看到網頁內容

設定 DNS

如果 DNS 是由 Cloudflare 託管, 就會自動配置 TXT 與 CNAME 的紀錄 Exp.

更新網頁內容

將更新的網頁檔案上傳至 staging 目錄內

再次執行上傳至 IPFS 網路 Exp. 只改動 index.html

$ docker exec ipfs_host ipfs add -r /export/ipfs-web
added QmcC6sfd39mzWjZtQnqoDZjgTWx8ZKjqw56FZkcaHTVvG1 ipfs-web/index.html
added QmXjMZ2w2dXrimcSsY6gfLmdZVTZKsF9UrZRzeijYyd2a2 ipfs-web/test.png
added QmcgrXvMuUikpiEJAtQM2xMswToGi4KDFNe93yyZURjYBm ipfs-web
 194.81 KiB / 194.81 KiB  100.00%
$ curl https://api.ipfsbrowser.com/ipfs/get.php?hash=QmcgrXvMuUikpiEJAtQM2xMswToGi4KDFNe93yyZURjYBm
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>IPFS 網頁測試</title>
</head>
<body>

<h1>這是 IPFS 網頁測試</h1>
<p>This is a paragraph.</p>

<img src="test.png" alt="測試圖片">

</body>
</html>

ipfs-web 的目錄 CID 已經和之前不同, 所以需要回 Cloudflare 修改 IPFS-Gateway 對應的 DNSLink
這樣就可以看到更新後的網頁內容 https://ipfs-web.ichiayi.com/

參考網址

ipfs, web3