CloudFront를 통해 퍼블릭 상태의 객체에 대한 접근을 차단하고, https까지 적용시키려고 합니다.

 

https://whyeskang.com/411

 

AWS S3로 React 배포하기

S3와 CloudFront를 이용한 배포 방법이 있고, S3 만으로 배포하는 방법이 있습니다. 권장하는 방법은 S3, CloudFront를 모두 사용하는 방법이고, 이 글에서는 S3 만으로 배포하는 것을 다룹니다. 사전에

whyeskang.com

우선 이전 글에 이어서 포스팅하니, 앞 내용은 여기서 확인해주시면 됩니다.

 

현재 S3만으로 배포가 완료된 이 버킷은 퍼블릭 상태이고, 퍼블릭 차단이 해제되어 있습니다.

먼저 이것부터 돌려놓습니다.

퍼블릭 액세스 차단을 다시 활성화하고, 현재 등록된 버킷정책을 삭제하여 액세스를 "버킷 및 객체가 퍼블릭이 아님" 상태로 돌려놓습니다.

완료된 화면입니다.

 

그리고 정적 웹 사이트 호스팅로 "비활성됨" 으로 변경합니다.

 

https://us-east-1.console.aws.amazon.com/cloudfront/v3/home

 

https://us-east-1.console.aws.amazon.com/cloudfront/v3/home

 

us-east-1.console.aws.amazon.com

그러면 이제 위 링크를 이용하여 CloudFront 페이지로 넘어갑니다.

 

우측의 "배포 생성" 버튼을 누릅니다.

 

우선 원본 도메인으로 해당 버킷에 해당하는 도메인을 선택합니다.

그리고 S3 버킷 액세스를 "원본 액세스 제어 설정"으로 변경합니다.

 

그 다음 제어 설정 생성을 눌러서 해당 S3의 제어 설정을 생성합니다.

건드릴 것 없이 바로 생성 버턴을 누르시면 됩니다.

 

 

그리고 아래에 Origin Shield 활성화를 "예"로 변경합니다.

지역은 S3 버킷과 동일하게 맞춥니다.

 

기본 캐시 동작에서는 하나만 변경하면 됩니다.

뷰어 프로토콜 정책이 HTTP and HTTPS로 되어있을겁니다.

이거를 "Redirect HTTP to HTTPS"로 변경합니다.

 

그리고 맨 밑에 내려와서 기본값 루트 객체를 /index.html 으로 작성하고 배포를 생성합니다.

 

그러면 배포를 생성함과 동시에 S3 버킷 정책을 업데이트하라고 합니다.

정책을 복사해줍니다.

 

그리고 해당 S3로 넘어가서 버킷 -> 권한 -> 버킷 정책 -> 편집에서 해당 내용을 넣고 저장합니다.

위 사진처럼 되면 완료입니다.

 

다시 생성된 배포로 넘어가면 도메인이 표시되어 있습니다.

 

도메인 + /index.html 으로 들어가면 배포가 완료되었고, https까지 적용된 것을 확인하실 수 있습니다.

그리고 버킷의 엔드포인트까지 노출되지 않아서 S3만으로 배포한 방법보다는 안정적이라고 볼 수 있습니다.

 

하지만 도메인/index.html 을 통해서만 이 페이지가 뜨며, /index.html를 제거한다면 AccessDenied가 뜹니다.

여기서 오류페이지에 대한 응답을 직접 생성하는 방법으로 해결합니다.

 

해당 배포 -> 오류 페이지 응답 생성에서 사용자 정의 오류 응답 생성 버튼을 누릅니다.

 

여기서 오류코드를 응답 페이지로 이동하도록 지정할 수 있습니다.

/index.html로 경로를 설정하고, 응답 코드를 200으로 변경합니다.

 

같은 방법으로 403, 404에 대한 응답 페이지를 생성하였습니다.

 

이제 /index.html 없이 도메인 입력만으로 이동이 가능한 것을 확인할 수 있습니다.

'Etc' 카테고리의 다른 글

AWS S3로 React 배포하기  (0) 2023.02.02
GitHub Actions를 이용한 Slack Notification  (0) 2023.01.30
React Web3로 Contract 함수 호출  (2) 2023.01.10
GitLab -> GitHub Mirroring  (0) 2022.06.12
Unity Script로 카메라 Culling Mask 기능 사용하기  (2) 2021.10.29

S3와 CloudFront를 이용한 배포 방법이 있고, S3 만으로 배포하는 방법이 있습니다.

권장하는 방법은 S3, CloudFront를 모두 사용하는 방법이고, 이 글에서는 S3 만으로 배포하는 것을 다룹니다.

 

