====== 測試將靜態 web 放上 IPFS ====== ===== 上傳靜態 web 檔案上傳至 IPFS ===== * 參考:[[tech/ipfs-docker]] * 將網頁檔案放入 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 IPFS 網頁測試

這是 IPFS 網頁測試

This is a paragraph.

測試圖片 $ 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: " to save to a file. $ curl https://api.ipfsbrowser.com/ipfs/get.php?hash=QmUUiF7Q7VTSxxP3fCj9eujb8iCjxQ7xsCa3fu9gP8aN5b IPFS 網頁測試

這是 IPFS 網頁測試

This is a paragraph.

測試圖片 * 因為 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: " to save to a file. * 有時因為 ipfsbrowser 無法即時找到 ipfs hash 就會出現類似以下的結果, 需要多執行幾次就可以正常 $ curl https://api.ipfsbrowser.com/ipfs/get.php?hash=QmXjMZ2w2dXrimcSsY6gfLmdZVTZKsF9UrZRzeijYyd2a2 :
: ===== 設定 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 $ 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 IPFS 網頁測試

這是 IPFS 網頁測試

This is a paragraph.

測試圖片 * 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}}