差異處

這裏顯示兩個版本的差異處。

--- tech:ipfs-web [2022/09/04 22:44] – jonathan
+++ tech:ipfs-web [2022/09/09 17:36] (目前版本) – [參考網址] jonathan
@@ 行 1: / 行 1: @@
-====== [draft]測試將靜態 web 放上 IPFS ======
+====== 測試將靜態 web 放上 IPFS ======
-===== 準備工作 =====
+===== 上傳靜態 web 檔案上傳至 IPFS =====
-  * 上傳靜態 web 檔案上傳至 IPFS , 參考:[[tech/ipfs-docker]]
+  * 參考:[[tech/ipfs-docker]]
-  * 設定 Cloudflare 的 IPFS Public Gateway
+    * 將網頁檔案放入 staging 目錄內 Exp. <cli>
-  * 設定 DNS TXT 紀錄
+$ ls -lR staging/ipfs-web/
-  * 設定 DNS CNAME 紀錄
+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
+.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
+.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}}