사전에 준비하셔야할 것은 배포 하려고하는 React 프로젝트입니다.

npx create-react-app deploy-app

저는 기본 프로젝트를 배포하기 위해 위 명령어로 새 프로젝트를 만들었습니다.

 

우선 프로젝트를 S3에 업로드한 후에 배포를 진행하게 됩니다.

먼저 리액트 프로젝트를 아래 명령어로 빌드해주시면 됩니다.

npm run build

그럼 프로젝트 바로밑에 build 폴더가 생성되는 것을 확인할 수 있습니다.

build 폴더 아래의 모든 파일을 S3에 업로드합니다.

 

https://s3.console.aws.amazon.com/s3/buckets

 

https://s3.console.aws.amazon.com/s3/buckets

 

s3.console.aws.amazon.com

위 링크를 이용하여 S3 버킷 페이지로 이동합니다.

그리고 우측에 "버킷 만들기" 버튼으로 버킷을 생성합니다.

 

버킷 이름은 원하는대로 작성합니다.

 

객체 소유권은 비활성화됨을 유지합니다.

 

원래는 모든 퍼블릭 액세스를 차단하는 것이 맞습니다.

하지만 S3만으로 배포할 때는 차단을 해제합니다.

이는 추후에 업로드할 CloudFront로 보완할 수 있습니다.

 

나머지 설정은 기본으로 놔두고 버킷을 생성하시면 됩니다.

이렇게 생성된 버킷의 액세스는 "객체를 퍼블릭으로 설정할 수 있음" 상태입니다.

이것을 "퍼플릭" 상태로 변경해야 합니다.

이를 위해 버킷 -> 권한 -> 버킷 정책에서 "편집" 버튼을 눌러 버킷 정책을 넣어주시면 됩니다.

 

1시 방향의 "정책 생성기" 버튼으로 편하게 정책을 생성할 수 있습니다.

그 전에 왼쪽의 버킷 ARN을 복사하고 넘어가도록 합시다.

 

먼저 Policy Type은 "S3 Bucket Policy"를 선택합니다.

Principal은 *

Actions는 GetObject

