測試將靜態 web 放上 IPFS [Jonathan's Wiki 筆記]

本頁是唯讀的，您可以看到原始碼，但不能更動它。您如果覺得它不應被鎖上，請詢問管理員。
====== 測試將靜態 web 放上 IPFS ======

===== 上傳靜態 web 檔案上傳至 IPFS =====
  * 參考:[[tech/ipfs-docker]]
    * 將網頁檔案放入 staging 目錄內 Exp. <cli>
$ 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
</cli>
    * 將網頁檔案上傳至 ipfs <cli>
$ 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%
</cli>
    * 使用 ipfsbrowser 驗證 <cli>
$ 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>
</cli>
    * 因為 QmXjMZ2w2dXrimcSsY6gfLmdZVTZKsF9UrZRzeijYyd2a2 是 png 圖檔, 所以會出現 Warning 的訊息<cli>
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.
</cli>
    * 有時因為 ipfsbrowser 無法即時找到 ipfs hash 就會出現類似以下的結果, 需要多執行幾次就可以正常<cli>
$ 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>
</cli>
=====  設定 Cloudflare 的 IPFS Public Gateway =====
  * 在網域內啟用 Web3 \\ {{:tech:2022-09-06_12_30_21.png?600|}}
  * 訂閱 IPFS Gateway Basic 方案 (每個月流量 50GB, 每 GB US$0.25, 可以建立 15 IPFS Gateway) \\ {{:tech:2022-09-06_12_31_39.png?600|}}
  * 建立一個 IPFS Gateway (網址: ipfs-web.ichiayi.com -> ipfs 上傳的目錄 CID: QmNgePP9fbtEjNarsjMMER4wapB6qHnraJe6JfinCK7cnM  \\ {{:tech:2022-09-06_12_43_31.png?600|}}
  * 透過瀏覽器開啟 https://ipfs-web.ichiayi.com 就可以看到網頁內容 
=====  設定 DNS =====
  * 如果 DNS 是由 Cloudflare 託管, 就會自動配置 TXT 與 CNAME 的紀錄 Exp. \\ {{:tech:2022-09-06_13_35_37.png?600|}}


===== 更新網頁內容 =====
  * 將更新的網頁檔案上傳至 staging 目錄內
  * 再次執行上傳至 IPFS 網路 Exp. 只改動 index.html <cli>
$ 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>
</cli>
  * ipfs-web 的目錄 CID 已經和之前不同, 所以需要回 Cloudflare 修改 IPFS-Gateway 對應的 DNSLink \\ {{:tech:2022-09-06_13_29_33.png?600|}}
  * 這樣就可以看到更新後的網頁內容 https://ipfs-web.ichiayi.com/

===== 參考網址 =====
  * https://chouhsiang.medium.com/%E5%B0%87%E9%9D%9C%E6%85%8B%E7%B6%B2%E7%AB%99%E9%83%A8%E7%BD%B2%E5%88%B0ipfs%E5%8D%80%E5%A1%8A%E9%8F%88%E4%B8%8A-759a4262a91f
  * https://blog.user.today/cloudflare-ipfs-website/
  * https://github.com/miaoski/ipfs-tutorial

{{tag>ipfs web3}}