겉바속촉

[Hyperledger] React + Node + Hyperledger 본문

IT일기(하반기)/Hyperledger-fabric

[Hyperledger] React + Node + Hyperledger

겉바속촉 2020. 8. 11. 17:51
728x90
반응형

우선 VMware를 열어주세요:)

 

 

 

그리고 터미널 하나 새로 열게요

다음과 같이 버전이 8인지 확인해주세요

겉바속촉은 요 버전으로 하려고 합니다:)

 

root@ubuntu:~# node -v
v8.10.0

 

 

 

혹시 8버전이 아니라면 다음 명령어들로 설치해주세요

 

apt install npm 
npm install n -g
n 8.9.0

 

 

 

그리고 도커 버전도 확인!!
8버전 아니어도 무관합니다:)

 

docker -v

 

 

 

도커 컴포즈를 설치해줍니다

 

 apt -y install docker-compose

 

 

도커 컴포즈 버전 확인

 

 docker-compose -v 

 

 

 

go 설치

 

apt -y install golang-go

 

 

 

go 버전 확인

 

 go version 

 

 

 

저는 다음과 같이 나옵니다

 

root@ubuntu:~# go version
go version go1.10.4 linux/amd64

 

 

이제 npm -v로 확인

 

root@ubuntu:~# npm -v
3.5.2

 

 

 

다음 명령어로 버전을 변경시켜주세요;)

 

root@ubuntu:~# npm i -g npm@5.5.1

 

 

 

이제 go 위치 확인

 

root@ubuntu:~# go env

 

 

 

그럼 go가 들어간 것들이 쫘르르르륵 출력되는 데요

그 리스트 중에 GOPATH, GOROOT를 확인해주세요

저는 다음과 같이 나옵니다

 

GOPATH="/root/go"
GOROOT="/usr/lib/go-1.10"

 

 

 

이제 go 환경변수를 설정해주어야합니다

다음 명령어로 vi 편집기에 들어가주세요

 

vi .bashrc

 

 

vi 편집기에 다음 코드를 빨간펜으로 표시한 곳에 넣어주세요

 

export GOPATH="/root/go"
export GOROOT="/usr/lib/go-1.10"

 

 

 

두 줄 잘 추가했다면 esc키 누르고 wq! 입력해서 vi편집기 저장하고 나오신 후에

go 환경변수 적용해줄게요

 

 source .bashrc

 

적용되었는 지 확인

 

echo $GOROOT && echo $GOPATH

 

 

HLF 만들어 주신 후에

 

 mkdir HLF

 

거기로 들어가주세요

 

 cd HLF

 

 

hyperledger fabric을 설치해줄게요:)

 

curl -sSL http://bit.ly/2ysbOFE | bash -s 1.4.3

 


 

VM ware에 있는 vs code를 열어서 

open folder - 0jes - 폴더 생성

 

 

 

그 하위 위치에 MyWeb1 폴더 하나 또 생성

 

 

 

그리고 ok 해주신 후에 vs코드의 터미널 열어주세요

다음 명령어 실행

 

npm init

 

그리고 계속 엔터 키를 눌러주셔서 package.json이 작성되도록 해주세요

 

 

 

그리고 다음 명령어를 통해 dependency가 추가되도록 할게요

 

npm i express

 

