差異處

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

--- tech:ipfs-web [2022/09/06 12:26] – 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]]
     * 將網頁檔案放入 staging 目錄內 Exp. <cli>
 $ ls -lR staging/ipfs-web/
@@ 行 80: / 行 80: @@
 </html>
 </cli>
-  * 設定 Cloudflare 的 IPFS Public Gateway
+=====  設定 Cloudflare 的 IPFS Public Gateway =====
-  * 設定 DNS TXT 紀錄
+  * 在網域內啟用 Web3 \\ {{:tech:2022-09-06_12_30_21.png?600|}}
-  * 設定 DNS CNAME 紀錄
+  * 訂閱 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}}