測試將靜態 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/