"dependencies": {
    "express": "^4.17.1"

 

 

global로 nodemon 설치

global로 설치 했기 때문에 dependency에 추가되지 않습니다

즉 local로 설치했을 때만 추가되는 것이쥬

 

npm i -g nodemon

 

 

 

 

 

public 폴더 생성

 

mkdir public

 

 

 

 

 

public 폴더 안에서 index.html 작성해주세요

 

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" >
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/1.0.2/ReactRouter.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <link rel="stylesheet" type="text/css" href="index.css">
    <title>React App</title>
  </head>
  <body>
   <div id="root" ></div>
   <script type="text/babel" src="index.jsx" />
  </body>
</html>

 

 

public폴더 안에 index.jsx 파일 생성

index.jsx

var {Component} = React;
var {Router, Route, IndexRoute, Link} = ReactRouter;
 
class Main extends Component{
    render(){
        return(            
            <div>
                <h1>Hyperledger Fabric Study</h1>
                <ul className="header" >
                    <li><Link exact to="/">Home</Link></li>
                    <li><Link to="/basic">BasicNetwork</Link></li>
                    <li><Link to="/first">FirstNetwork</Link></li>
                </ul>
                <div className="content">
                {this.props.children}
                </div>
            </div>            
        );
    }
}
 
class Home extends Component{
    render(){
        return(
            <div>
                <h2>HELLO</h2>
                <p>안녕하세요? 하이퍼레저에 접속하는 노드 웹 예제입니다. 잘해보죠~!!!</p>
            </div>
        );
    }
}
class BasicNetwork extends Component{
    basic_network=()=>{
        axios.get('/basic_network')
        .then((response)=>{
            console.log(response);
            
        })
        .catch((error)=>{
            console.log(error);
        });
    }
    send=()=>{
        alert(this.amount.value);
        axios.post('/basic_network',{"amount":this.amount.value})
        .then((response)=>{
            console.log(response);
            
        })
        .catch((error)=>{
            console.log(error);
        });
    }
 
    render(){
        return(
            <div>
                <h2>BasicNetwork</h2>
                <p><button onClick={this.basic_network}>연결</button></p>
                <br/>
                <div>a가 b에게 {' '}
                <input placeholder='송금량' ref={ref=>this.amount=ref} />원을 {' '} 
                <button onClick={this.send}  > 보내기</button><br/>               
                </div>
            </div>
        );
    }
}
class FirstNetwork extends Component{  
 
    render(){
        return(
            <div>
                <h2>FirstNetwork에 연결 해보세요</h2>                
            </div>
        );
    }
}
 
ReactDOM.render(
    (<Router>
        <Route path="/" component={Main} >   
            <Route path="basic" component={BasicNetwork}/>
            <Route path="first" component={FirstNetwork} />
            <IndexRoute component={Home} />
        </Route>
    </Router>)
    ,document.getElementById("root")
);

 

 

public폴더 안에 index.css 파일 생성

index.css

body{
    background-color: #FFCC00;
    padding:20px;
    margin:0;
}
h1,h2,p,ul,li{
    font-family:sans-serif;
}
ul.header li{
    display: inline;
    list-style-type:none;
    margin:0;
}
ul.header{
    background-color: #111;
    padding: 0;
}
ul.header li a{
    color:#FFF;
    font-weight: bold;
    text-decoration: none;
    padding: 20px;
    display: inline-block;
}
.content{
    background-color: #FFF;
    padding: 20px;
}
.content h2{
    padding: 0;margin:0;
}
.content li{
    margin-bottom: 10px;
}
a:hover{
    background-color: #0099ff;
}

 

 

 

이제 MYWEB1 밑에 server.js 를 만들어줄게요

server.js

const express=require("express");
const path=require("path");
const app=express(); 
 
app.use(express.static(path.join(__dirname,"/public")));
 
app.use(express.json());
 
app.use('/basic_network', require('./routes/basic_network_router'));
 
app.listen(3000,function(){
    console.log("3000 server ready...");
           });

 

 

 

이제 MYWEB1 밑에 routes 폴더 생성 후 basic_networ_router.js 생성

basic_networ_router.js

const express = require('express');
const router = express.Router();

/* GET */
router.get('/', function(req, res, next) {
    res.json({"msg":"ok"});
  });
  
module.exports = router;

 

이제 package.json으로 가셔서 다음 scripts 구간에 한 줄 추가해주세요:)

 

"start": "nodemon server.js",

 

"scripts": {

    "start": "nodemon server.js",

 

 

 

 

이제 시작해볼게요:)

npm start

 

그리고 터미널에서 ls 명령을 내려보시면

이제 무언가가 보이실겁니다

 

root@ubuntu:~/HLF# ls
fabric-samples

 

 

 

여기서 주의할 점은 fabric-samples는 docker image가 아닙니다

 

docker images라는 명령어를 내렸을 때 출력되는 것들이 해당되는 거에요

 

