일반적인 생각과는 달리, 분산형 웹사이트를 구축하는 것은 접근하기 쉬운 작업입니다. 표준 웹 플랫폼과 분산 프레임워크 내에서 운영되는 웹 플랫폼의 주요 차이점은 호스팅 방식에 있습니다. 이 뉘앙스 외에도 다양한 측면에서 기존 웹사이트와 일관성을 유지합니다.

블록체인 기술을 활용한 탈중앙화 웹 애플리케이션을 만들고 배포하려면 적절한 도메인 이름을 확보하고 디지털 지갑에 충분한 양의 이더리움(ETH)이 저장되어 있는지 확인해야 합니다. 이를 통해 프로세스 전반에 걸쳐 필요한 모든 단계를 완료할 수 있습니다.

웹사이트 파일 생성

또는 웹사이트에 필요한 파일을 준비하거나 이러한 리소스 제공자로부터 무료 웹사이트 템플릿을 받아 탈중앙화된 웹 사이트를 구축하는 데 활용할 수 있습니다. 이 데모의 목적을 위해 Free CSS에서 템플릿을 구해 사이트를 구축하겠습니다.

Free CSS 을 방문하여 템플릿을 선택한 후 다운로드합니다. 그런 다음 아래와 같이 각 개별 파일이 포함된 폴더에 ZIP 파일을 압축을 풉니다.

웹사이트를 새로 구축할 때는 최적의 구성과 손쉬운 액세스를 위해 필요한 모든 파일을 단일 디렉토리에 통합하는 것이 중요합니다.

IPFS에 웹사이트 파일 업로드

행성 간 파일 시스템(IPFS)은 다양한 지리적 위치에서 파일을 호스팅할 수 있는 광범위한 글로벌 P2P 컴퓨팅 장치 네트워크로 구성된 분산형 파일 스토리지 솔루션으로 널리 활용되고 있습니다.

우선, 한 가지 옵션은 독립적인 IPFS(InterPlanetary File System) 노드로 작동하는 개인용 컴퓨터에 웹사이트의 파일을 저장하는 것입니다. 하지만 다른 사람이 분산된 사이트에 액세스하려면 컴퓨터가 인터넷에 계속 연결되어 있어야 한다는 점에 유의해야 합니다.

다른 옵션은 Piá?ata , Infura , Fleek 와 같은 IPFS 호스팅 플랫폼을 사용하여 IPFS 네트워크에서 파일을 호스팅하고 배포하여 누구나 액세스할 수 있도록 하는 것입니다. 하지만 이러한 서비스 중 일부를 사용하려면 구독료를 지불해야 합니다.

IPFS 노드에 업로드하기

이 작업을 진행하려면 IPFS(InterPlanetary File System) 노드의 독립형 인스턴스를 설정하고 운영해야 합니다.

이 프로세스를 시작하려면 컴퓨터 시스템에 IPFS를 설치하는 두 가지 옵션이 있습니다. 개인용 컴퓨터용 IPFS 클라이언트 소프트웨어를 받거나 Brave 웹 브라우저용 브라우저 확장 프로그램을 사용하여 IPFS 노드를 설정할 수 있습니다.

이 글도 확인해 보세요:  아리트럼이란 무엇인가요? 이 독특한 레이어 2 솔루션의 작동 방식 살펴보기

⭐ 이미 설정이 완료되면 IPFS 대시보드를 열고 가져오기를 클릭한 다음 웹사이트 폴더를 업로드합니다.

웹사이트의 활성 상태를 확인하려면 파일 옆에 있는 세 개의 타원으로 이동하여 “링크 공유”를 선택하세요. 그런 다음, 제공된 IPFS(InterPlanetary File System)용 URL을 복제하여 Brave의 새 브라우저 탭에서 실행합니다. Brave의 구성이 최적화되었다면 웹페이지가 원활하게 작동할 것입니다.

Fleek에 업로드하기

개인은 Fleek을 사용하여 무료로 웹 콘텐츠를 IPFS에 제출할 수 있는 반면, Piá? 단, Fleek을 사용하기 전에 GitHub에서 사이트를 호스팅해야 한다는 점에 유의해야 합니다.

⭐ GitHub 대시보드를 열고 새 리포지토리를 만듭니다. 다음으로, GitHub와 잘 통합된 버전 관리 시스템인 Git을 사용하여 웹사이트 파일을 GitHub 리포지토리에 업로드합니다. 쉬운 데모를 위해 먼저 웹사이트 파일을 바탕화면의 dWeb

라는 폴더에 저장합니다. Git-scm 를 방문하여 최신 버전의 Git을 다운로드하여 설치합니다.

“cd [데스크톱 폴더 이름]”(데스크톱 폴더의 실제 이름으로 “[데스크톱 폴더 이름]”을 바꾸세요). 이 명령을 실행하면 지정된 디렉터리 내에 새 로컬 리포지토리가 초기화됩니다.

제공된 일련의 명령을 실행하세요. 여기에는 GitHub 리포지토리 주소를 나타내는 특정 번호와 URL이 포함되어 있습니다. 이 시나리오에 해당하는 명령은 다음과 같습니다: “`bash wget -q https://raw.githubusercontent.com/your-username/your-repo/master/README.md “` “your-username”을 실제 사용자 이름으로 바꾸고 “your-repo”를 GitHub의 리포지토리 이름으로 바꿉니다. 그러면 아무런 프롬프트나 확인 없이 리포지토리에서 로컬 컴퓨터로 README 파일이 다운로드됩니다.

