English | 中文
This is a Web3 Blog dApp demo, developed with Next.js for frontend, EVM-compatible smart contract for backend, IPFS for media data store.
What it looks like:
2) Create or import your Ethereum account into wallet.
3) Add Polygon Mumbai Testnet into wallet.
Metamask Network Parameters
Network Name: Mumbai Testnet
New RPC URL: https://rpc-mumbai.matic.today or https://rpc-mumbai.maticvigil.com
Chain ID: 80001
Currency Symbol: MATIC
Block Explorer URL: https://mumbai.polygonscan.com/
4) Switch to Mumbai Testnet.
5) Export private key
Note down the private key, and keep it secret. We'll use it in following step.
6) Get some MATICs from faucet(it's free and this token has no values), so that you can pay the transaction fees
or Polygon Faucet:
In this demo, we'll use the decentralized file storage service, IPFS, to store media files, in order to get better user experience for end-users, we can setup our own IPFS service instead of using public service provider's.
Here we provide a AWS CloudFormation template to help launch a single IPFS node on AWS EC2, so that you can setup IPFS service with several clicks, rather than dive into IPFS deployment details.
The IPFS kubo version included in the template is 0.16.0, you may change the template file and upgrade to newer version if needed.
WARN 1: The IPFS node created using this template is open to public and for short-time test purpose only, you can modify its security group to limit access only from your own IP, check this doc for more information.
WARN 2: The EC2 instance and related resources may incur cost of your AWS account.
In this template, we'll create a VPC with Subnets, the EC2 instance is placed in a Public Subnet and assigned with a public IP address automatically.
The OS of this IPFS EC2 instance is Ubuntu 20.04 with default user ubuntu.
| Port | Allowed Source | Description |
|---|---|---|
| TCP 22 | 0.0.0.0/0 | SSH |
| TCP 3000 | 0.0.0.0/0 | Node.js backend server |
| TCP 4001 | 0.0.0.0/0 | IPFS p2p network |
| TCP 5001 | 0.0.0.0/0 | IPFS API endpoint |
| TCP 8080 | 0.0.0.0/0 | IPFS Gateway endpoint |
If any key pairs exist in the Region you want to deploy the template, and you have its private key, you can skip this step and goto depolyment options.
Otherwise, please follow the document to create or import an existing key pair.
Click to setup IPFS instance in AWS China Region. You can use default settings in CloudFormation console.
Click to setup IPFS instance in AWS Global Region. You can use default settings in CloudFormation console.
In the CloudFormation Console, navigate to the Outputs tab and note down the ApiEndpoint, GatewayEndpoint and WebUI urls, we'll use them in following steps.
You may deploy this demo into the EC2 instance created in last step, or into your local computer, we'll choice the prior method.
You can use SSH command to connect to your EC2 instance:
ssh -i path/to/your-key-pair.pem [email protected]Or use Session Manager from AWS System Manager.
We'll use ubuntu user to execute commands in all the following steps.
We'll use nvm.sh to install nodejs env.
# This installs nvm into ~/.nvm
curl -o- https://raw.githubusercontent.com/creationix/nvm/master/install.sh | bash
# This loads nvm
source ~/.profile
# This installs nodejs version 16.17
nvm install 16.17 In our demo, a cover image is used as our homepage's background, this image is saved in IPFS network. The cid of this image will be stored in the Blog smart contract.
There’re handful tools can be used to upload image file to IPFS, such as IPFS CLI, IPFS Desktop app and so on. Here we'll use the IPFS WebUI, you can find the WebUI URL in CloudFormation outputs section. Open this URL in a new browser tab, here's what it looks like:
In the Files tab, import a image file you like, and note down the cid, i.e. QmfSZ...zAqW in this screenshot.
Login to your IPFS EC2 instance and clone source code.
git clone https://github.com/Chen188/web3-dApp-demo && cd web3-dApp-demo && npm cicp .env.testnet .env.localEdit .env.local:
-
Set value of NEXT_PUBLIC_ipfs_gateway and NEXT_PUBLIC_ipfs_uri with the outputs in section CloudFormation outputs, or use public IPFS service such as Infura. For example:
NEXT_PUBLIC_ipfs_api=http://1.2.3.4:5001/api/v0 NEXT_PUBLIC_ipfs_gateway=http://1.2.3.4:8080/ipfs/ -
If you're using Infura IPFS service, you can set NEXT_PUBLIC_ipfs_auth_user with your Infura IPFS project id, and NEXT_PUBLIC_ipfs_auth_password with Infura IPFS project secret.
Edit the ./scripts/deploy.js with your prefered editor, replace QmeisUNzsWHmjmD8hX3mGsC8sYiYYwx2Qif98bHJPBvQsG with the cid in section Upload an image to IPFS, save & close this file.
Get the private key in step export private key, and run the Shell script:
# this will deploy Blog Contract into the address corresponding to pk
privateKey=REPLACE-WITH-YOUR-PRIVATE-KEY
pk=$privateKey npx hardhat run scripts/deploy.js
>>example output<<
Downloading compiler 0.8.4
Compiled 3 Solidity files successfully
Blog deployed to: 0x6666666666666666666688888888888888888888-
Run
npm run build && npm run start% npm run build && npm run start > [email protected] build > next build info - Loaded env from /Users/binc/ror/nextjs-blog/.env.local info - Linting and checking validity of types info - Creating an optimized production build info - Compiled successfully ... ready - started server on 0.0.0.0:3000, url: http://localhost:3000 info - Loaded env from /Users/binc/ror/nextjs-blog/.env.local
-
Open http://<your.ec2.public.ip>:3000 in your browser