root@ubuntu:~/HLF# docker images
REPOSITORY                   TAG                 IMAGE ID            CREATED             SIZE
hyperledger/fabric-ca        1.4                 152b9082adf6        10 days ago         158MB
hyperledger/fabric-ca        1.4.8               152b9082adf6        10 days ago         158MB
hyperledger/fabric-ca        latest              152b9082adf6        10 days ago         158MB
hyperledger/fabric-tools     1.4                 18ed4db0cd57        11 months ago       1.55GB
hyperledger/fabric-tools     1.4.3               18ed4db0cd57        11 months ago       1.55GB
hyperledger/fabric-tools     latest              18ed4db0cd57        11 months ago       1.55GB
hyperledger/fabric-ccenv     1.4                 3d31661a812a        11 months ago       1.45GB
hyperledger/fabric-ccenv     1.4.3               3d31661a812a        11 months ago       1.45GB
hyperledger/fabric-ccenv     latest              3d31661a812a        11 months ago       1.45GB
hyperledger/fabric-orderer   1.4                 b666a6ebbe09        11 months ago       173MB
hyperledger/fabric-orderer   1.4.3               b666a6ebbe09        11 months ago       173MB
hyperledger/fabric-orderer   latest              b666a6ebbe09        11 months ago       173MB
hyperledger/fabric-peer      1.4                 fa87ccaed0ef        11 months ago       179MB
hyperledger/fabric-peer      1.4.3               fa87ccaed0ef        11 months ago       179MB
hyperledger/fabric-peer      latest              fa87ccaed0ef        11 months ago       179MB

 

 


 

이제 vs code의 package.js에서 dependencies 에 다음 세줄을 추가해주세요:)

 

  "fabric-ca-client": "~1.4.0",
    "fabric-client": "~1.4.0",
    "fabric-network": "^1.4.4",

 

얘네들은 결국 web3j, web3js의 역할을 해냅니다

HLF Node SDK 라고 불려집니다:)

 

여기까지가 한 작업이 바로 다음과 같습니다

 

 

이제 우리는 basic-network로 판을 깔아서 구동시켜줘야 합니다

 

그럼 터미널로 가서 ls한 후에 fabric-sample를 확인합니다

 

root@ubuntu:~/HLF# ls
fabric-samples

 

 

fabric-samples로 들어가주세요

그리고 ls로 확인

 

root@ubuntu:~/HLF# cd fabric-samples/
root@ubuntu:~/HLF/fabric-samples# ls
balance-transfer          commercial-paper  interest_rate_swaps
basic-network             config            Jenkinsfile
bin                       CONTRIBUTING.md   LICENSE
chaincode                 docs              MAINTAINERS.md
chaincode-docker-devmode  fabcar            off_chain_data
ci.properties             first-network     README.md
CODE_OF_CONDUCT.md        high-throughput   scripts

 

 

이 중에 basic-network로 들어가주세요

 

cd basic-network

 

 

다음 명령어는 가나슈의 quick start와 동일합니다

즉 판이 깔리는 것이쥬

 ./start.sh

 

docker ps (🡺 이때 불켜진 4개의 컨테이너만 보입니다)

docker ps

 

 

 

gedit을 활용해서 다음 명령어!

 

gedit start.sh

 

그러면 새하얀 터미널이 새로 나오는 데요

보기 쉽게 line번호 추가해서 보도록 할게요:)

 

 

 

이제 다음 명령어를 쳐서 또 gedit 창으로 보도록 할게요

 

gedit docker-compose.yml

 

yaml 파일 ---> 요새 유행하는 파일 포맷입니다

탭으로 데이터의 종속성을 명시합니다

 

다음을 보시면 networks는 아닌데 basic 앞에 tap이 설정되어있습니다

이런 경우는 basic이 networks에 종속이 되어있다는 것입니다

 

그 아래줄들도 마찬가지로 services에 종속되어있는 것이쥬

 

 

 

gedit을 통해서 포트번호들을 모두 확인해주세요

우리는 이 포트번호를 각각의 전화번호라고 생각할게요

 