ARN은 방금 복사했던 ARN + /*을 넣습니다. (/*을 반드시 포함해야 합니다.)

그러면 Add Statement 버튼이 활성화되며, 클릭합니다.

 

Generate Policy 버튼까지 누르면 JSON 형식으로 버킷 정책이 생성됩니다.

위 내용을 복사합니다.

 

그리고 다시 버킷 정책으로 돌아와서 복사한 내용을 붙여 넣으면 됩니다.

그리고 "변경 사항 저장" 버튼을 눌러 저장합니다.

 

그러면 객체의 액세스가 퍼블릭으로 변경된 것을 확인할 수 있습니다.

 

다시 해당 버킷으로 들어갑니다.

여기에 아까 build했던 파일을 다 업로드합니다.

업로드가 완료되면 이런 상태가 됩니다.

 

그리고 속성에서 맨 밑으로 내려가면 "정적 웹 사이트 호스팅"이 있습니다. 편집을 누릅니다.

우선 활성화부터 해주시고, 기본 페이지로 index.html 을 넣어줍니다.

그리고 변경사항을 저장합니다.

 

그러면 이렇게 URL을 발급 받을 수 있습니다.

 

그리고 해당 URL을 클릭하면 배포가 완료된 것을 확인할 수 있습니다.

 

다만 이 방법은 객체가 퍼블릭 상태고, https가 적용되지 않아 보안상의 이슈가 있습니다.

이를 해결하기 위해서는 CloudFront에 S3를 연결해주는 작업이 필요합니다.

CloudFront 관련 글은 아래 링크에서 확인해주시면 되겠습니다.

https://emoney96.tistory.com/412

 

'Etc' 카테고리의 다른 글

AWS S3 & CloudFront로 React 배포하기  (0) 2023.02.02
GitHub Actions를 이용한 Slack Notification  (0) 2023.01.30
React Web3로 Contract 함수 호출  (2) 2023.01.10
GitLab -> GitHub Mirroring  (0) 2022.06.12
Unity Script로 카메라 Culling Mask 기능 사용하기  (2) 2021.10.29

이 글에서는 solidity 문법을 다루지는 않으며, 배포된 solidity의 Contract 함수를 web3에서 호출하는 방법을 포스팅합니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// SPDX-License-Identifier GPL-30
pragma solidity >= 0.7.0 < 0.9.0;
 
contract Hello {
    uint public num = 0;
    string public hi = "hello solidity!!";
 
    function addNumAndX(uint x) public {
        num += x;
    }
 
    function hello() public view returns(string memory) {
        return hi;
    }
 
    function getNum() public view returns(uint) {
        return num;
    }
}
 
 cs

우선 solidity를 이렇게 작성해줍니다. 저는 Remix에서 작성하였습니다.

그 다음 compiler에서 컴파일을 해준 후에

 

deploy에서 배포를 해야합니다.

아래의 Deploy 버튼을 누르기 전, 환경을 "Injected Provider - MetaMask"로 변경합니다.

그리고 Deploy 버튼을 누릅니다.

 

그러면 해당 Contract를 배포하기 위한 가스비를 지불하는 창이 뜹니다.

위 창은 크롬의 MetaMask 확장 프로그램입니다.

 

배포가 완료되면 아래의 Deployed Contracts에 해당 컨트랙트가 뜹니다.

이제 우측 복사 버튼을 눌러 컨트랙트 주소를 가져올 수 있습니다.

이제 React로 넘어갑니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
import {Component} from 'react';
import Web3 from 'web3';
 
class App extends Component {
    constructor(props) {
        super(props);
 
        const contractAddress = '0xaFA55F3E3DB63C536581762ceb3149aD3349913d';
        const abi = [
            {
                "inputs": [
                    {
                        "internalType": "uint256",
                        "name": "x",
                        "type": "uint256"
                    }
                ],
                "name": "addNumAndX",
                "outputs": [],
                "stateMutability": "nonpayable",
                "type": "function"
            },
            {
                "inputs": [],
                "name": "getNum",
                "outputs": [
                    {
                        "internalType": "uint256",
                        "name": "",
                        "type": "uint256"
                    }
                ],
                "stateMutability": "view",
                "type": "function"
            },
            {
                "inputs": [],
                "name": "hello",
                "outputs": [
                    {
                        "internalType": "string",
                        "name": "",
                        "type": "string"
                    }
                ],
                "stateMutability": "view",
                "type": "function"
            },
            {
                "inputs": [],
                "name": "hi",
                "outputs": [
                    {
                        "internalType": "string",
                        "name": "",
                        "type": "string"
                    }
                ],
                "stateMutability": "view",
                "type": "function"
            },
            {
                "inputs": [],
                "name": "num",
                "outputs": [
                    {
                        "internalType": "uint256",
                        "name": "",
                        "type": "uint256"
                    }
                ],
                "stateMutability": "view",
                "type": "function"
            }
        ];
 
        this.fromAddress = '0xE8Ed81Ae938Ede438501d12d87324AB1428A251a';
        this.web3 = new Web3(Web3.givenProvider || 'ws://some.local-or-remote.node:8546');
        this.contract = new this.web3.eth.Contract(abi, contractAddress);
    }
}
 cs

web3 모듈을 가져와서 사용하고, abi, contractAddress를 이용하여 contract를 가져옵니다.

여기서 abi는 Contract 함수와 매개변수들의 정보가 담겨있는 JSON 형식의 리스트입니다.

Remix의 compiler 메뉴 밑에 해당 컨트랙트의 ABI를 복사할 수 있습니다.

그대로 가져와서 React 코드에 붙여줍니다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
render() {
    return (
        <div className="App">
            <button onClick={this.connectWallet.bind(this)}>connectWallet</button>
            <br/>
            <button onClick={this.hello.bind(this)}>hello</button>
            <br/>
            <button onClick={this.addNumAndX.bind(this)}>addNumAndX</button>
            <br/>
            <button onClick={this.getNum.bind(this)}>getNum</button>
            <br/>
        </div>
    );
}
 
 cs

화면에는 버튼을 놓았습니다.

각각 connectWallet, hello, addNumAndX, getNum 함수를 호출하는 버튼입니다.

함수에서는 constructor의 this를 사용할 수 없어 bind(this)로 this를 사용할 수 있도록 넘겨주었습니다.

 

이제 메소드입니다.

1
2
3
4
5
6
connectWallet() {
    this.web3.eth.requestAccounts().then((res) => {
        console.log(res);
    });
}
 
 cs

지갑연결을 요청하는 코드입니다.

MetaMask가 설치되어있다면 문제없이 작동됩니다.

res는 지갑 주소가 array 형식으로 담겨있습니다.

 

1
2
3
4
5
6
hello() {
    this.contract.methods.hello().call((err, res) => {
        console.log(res);
   });
}
 
 cs

다음은 Contract의 hello 함수를 호출하는 부분입니다.

string을 return받는 역할만 있어 가스비를 지출하지 않으며, call을 이용하여 호출할 수 있습니다.

res는 string입니다.

 

1
2
3
4
5
6
getNum() {
    this.contract.methods.getNum().call((err, res) => {
        console.log(res);
   });
}
 
 cs

다음은 변수 num의 값을 가져오기 위한 getNum 함수 호출입니다.

hello 함수와 동일하게 call을 이용하여 호출합니다.

res는 uint입니다.

 

1
2
3
4
5
6
7
8
9
10
11
addNumAndX() {
    let x = 2;
    this.contract.methods.addNumAndX(x).send({from: this.fromAddress})
        .on('receipt', function (res) {
            console.log(res);
        })
        .on('error', function (err) {
            console.log(err);
        });
}
 
 cs

다음은 num에 x만큼 더하는 로직이 있는 addNumAndX 함수 호출입니다.

다른 함수와는 다르게 값을 변경하는 로직이 포함돼서 그런지 가스비를 요구하고 있습니다.

이 코드에서는 지불할 ETH가 0이지만 형식적으로 지불은 해야합니다.

가스비 지불을 위해 call 대신 send를 사용하였으며, 지불할 주소를 from에 작성하면 호출할 수 있습니다.

 

'receipt'을 감지하면 가스비 지불이 완료되었고, 트랜잭션 내역을 확인할 수 있습니다.

transactionHash를 통해 etherscan에서도 확인이 가능합니다.

그리고 getNum 함수를 다시 호출하면 값이 변경된 것을 확인할 수 있습니다.

 

다른 로직들은 [web3 공식문서]에서 확인해주시면 됩니다.

 

아래는 전체 코드입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
import {Component} from 'react';
import Web3 from 'web3';
 
class App extends Component {
    constructor(props) {
        super(props);
 
        const contractAddress = '0xaFA55F3E3DB63C536581762ceb3149aD3349913d';
        const abi = [
            {
                "inputs": [
                    {
                        "internalType": "uint256",
                        "name": "x",
                        "type": "uint256"
                    }
                ],
                "name": "addNumAndX",
                "outputs": [],
                "stateMutability": "nonpayable",
                "type": "function"
            },
            {
                "inputs": [],
                "name": "getNum",
                "outputs": [
                    {
                        "internalType": "uint256",
                        "name": "",
                        "type": "uint256"
                    }
                ],
                "stateMutability": "view",
                "type": "function"
            },
            {
                "inputs": [],
                "name": "hello",
                "outputs": [
                    {
                        "internalType": "string",
                        "name": "",
                        "type": "string"
                    }
                ],
                "stateMutability": "view",
                "type": "function"
            },
            {
                "inputs": [],
                "name": "hi",
                "outputs": [
                    {
                        "internalType": "string",
                        "name": "",
                        "type": "string"
                    }
                ],
                "stateMutability": "view",
                "type": "function"
            },
            {
                "inputs": [],
                "name": "num",
                "outputs": [
                    {
                        "internalType": "uint256",
                        "name": "",
                        "type": "uint256"
                    }
                ],
                "stateMutability": "view",
                "type": "function"
            }
        ];
 
        this.web3 = new Web3(Web3.givenProvider || 'ws://some.local-or-remote.node:8546');
        this.fromAddress = '0xE8Ed81Ae938Ede438501d12d87324AB1428A251a';
        this.contract = new this.web3.eth.Contract(abi, contractAddress);
 
    }
 
    connectWallet() {
        this.web3.eth.requestAccounts().then((res) => {
            console.log(res);
        });
    }
 
    hello() {
        this.contract.methods.hello().call((err, res) => {
            console.log(res);
        });
    }
 
    addNumAndX() {
        let x = 2;
        this.contract.methods.addNumAndX(x).send({from: this.fromAddress})
            .on('receipt', function (res) {
                console.log(res);
            })
            .on('error', function (err) {
                console.log(err);
            });
    }
 
    getNum() {
        this.contract.methods.getNum().call((err, res) => {
            console.log(res);
        });
    }
 
    render() {
        return (
            <div className="App">
                <button onClick={this.connectWallet.bind(this)}>connectWallet</button>
                <br/>
                <button onClick={this.hello.bind(this)}>hello</button>
                <br/>
                <button onClick={this.addNumAndX.bind(this)}>addNumAndX</button>
                <br/>
                <button onClick={this.getNum.bind(this)}>getNum</button>
                <br/>
            </div>
        );
    }
}
 
export default App;
 
 cs

'Etc' 카테고리의 다른 글

AWS S3로 React 배포하기  (0) 2023.02.02
GitHub Actions를 이용한 Slack Notification  (0) 2023.01.30
GitLab -> GitHub Mirroring  (0) 2022.06.12
Unity Script로 카메라 Culling Mask 기능 사용하기  (2) 2021.10.29
Unity 카메라 Culling Mask  (0) 2021.10.29

+ Recent posts

티스토리툴바