Simple NFT Example (2)

실제 Vercel에 dApp을 배포하기까지의 과정을 기록한다.

바로가기 ↓

준비물

다음 내용을 기재된 .env 파일에 명시하여 로컬 구동을 확인한다.

• Private Key Sepolia ETH account
  • /packages/nextjs/.env : DEPLOYER_PRIVATE_KEY
  • 지갑이 없다면 지갑부터 생성
  • 이후 Google Sepolia Faucet으로부터 토큰 무료 수급
• API KEY dashboard.alchemy.com
  • /packages/nextjs/.env : ALCHEMY_API_KEY
  • /packages/hardhat/.env : NEXT_PUBLIC_ALCHEMY_API_KEY
• API KEY etherscan.io/myapikey
  • /packages/nextjs/.env : ETHERSCAN_API_KEY
• Project ID cloud.walletconnect.com
  • /packages/nextjs/.env : NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID

💾 Deploy your contract!

1. /packages/hardhat/hardhat.config.ts
   
   • 기본 네트워크를 localhost에서 sepolia로 변경

---

2. /packages/nextjs/scaffold.config.ts
   
   • 대상 네트워크를 localhost에서 sepolia로 변경

---

3. yarn account
   
   • sepolia의 잔액이 정상적으로 업데이트 되었는지 확인한다.

---

4. yarn deploy (또는 yarn deploy --network sepolia)
   
   • 계약을 배포한다. 결과는 sepolia.etherscan에서 확인할 수 있다.

---

5. 배포 이후 다음과 같은 변화가 생긴다.
   
   • Scaffold-ETH가 자동 생성한 RPC ABI 파일이 nextjs/contracts/deployedContracts.ts에 존재하는지 확인하자.
     

---

6. 로컬에서 Minting 해보고, session을 재설정한 이후에 정상적으로 NFT가 조회되는지 확인한다.
   • 원한다면 yarn test로 동작을 검증해볼 수 있다.

---

7. yarn vercel --prod를 통해 Vercel로 배포한다.

   ⚠️ 주의사항

   1. 

   • 루트 디렉토리가 packages/nextjs로 설정되는지 확인한다. Github와 연동한다면, 프로젝트 설정에서 변경해야 한다.
     
     
     

   2. 

   • 프로젝트 설정에서 템플릿도 Next.js로 설정한다.
     
     
     

   3. 

   • 프로젝트 환경 변수가 설정되었는지 확인한다.
     
     
     

   5. 

   • 깃허브 연동한다면 브랜치를 명시한다. (브랜치별로 챌린지가 나뉘어 있음)
     
     
     
     6.>
   • 개인 도메인이 있다면 추가한다.
   • 내 경우 AWS Route 53에서 다음 레코드를 추가했다.
     CNAME | simple-nft.oomia.click | cname.vercel-dns.com.
     

마치며

1. Sepolia ETH를 보유한 누구나 NFT를 발급받을 수 있다.

2. speedrunethereum.com에 빌더로 등록하고 챌린지를 제출할 수 있다.
   

3. 혹시라도 기록하지 않은 내용들이 있을 수 있다. 필요하다면 GitHub 참고하기