惑星間ファイルシステム-サイトをlocalhost(ローカルIPFSゲートウェイ)に切り替えます

IPFSをインターネット上のサイトの無料ホスティングとしてのみ使用する場合、IPFSにはほとんど意味がありません。 したがって、ローカルIPFSユーザーゲートウェイを介してサイトをダウンロードする方法を学習します。







これにより、ユーザーはサイトのローカルコピーにすばやくアクセスできます。







思い出させてください:InterPlanetary File Systemは、新しい分散ファイル共有ネットワーク(HTTPサーバー、 コンテンツ配信ネットワーク )です。 それについての話は、記事「IPFS Interplanetary File System」で始めました。


内容
  1. サイトを切り替えます

    1.1。 DNS

    1.2。 スクリプトとスタイル

    1.2.1。 ローカルゲートウェイを確認し、スクリプトで切り替えます

    1.2.2。 CSSを使用して動作中のゲートウェイを定義する
  2. IPFSでグローバルゲートウェイまたはサイトをローカライズします


画像







サイトを切り替えます



DNS



当社のサイトには現在、少なくとも3つのDNSレコードがあります。







A [ ] [IP  ] TXT [ ] dnslink=/ipfs/[CID ] TXT _dnslink.[ ] dnslink=/ipfs/[CID ]
      
      





さらに3つ追加します。







 A l.[ ] 127.0.0.1 TXT l.[ ] dnslink=/ipfs/[CID ] TXT _dnslink.l.[ ] dnslink=/ipfs/[CID ]
      
      





[コンテンツCID]-これ 、マルチキャッシュと呼ばれるコンテンツ識別子(CID)です。 IPFSネットワークでipfs add



コマンドを使用してサイト公開することで取得できます。







スクリプトとスタイル



整合性およびクロスオリジンフィールドは、HTMLスクリプトおよびリンクタグに表示されます 。 スクリプトを実行する前またはスタイルを適用する前に、ハッシュをチェックする必要があります。 これらを使用して、サイト訪問者の作業ゲートウェイを決定します。







 <script src="[   ]" integrity="sha384-[sha384  base64]" crossorigin="anonymous" defer async> </script> <link rel="stylesheet" href="[   ]" integrity="sha384-[sha384  base64]" crossorigin="anonymous"/>
      
      





読み込みと表示が遅れないように、ページの最後に配置することをお勧めします。







確認する必要があるアドレスオプションは次のとおりです。







  1. http://l.[ ]:8080





    8080は、デフォルトでIPFSが実行される標準ポートです。

    すべてが正しく構成されている場合、ブラウザはサイトのhttpバージョンからスクリプトまたはスタイルをロードします。







  2. https://l.[ ]:8443





    8443は、ユーザーがstunnelを構成できるポートです。

    要求がHTTPSサイトから送信され、ドメインがローカル証明書に追加される場合、このオプションが必要になります。







  3. http://127.0.0.1:8080/ipns/[ ]





    このオプションは、サイトにl



    ドメインを指定しておらず、リクエストがhttpから送信された場合に使用します。







  4. https://127.0.0.1:8443/ipns/[ ]





    このオプションは、httpsを使用したリクエストの場合です。 このオプションは、 l



    ドメインが指定されていない場合、またはローカル証明書に追加されていない場合に機能します。









同様に、httpのポート80とhttpsのポート443を確認できます。







ローカルゲートウェイを確認し、スクリプトで切り替えます



このスクリプトをサイトのページに追加することにより、訪問者をローカルのIPFSゲートウェイに自動的に切り替えます。







 <script src="redirect_to_ipfs_gateway.js" defer async ></script>
      
      