다음 그림을 참고로 함께 봐주세요:)

 

 

그리고 다시 gedit start.sh 가서 다음과 같이 cli 를 추가

방에 있는 불을 다 꺼주세요

 ./stop.sh

 

이제 다시 켜볼게요

 ./stop.sh

 

그럼 방이 5개인 지 확인 해주세요:)

cli도 있어야 합니다

 

docke ps

 

이제 cli 의 집으로 가볼게요

docker exec -it cli bash

 

그러면 다음과 같이 바뀝니다

 

이 상태에서 ls 명령어를 내리면 crypto가 보일 거에요

 

root@9b00d486b1a6:/opt/gopath/src/github.com/hyperledger/fabric/peer# ls
crypto

 

 

이제 exit로 나와주세요

그리고 다시 들어갈게요

 

root@9b00d486b1a6:/var/hyperledger# exit
exit
root@ubuntu:~/HLF/fabric-samples/basic-network# docker exec -it cli bash

 

그리고 github까지 나와서 ls

이 중에 sacc로 들어가주세요

 

root@9b00d486b1a6:/opt/gopath/src/github.com/hyperledger/fabric/peer# cd ../../..
root@9b00d486b1a6:/opt/gopath/src/github.com# ls
abac  chaincode_example02  fabcar  hyperledger  marbles02  marbles02_private  sacc

 

 

ls로 뭐가 있는 지 확인해주세요

 

root@9b00d486b1a6:/opt/gopath/src/github.com/sacc# ls
sacc.go

 

 

이제 cd ..으로 github까지 나온 후에 다음 명령어를 내려주세요:)

jes 라는 이름으로 sacc를 설치하겠다는 것입니다

여기서 sacc = Simple Asset Chain Code를 의미합니다

peer chaincode install -n jes -v 1.0 -p github.com/sacc

 

다음과 같이 출력이 될텐데요

이 상태는 아직 어떤 채널에도 연결되어 있지 않습니다:)

 

root@9b00d486b1a6:/opt/gopath/src/github.com# peer chaincode install -n jes -v 1.0 -p github.com/sacc
2020-08-11 08:35:05.166 UTC [chaincodeCmd] checkChaincodeCmdParams -> INFO 001 Using default escc
2020-08-11 08:35:05.167 UTC [chaincodeCmd] checkChaincodeCmdParams -> INFO 002 Using default vscc
2020-08-11 08:35:05.433 UTC [chaincodeCmd] install -> INFO 003 Installed remotely response:<status:200 payload:"OK" > 

 

 

그래서 다음 명령어를 통해서 특정 채널에 이 체인코드를 연결해주세요

jes라는 체인코드를 mychannel에 연결시켜주는 것이쥬

 

peer chaincode instantiate -n jes -v 1.0 -c '{"Args":["a","10"]}' -C mychannel 

 

이 과정이 바로 스마트 컨트랙트를 만들고 deploy하는 과정이라고 봐주시면 됩니다:)

 

root@9b00d486b1a6:/opt/gopath/src/github.com# peer chaincode instantiate -n jes -v 1.0 -c '{"Args":["a","10"]}' -C mychannel 
2020-08-11 08:36:57.001 UTC [chaincodeCmd] InitCmdFactory -> INFO 001 Retrieved channel (mychannel) orderer endpoint: orderer.example.com:7050
2020-08-11 08:36:57.002 UTC [chaincodeCmd] checkChaincodeCmdParams -> INFO 002 Using default escc
2020-08-11 08:36:57.002 UTC [chaincodeCmd] checkChaincodeCmdParams -> INFO 003 Using default vscc

 

 

불이 켜진 곳 확인!!

root@ubuntu:~# docker ps

 

다음 명령어로 실행을 시켜주세요

 

root@ubuntu:~# docker exec -it peer0.org1.example.com bash

 

 

이제 다음 명령어를 순서대로 실행시켜주세요

각각 하위폴더로 계속 들어가는 데 ls로 확인하면서 들어가는 과정입니다:)

 

root@16f2dce14eef:/opt/gopath/src/github.com/hyperledger/fabric# cd /var 