이 지시어를 실행하면 웹 서버의 루트 디렉터리 내에 숨겨진 “.git” 디렉터리가 생성되고 사이트의 모든 콘텐츠가 이 디렉터리에 포함됩니다. 그런 다음 이러한 파일을 전송하기 위한 커밋이 이어지며, 최종적으로 지정된 GitHub 리포지토리에 파일이 업로드됩니다.

수많은 웹사이트 문서와 디렉터리를 GitHub 리포지토리로 전송하는 효과적인 방법 중 하나가 위에 제공된 그림에 나와 있습니다.

Fleek과 GitHub 연결하기

Fleek 계정을 GitHub에 연결하려면 다음 단계를 따르세요:

방문 Fleek 계정에 로그인한 후 새 사이트 추가

Fleek을 GitHub에 연결하고 웹사이트 파일로 리포지토리에 대한 액세스 권한을 승인합니다.

이 글도 확인해 보세요:  ChatGPT의 새로운 플러그인 기능에 가입하는 방법

⭐ Fleek에서 선택한 리포지토리를 표시합니다. 배포 위치 탭으로 이동하여 IPFS를 선택한 후 계속을 클릭합니다.

⭐ 프레임워크를 선택하고(확실하지 않은 경우 기타로 남겨둡니다) 사이트를 배포합니다.

웹 사이트 배포가 IPFS(InterPlanetary File System)에 이루어집니다.

Web3 도메인 연결

독립형 IPFS 노드를 사용하든 Fleek과 같은 인터넷 기반 서비스를 선택하든 관계없이 웹사이트가 IPFS에서 호스팅되면 해당 IPFS 해시값을 보유하게 됩니다.

계속 진행하려면 웹사이트를 Web3 도메인과 연결해야 합니다. 이는 평판이 좋은 Web3 등록기관을 통해 도메인을 획득하여 수행할 수 있습니다. 도메인 가격은 특정 플랫폼의 조건에 따라 달라지며, 블록체인 기반 도메인 시스템을 사용하는 경우 분산 원장에 거래를 기록하기 위해 추가 네트워크 수수료가 필요합니다.

이 특정 인스턴스에서는 기능을 보여주기 위해 이더리움 네임 서비스(ENS)를 통해 “elgwaro.eth”라는 이름의 도메인을 조달했습니다.

ENS 도메인을 IPFS 웹사이트에 연결하기

확장 비구조화(ENS) 도메인과 IPFS(InterPlanetary File System)에서 호스팅되는 웹사이트 간의 연결을 설정하려면 다음 단계를 따르세요:

⭐ ENS 대시보드를 열고 도메인 네임 섹션에 액세스합니다.

⭐ 레코드 탭을 선택하고 레코드 편집을 클릭합니다.

⭐ 기타를 선택하고 독립 IPFS 웹사이트 링크를 붙여넣은 후 저장을 클릭합니다.

⭐ 거래를 승인하기 위해 지갑을 연결하라는 메시지가 표시되며, 네트워크 활동에 따라 소정의 수수료가 부과될 수 있습니다.

거래가 완료되면 Web3 도메인이 탈중앙화 웹사이트와 상호 연결됩니다.

Fleek을 활용하면 사용자 친화적인 Fleek 대시보드 인터페이스 내에 사용자 지정 도메인을 통합할 수 있습니다.

⭐ 배포된 웹사이트 대시보드를 열고 사용자 정의 도메인 추가를 클릭합니다.

⭐ 아래로 스크롤하여 ENS 정보로 이동한 후 ENS 추가를 클릭합니다.

⭐ ENS 도메인을 입력하고 확인을 클릭한 다음 확인을 클릭합니다.

⭐ 다음으로 콘텐츠 해시 설정을 클릭합니다. 네트워크 활동에 따라 소정의 수수료를 지불하여 거래를 승인하려면 지갑을 연결해야 합니다. 링크를 성공적으로 설정하려면 연결된 지갑 계정이 도메인의 컨트롤러인지 확인하세요.

웹사이트에 액세스

웹3 도메인과 탈중앙화 웹사이트가 성공적으로 통합되면 웹3 도메인은 탈중앙화 플랫폼으로 리디렉션됩니다.

이 글도 확인해 보세요:  스팸이란 무엇이며 어떻게 이런 이름이 붙었나요?

ENS 도메인 +.link를 사용하여 액세스할 수 있습니다. 예를 들어, 이 경우 elgwaro.eth.link 입니다. 하지만 Brave와 같은 IPFS 지원 브라우저를 사용하는 경우 URL 끝에 .link를 포함할 필요가 없습니다.

탈중앙화 웹사이트가 성공적으로 생성된 것을 축하드립니다!

웹2.0 개발을 넘어서

시간이 지남에 따라 분산형 웹사이트의 보급률이 중앙 집중식 웹사이트를 능가할 것으로 예측되고 있습니다. 다행히도 웹 2.0에서 웹 3.0 웹 사이트 개발로 전환하는 것은 언뜻 어렵게 보일 수 있지만, 이 과정은 생각보다 간단합니다. 따라서 검열에 영향을 받지 않고 탈중앙화된 네트워크에 상주하는 온라인 플랫폼 구축을 고려하고 있는 개인에게 이 매뉴얼은 시작하기에 훌륭한 토대를 제공합니다.

By 김민수

안드로이드, 서버 개발을 시작으로 여러 분야를 넘나들고 있는 풀스택(Full-stack) 개발자입니다. 오픈소스 기술과 혁신에 큰 관심을 가지고 있고, 보다 많은 사람이 기술을 통해 꿈꾸던 일을 실현하도록 돕기를 희망하고 있습니다.