Fleek：ICP上にWebサイトとDappの構築を簡単に開始する方法｜Next.jsアプリをIPFSにデプロイ
この記事は「Fleek Makes It Easy to Build and Deploy Websites on the Internet Computer」「How to deploy a Next.js app onto IPFS using Fleek」を日本語翻訳したものです。
Fleekのホスティングソリューションは、オープンWeb用のNetlifyのようなものであり、開発者はわずか数分でWebサイトをインターネットコンピューターに展開できます。
Fleekを使用してNext.jsアプリをIPFSにデプロイする方法
概要
Next.jsアプリを作成し、Fleekにデプロイします。このプロセス全体には10分かかります。
ツール：
Fleek account
GitHub account
node.js/npm
ステップ1：Githubでリポジトリを設定する
空のリポジトリを作成し、クローンを作成します。
CreateRepo
以下を使用してNext.jsアプリを作成します。
$ mkdir nextjs && cd nextjs $ npm init --y' '
$ npm install next react react-domCreateNextjsapp
package.json次のスクリプトを開いて追加します
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start",
"export": "next export"
}
next.config.jsルートディレクトリにファイルを作成します
module.exports = {
exportTrailingSlash: true,
};
いくつかのページを作成しましょう：pagesというフォルダを作成しますページ内にindex.jsを作成します
// index.js
import Link from "next/link";
export default function Index() {
return (
<div>
<h1> Index </h1>
<Link href="/about">
<a> About </a>
</Link>
</div>
);
}
と about.js
// about.js
export default function About() {
return (
<div>
<h1> About </h1>
</div>
);
}
このように見えるはずです
テストするには、npm run devを実行してlocalhost：3000にアクセスします
localhost3000
git add、commit、push
ステップ2：Fleekを設定する
https://app.fleek.co/にサインインします
Githubでサインイン
新しいサイトを追加する
Githubに接続します。
Next.jsリポジトリを選択します。
新しいサイトを作成するには：
ビルドコマンド：
npm install && npm run build && npm run exportDockerイメージ：
fleek/next-js公開ディレクトリ： out
もちろん、fleekはnext-jsを自動検出し、それらの構成を自動的に入力します。
dockerイメージfleek/next-jsはデフォルトで最新バージョンのnode.jsを実行します。これは、この記事の執筆時点ではバージョン13です。
別のノードバージョンを使用する必要がある場合は、dockerタグを使用して使用できます。EG：ノード10の場合、fleek/next-js:node-10
サイトの展開
完了したら、Webサイトを表示します。
提供されたドメイン名を使用してWebサイトを表示できます。
https://<your-domain>.on.fleek.co
または、CIDで確認してください。
ステップ3：更新
GitHubに変更を加えるたびに、Fleekは自動的にWebサイトを再デプロイします。ドメイン名は同じままで、新しいCIDを指すように指定してください。これにより、IPFSでホストされる最新の高速Webサイトを構築できます。
Fleek：世界中の誰もがインターネットコンピュータ上でWebサイトとdappの構築を簡単に開始できるサービス
インターネットコンピュータ開発者エコシステムの成長は、オープンウェブの分散型開発の新しいフェーズを形作るのに役立っています。Fleek —インターネットコンピュータブロックチェーン上に構築されているさまざまな革新的なdapp、ツール、およびインフラストラクチャプロジェクトの1つにすぎません—世界中の誰もがインターネットコンピュータ上でWebサイトとdappの構築を簡単に開始できるようにすることで、この成長をサポートします。
インターネットコンピュータ用のホスティング製品を発売してから2週間以内に、Fleekを介してインターネットコンピュータに700を超えるWebサイトが展開されました。
Fleekの摩擦のないホスティングソリューションは、オープンWeb用のNetlifyの分散バージョンであり、開発者はわずか数分でWebサイトをインターネットコンピューターに展開できます。Fleekを使用すると、インターネットコンピューターで静的フロントエンドをシームレスにホストでき、キャニスターのスマートコントラクトの作成とコンテンツの更新の複雑さを最小限に抑えるアクセス可能なインターフェイスを提供します。
Fleekはまた、インターネットコンピュータへの代替のオープンソースゲートウェイを作成しました。これは、キャニスターがFleekを介して展開されたか、インターネットコンピュータ上の他のツールまたはインターフェイス。
Fleekは、FleekのCLIでのインターネットコンピューター展開のサポートを追加しました。これにより、GitHubアクションの使用と、ローカルマシンなどのGitHub以外の環境からの展開が可能になります。
インターネットコンピュータホスティングソリューションに加えて、Fleekは最近インターネットコンピュータエコシステムのための他のさまざまな製品もリリースしました。
プラグウォレット — ICPユーティリティトークンとサイクル、およびその他のトークンにアクセスできる、ユーザーフレンドリーなブラウザ拡張機能。また、ワンクリックでインターネットコンピュータのdappsにログインすることもできます。
ダンク —インターネットコンピューター上で実行されるキャニスターベースのサービスで、ユーザーはプリンシパル識別子に関連付けられたサイクルのバランスを保つことができます。
Cycles Faucet — DFINITYFoundationと提携して立ち上げられたCyclesFaucetは、資格のある開発者に100ドル相当の無料サイクルを提供し、インターネットコンピューターでのキャニスターの構築と展開を開始できるようにします。
Fleekの背後にあるチームに、プロジェクトの背後にあるビジョンを共有するためのいくつかの質問をしました。
Fleekをどのように説明しますか？
Fleekは、オープンWebベンチャースタジオであり、Fleek.co開発者プラットフォームの作成者です。Fleek.co開発者プラットフォームは、オープンの基盤を形成するテクノロジーで構築された開発者にWebサービス（ホスティング、ストレージ、ゲートウェイ、ドメインなど）を提供します。 Web（インターネットコンピューター、イーサリアム、IPFS、ファイルコイン、ENS、HNSなど）。
あなたの技術は何をしますか？どのような問題を解決することを目指していますか？
Fleekは、オープンWeb上に構築されたサイト、アプリケーション、またはインフラストラクチャを開発者が構築、ホスト、保存、および電力供給するためのシームレスな方法を提供するために活用するWeb3テクノロジーのすべての可能性を抽象化することを目指しています。
これは、開発者が通常期待する技術的な複雑さや摩擦点なしに、誰でも、どこでも、オープンWebを簡単に採用して移行できるように、これらの新しいテクノロジを使用して構築する際の摩擦を排除することを目的としています。
あなたのターゲットユーザーは誰ですか？
私たちのターゲットユーザーは、データ処理、ストレージ、およびホスティングにおける分散化、透明性、およびユーザー所有のアプローチに関心を持って、オープンWebでWeb /オンラインベースのエクスペリエンスを構築しようとしているエンドユーザー、開発者、または企業です。
あなたのチームはどこに拠点を置いていますか？
私たちのチームは世界中にいます！米国、イラン、プエルトリコ、インド、チリ、ナイジェリア、アルゼンチン、チェコ共和国から。
ブロックチェーンテクノロジーを使用してサービスを開発する動機は何ですか？
過去数年は、Web2からWeb3への移行の鍵を握っています。しかし、Ethereum dappsでのアプリケーションロジックの分散化などの驚くべき進歩にもかかわらず、1つの問題は常に解決されていませんでした。それは、コアインフラストラクチャであるWebのベースレイヤーが、Web2集中型インフラストラクチャでホストおよび保存されていたということです。
オープンWebを真に構築するには、それを強化するための新しいオープンで許可のない分散型インフラストラクチャが必要でした。これは現在、インターネットコンピュータなどのプラットフォームを通じて利用できます。
他のプラットフォーム（ブロックチェーンネットワークまたは集中型ソリューション）ではなく、インターネットコンピューターで開発することを選択したのはなぜですか？
インターネットコンピュータは、私たちが上で説明したことを達成するための最後のピースでした。オープンWebまたはWeb3の開発で欠落していたリンクは、分散型、信頼性のない、許可のない、Webのベースレイヤー（ストレージ、ホスティング、サービスなど）に電力を供給することができるスケーラブルで自律的なブロックチェーンネットワークでした。効率的な方法。
インターネットコンピュータ上に構築することについて最も驚いたことは何ですか？
その背後にあるコアテクノロジーは驚くべきものであり、概念実証をすぐに実行して、Webサービスを再構築できることを確認し、Web2インフラストラクチャを完全に廃止することができました。
成功のためのどのベンチマークを目指していますか？
当社のベンチマークは、通常のWeb企業のベンチマークと非常によく似ています。ユーザー、使用状況、成長、保持、エンゲージメントなどです。
将来、製品やサービスをどのように開発し、進化させると思いますか？
インターネットコンピュータ上に構築するためのロードマップは、現在のWebのコアサービス（ホスティング、ストレージなど）を利用し、それらをオープンインターネットサービスとして再構築することに焦点を当てています。インターネットのコアレイヤーを、ユーザーが所有および制御する、自律的で透過的で、完全に普遍的にアクセス可能なサービスのセットに変えます。私たちはホスティングと開発から始めましたが、インターネットコンピュータ全般でのWeb開発と開発の両方に不可欠な他のコアサービス（キャニスターと充電ステーションの開発、サイクル管理など）を引き続き開始します。
他にどのようなインターネットコンピュータエコシステムプロジェクトに興奮していますか？
OpenChat、DSCVR、およびBunchdは、現時点で最も興奮しているものです。確かにソーシャルユースケースは、エコシステムのこの初期段階で最も注目/開発者の関心を集めているように思われます。インターネットコンピュータがそのようなユースケースにどれほど適しているかを物語っていると思います。
インターネットコンピュータエコシステム内で開発してほしい新しい分散型サービスまたはアプリは何ですか？
イーサリアムへの架け橋が見たいです。これにより、両方のプロトコルを大幅に強化する大きな可能性と機能が解き放たれると思います。特に私たちが興奮していることの1つは、インターネットコンピューターのイーサリアムコントロールキャニスターにアドレスまたはスマートコントラクト/ DAOがあり、イーサリアムから直接計算の料金を支払うことです。