redirect_to_ipfs_gateway.js







 var redirect_to_local; /*          ```l``` */ function l_hostname() { var l_hostname = window.location.hostname.split("."); l_hostname.splice(-2,0,"l"); return l_hostname.join("."); } /*      script    ,       .    ,         .        onerror,      script. */ function add_redirect_script(prtocol, port, use_ip, onerror){ var script = document.createElement("script"); script.onerror = onerror; script.setAttribute("integrity", "sha384-dActyNwOxNY9fpUWleNW9Nuy3Suv8Dx3F2Tbj1QTZWUslB1h23+xUPillTDxprx7"); script.setAttribute("crossorigin", "anonymous"); script.setAttribute("defer", ""); script.setAttribute("async", ""); if ( use_ip ) script.setAttribute("src", prtocol+"//127.0.0.1:"+port+"/ipns/"+window.location.hostname+"/redirect_call.js"); else script.setAttribute("src", prtocol+"//"+l_hostname()+":"+port+"/redirect_call.js"); redirect_to_local = function() { var a = document.createElement("a"); a.href = window.location; a.protocol = prtocol; a.port = port; if ( use_ip ){ a.pathname = "/ipns/" + a.hostname + a.pathname; a.hostname = "127.0.0.1"; }else{ var hostname = a.hostname.split("."); hostname.splice(-2,0,"l"); a.hostname = hostname.join("."); } window.location = a.href; }; document.head.appendChild(script); } /*   ,   .  ,        .  ,     ,     . */ !function(location){ if ( location.protocol.indexOf("http") == 0 && location.hostname.length > 0 && location.hostname.indexOf("l.") != 0 && location.hostname.indexOf(".l.") < 0 && location.hostname != "127.0.0.1" ) { add_redirect_script( "http:", 8080, false, function(){ add_redirect_script( "https:", 8443, false, function(){ add_redirect_script( "http:", 8080, true, function(){ add_redirect_script( "https:", 8443, true ); } ); } ); } ); } }(window.location)
      
      





カップルで彼はスクリプトを書きます:

redirect_call.js (sha384-dActyNwOxNY9fpUWleNW9Nuy3Suv8Dx3F2Tbj1QTZWUslB1h23 + xUPillTDxprx7)







 redirect_to_local();
      
      





このスクリプトの整合性は、次のコマンドで計算できます。







 openssl dgst -sha384 -binary < "redirect_call.js" | openssl enc -base64 -A
      
      





したがって、このコマンドの結果があります。







 dActyNwOxNY9fpUWleNW9Nuy3Suv8Dx3F2Tbj1QTZWUslB1h23+xUPillTDxprx7
      
      





別の結果がある場合は、上記のスクリプトのこの値を自分のものに置き換えてください。







これで、ユーザーは、残りのアドレスパラメータを保持しながら、適切なローカルゲートウェイアドレスに自動的にリダイレクトされます。







CSSを使用した作業ゲートウェイの定義



  1. ゲートウェイのビーコンとなるCSSファイルを作成します。







    httpl.css (sha384-4zVfUIU3jAvrXNQlD5WHMl6TI8bMiBseKrDfLJpr5Mn+xdygya+svSeP6dK/5wpu)









     .httpl{;display: block;}
          
          





  2. ローカルゲートウェイにアクセスできる場合にのみ表示されるページ要素を非表示にします。







     <style> .gatewaylink{display: none} </style>
          
          





  3. ページの最後にCSSビーコンを追加します。







     <link rel="stylesheet" href="http://l.[ ]:8080/httpl.css" integrity="sha384-4zVfUIU3jAvrXNQlD5WHMl6TI8bMiBseKrDfLJpr5Mn+xdygya+svSeP6dK/5wpu" crossorigin="anonymous" />
          
          





  4. 「httpl.css」がロードされると、このアイテムが表示されます。







     <div class="gatewaylink httpl"> Use your gateway: <a href="http://l.[ ]:8080/">http://l.[ ]:8080/</a> </div>
          
          







これで、ユーザーがスクリプトを無効にしている場合でも、参照により自分でゲートウェイに移動できます。 同様に、ゲートウェイアドレスの他のオプションを確認できます。







テスト用のWebサイト: ivan386.ml







Github:







  1. JavaScriptはローカルIPFSゲートウェイを検出し、それに切り替えます。


ソース:







  1. サブリソースの整合性


IPFSでグローバルゲートウェイまたはサイトをローカライズします



移行の継続: IPFSのグローバルゲートウェイまたはサイトローカライズします







「惑星間ファイルシステム」に関する他の記事:







  1. 「IPFS惑星間ファイルシステム」
  2. IPFS惑星間ファイルシステムでサイトを公開します
  3. Windows用のIPFS惑星間ファイルシステムでサイトをホストします
  4. これ以上ネットワークにコピーする必要はありません
  5. IPFSでグローバルゲートウェイまたはサイトをローカライズします



All Articles