root@16f2dce14eef:/var# ls
backups  cache  hyperledger  lib  local  lock  log  mail  opt  run  spool  tmp
root@16f2dce14eef:/var# cd hyperledger/

root@16f2dce14eef:/var/hyperledger# ls
production

root@16f2dce14eef:/var/hyperledger# cd production/

root@16f2dce14eef:/var/hyperledger/production# ls
chaincodes  ledgersData  transientStore

root@16f2dce14eef:/var/hyperledger/production# cd chaincodes/

root@16f2dce14eef:/var/hyperledger/production/chaincodes# ls
jes.1.0

 

 

jes.1.0까지 잘 있는 것을 확인했다면

cd .. 으로 나오는 것을 시작으로 다음을 실행해주세요:)

 

root@16f2dce14eef:/var/hyperledger/production/chaincodes# cd ..

root@16f2dce14eef:/var/hyperledger/production# ls
chaincodes  ledgersData  transientStore

root@16f2dce14eef:/var/hyperledger/production# cd ledgersData/

root@16f2dce14eef:/var/hyperledger/production/ledgersData# ls
bookkeeper  configHistory  historyLeveldb  pvtdataStore
chains      fileLock       ledgerProvider

root@16f2dce14eef:/var/hyperledger/production/ledgersData# cd chains/

root@16f2dce14eef:/var/hyperledger/production/ledgersData/chains# ls
chains  index

root@16f2dce14eef:/var/hyperledger/production/ledgersData/chains# cd chains/
root@16f2dce14eef:/var/hyperledger/production/ledgersData/chains/chains# ls
mychannel

root@16f2dce14eef:/var/hyperledger/production/ledgersData/chains/chains# cd mychannel/
root@16f2dce14eef:/var/hyperledger/production/ledgersData/chains/chains/mychannel# ls
blockfile_000000

 

 

blockfile_000000가 보이네요

그럼 size를 확인해주세요

total 24라고 출력이 됩니다

root@16f2dce14eef:/var/hyperledger/production/ledgersData/chains/chains/mychannel# ll
total 24
drwxr-xr-x 2 root root  4096 Aug 11 07:41 ./
drwxr-xr-x 3 root root  4096 Aug 11 07:41 ../
-rw-r----- 1 root root 13522 Aug 11 08:37 blockfile_000000

root@16f2dce14eef:/var/hyperledger/production/ledgersData/chains/chains/mychannel# 

 

 

 

 a의 값을 물어봤더니 10이라고 출력이 됩니다

 

root@16f2dce14eef:/var/hyperledger/production/ledgersData/chains/chains/mychannel# peer chaincode query -n jes -c '{"Args":["get","a"]}' -C mychannel 
10

 

 

a의 값을 20으로 변경해달라고 한 후에 ll 명령어로 size확인

root@16f2dce14eef:/var/hyperledger/production/ledgersData/chains/chains/mychannel# peer chaincode invoke -n jes -c '{"Args":["set","a","20"]}' -C mychannel
2020-08-11 08:50:25.571 UTC [chaincodeCmd] InitCmdFactory -> INFO 001 Retrieved channel (mychannel) orderer endpoint: orderer.example.com:7050
2020-08-11 08:50:25.576 UTC [chaincodeCmd] chaincodeInvokeOrQuery -> INFO 002 Chaincode invoke successful. result: status:200 payload:"20" 

 

total 28이라고 출력이 됩니다

 

root@16f2dce14eef:/var/hyperledger/production/ledgersData/chains/chains/mychannel# ll
total 28
drwxr-xr-x 2 root root  4096 Aug 11 07:41 ./
drwxr-xr-x 3 root root  4096 Aug 11 07:41 ../
-rw-r----- 1 root root 17403 Aug 11 08:50 blockfile_000000

 

 

변경된 a값 출력해보기

 

root@16f2dce14eef:/var/hyperledger/production/ledgersData/chains/chains/mychannel# peer chaincode query -n jes -c '{"Args":["get","a"]}' -C mychannel
20

 

 

728x90
반응형