* Windows 10 Pro


1.

 : 하기의 링크를 통해 환경에 맞는 AWS CLI MSI 설치 내려받기

 : https://docs.aws.amazon.com/ko_kr/cli/latest/userguide/awscli-install-windows.html


2.


3.


4.


5.


6.


7.


8.


9.



저작자표시

'Cloud > Amazon Web Services' 카테고리의 다른 글

AWS Region 및 Availability Zone  (0) 2018.10.20
AWS IAM 사용자 및 그룹, 정책 생성  (0) 2018.10.20
S3 버킷을 통해 정적 웹 사이트 호스팅 구성 및 Vue.js Web App 배포  (0) 2018.10.20
클라우드, S3를 사용한 정적 웹 페이지 구성  (0) 2018.10.14
클라우드, EC2를 사용한 동적 웹 페이지 구성  (0) 2018.10.14


1.

 : 스토리지 > S3 클릭


2.

 : 버킷 만들기 버튼 클릭


3.

 : 버킷 이름 기입 후 다음 버튼 클릭


4.

 : 특별한 설정 사항이 없다면 그대로 다음 버튼 클릭


5.

 : 퍼블릭 권한 관리에서 "이 버킷에 퍼블릭 읽기 액세스 권한을 부여함"을 선택 후 다음 버튼 클릭


6.

 : 검토 후 이상 없을 시 버킷 만들기 버튼 클릭


7.

 : 버킷 목록 중 해당 버킷을 클릭


8.

 : 상단에 속성 탭 클릭


9.

 : 정적 웹 사이트 호스팅 클릭


10.

 : "이 버킷을 사용하여 웹 사이트를 호스팅합니다." 라디오 버튼 클릭

 : 인덱스 문서를 기입 후 저장

 : 엔드포인트의 경로는 접속 시 필요하기 때문에 따로 메모!!


11.

 : 개요 탭을 클릭 후 바로 밑에 업로드 버튼 클릭


12.

 : 파일 추가 버튼이 있는 곳에 배포할 파일 및 폴더를 드래그해서 업로드

 * 배포할 파일 및 폴더 목록을 확인


13.

 : 다음 버튼 클릭


14.

 : 퍼블릭 권한 관리에서 "이 객체에 퍼블릭 읽기 액세스 권한을 부여함" 선택 후 다음 버튼 클릭


15.

 : 특별한 설정 사항이 없다면 확인 후 다음 버튼 클릭


16.

 : 내용 검토 후 업로드 버튼 클릭


17.


18.

 : Home


 : Todo



저작자표시

'Cloud > Amazon Web Services' 카테고리의 다른 글

AWS IAM 사용자 및 그룹, 정책 생성  (0) 2018.10.20
Windows에 AWS Command Line Interface 설치  (0) 2018.10.20
클라우드, S3를 사용한 정적 웹 페이지 구성  (0) 2018.10.14
클라우드, EC2를 사용한 동적 웹 페이지 구성  (0) 2018.10.14
클라우드, RDS를 사용한 데이터베이스 구성  (0) 2018.10.14


1.


2.

 : 스토리지 > S3 클릭


3.

 : 버킷 만들기 버튼 클릭


4.

 : 버킷 이름 기입 후 다음 버튼 클릭


5.

 : 특별한 설정 사항이 없다면 그대로 다음 버튼 클릭


6.

 : 퍼블릭 권한 관리에서 "이 버킷에 퍼블릭 읽기 액세스 권한을 부여함"을 선택 후 다음 버튼 클릭


7.

 : 검토 후 이상 없을 시 버킷 만들기 버튼 클릭


8.

 : 버킷 목록 중 해당 버킷을 클릭


9.

 : 상단에 속성 탭 클릭


10.

 : 정적 웹 사이트 호스팅 클릭


11.

 : 인덱스 문서를 기입 후 저장

 : 엔드포인트의 경로는 접속 시 필요하기 때문에 따로 기억해놓아야 함!!


12.

 : 개요 탭을 클릭 후 바로 밑에 업로드 버튼 클릭


13.

 : 파일 추가 버튼을 클릭 후 index.htm이 위치한 경로를 지정


14.

 : 다음 버튼 클릭


15.

 : 퍼블릭 권한 관리에서 "이 객체에 퍼블릭 읽기 액세스 권한을 부여함" 선택 후 다음 버튼 클릭


16.

 : 특별한 설정 사항이 없다면 확인 후 다음 버튼 클릭


17.

 : 내용 검토 후 업로드 버튼 클릭


18.


19.



저작자표시

'Cloud > Amazon Web Services' 카테고리의 다른 글

Windows에 AWS Command Line Interface 설치  (0) 2018.10.20
S3 버킷을 통해 정적 웹 사이트 호스팅 구성 및 Vue.js Web App 배포  (0) 2018.10.20
클라우드, EC2를 사용한 동적 웹 페이지 구성  (0) 2018.10.14
클라우드, RDS를 사용한 데이터베이스 구성  (0) 2018.10.14
로컬, RDS를 사용한 데이터베이스 구성  (0) 2018.10.13


1.


2.


3.


4.


5.


6.


7.

 : 기존의 생성된 키 페어가 있을 경우 기존 키 페어 선택

 : 키 페어 이름 지정 후 키 페어 다운로드 버튼 클릭


8.

 : 인스턴스 보기 버튼 클릭


9.


10.


11.
 : 인스턴스 목록 화면에서 스크롤을 우측 끝으로 이동 후 해당 인스턴스의 보안 그룹을 클릭

12.
 : 보안 그룹 목록 중 해당 보안 그룹의 빈 곳에 우클릭 후 인바운드 규칙 편집 클릭

13.
 : 규칙 추가 버튼 클릭

14.
 : 다음과 같은 예시로 8080 포트 허용 규칙을 작성 후 저장 버튼 클릭

14.

 : 위의 목록 중 해당 머신의 빈곳에서 우클릭


15.

 : 인스턴스 연결 관련 정보는 하기 이미지와 다를 수 있음


16.

 : 인스턴스 생성 시 생성한 pem 파일을 ppk 파일로 변환하려면 클릭


17.

 : putty 실행 후 인스턴스의 퍼블릭 DNS -> Host Name (or IP address)에 입력

  ex) ubuntu@퍼블릭 DNS


18.

 : 좌측 카테고리에서 SSH > Auth 클릭

 : Browser 버튼을 클릭하여 변환한 ppk 파일을 찾아 경로 지정


19.

 : 예 버튼 클릭 후 원격 접속 진행


20.

 : 정상적으로 접속 성공 시 다음과 같음

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
login as: ubuntu
Authenticating with public key "imported-openssh-key"
Welcome to Ubuntu 18.04 LTS (GNU/Linux 4.15.0-1021-aws x86_64)
 
 * Documentation:  https://help.ubuntu.com
 * Management:     https://landscape.canonical.com
 * Support:        https://ubuntu.com/advantage
 
  System information as of Sun Oct 14 01:41:10 UTC 2018
 
  System load:  0.0               Processes:           88
  Usage of /:   13.3% of 7.69GB   Users logged in:     0
  Memory usage: 13%               IP address for eth0: 
  Swap usage:   0%
 
 
  Get cloud support with Ubuntu Advantage Cloud Guest:
    http://www.ubuntu.com/business/services/cloud
 
0 packages can be updated.
0 updates are security updates.
 
 
 
The programs included with the Ubuntu system are free software;
the exact distribution terms for each program are described in the
individual files in /usr/share/doc/*/copyright.
 
Ubuntu comes with ABSOLUTELY NO WARRANTY, to the extent permitted by
applicable law.
 
To run a command as administrator (user "root"), use "sudo <command>".
See "man sudo_root" for details.
 
cs

21.

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
$ curl -sL https://deb.nodesource.com/setup_10.x | su -E bash -
 
## Installing the NodeSource Node.js 10.x repo...
 
 
## Populating apt-get cache...
 
+ apt-get update
Hit:1 http://ap-northeast-2.ec2.archive.ubuntu.com/ubuntu bionic InRelease
Get:2 http://ap-northeast-2.ec2.archive.ubuntu.com/ubuntu bionic-updates InRelse [88.7 kB]
Get:3 http://ap-northeast-2.ec2.archive.ubuntu.com/ubuntu bionic-backports InRease [74.6 kB]
Get:4 http://ap-northeast-2.ec2.archive.ubuntu.com/ubuntu bionic/restricted Soces [5324 B]
Get:5 http://ap-northeast-2.ec2.archive.ubuntu.com/ubuntu bionic/main Sources 29 kB]
Get:6 http://ap-northeast-2.ec2.archive.ubuntu.com/ubuntu bionic/universe Sours [9051 kB]
Get:7 http://security.ubuntu.com/ubuntu bionic-security InRelease [83.2 kB]
Get:8 http://ap-northeast-2.ec2.archive.ubuntu.com/ubuntu bionic/multiverse Soces [181 kB]
Get:9 http://ap-northeast-2.ec2.archive.ubuntu.com/ubuntu bionic/universe amd6Packages [8570 kB]
Get:10 http://ap-northeast-2.ec2.archive.ubuntu.com/ubuntu bionic/universe Tralation-en [4941 kB]
Get:11 http://ap-northeast-2.ec2.archive.ubuntu.com/ubuntu bionic/multiverse a64 Packages [151 kB]
Get:12 http://ap-northeast-2.ec2.archive.ubuntu.com/ubuntu bionic/multiverse Tnslation-en [108 kB]
Get:13 http://ap-northeast-2.ec2.archive.ubuntu.com/ubuntu bionic-updates/univse Sources [87.8 kB]
Get:14 http://ap-northeast-2.ec2.archive.ubuntu.com/ubuntu bionic-updates/restcted Sources [2064 B]
Get:15 http://ap-northeast-2.ec2.archive.ubuntu.com/ubuntu bionic-updates/multerse Sources [3212 B]
Get:16 http://ap-northeast-2.ec2.archive.ubuntu.com/ubuntu bionic-updates/mainources [196 kB]
Get:17 http://ap-northeast-2.ec2.archive.ubuntu.com/ubuntu bionic-updates/mainmd64 Packages [401 kB]
Get:18 http://ap-northeast-2.ec2.archive.ubuntu.com/ubuntu bionic-updates/mainranslation-en [149 kB]
Get:19 http://ap-northeast-2.ec2.archive.ubuntu.com/ubuntu bionic-updates/restcted amd64 Packages [7028 B]
Get:20 http://ap-northeast-2.ec2.archive.ubuntu.com/ubuntu bionic-updates/restcted Translation-en [3076 B]
Get:21 http://ap-northeast-2.ec2.archive.ubuntu.com/ubuntu bionic-updates/univse amd64 Packages [560 kB]
Get:22 http://ap-northeast-2.ec2.archive.ubuntu.com/ubuntu bionic-updates/univse Translation-en [145 kB]
Get:23 http://ap-northeast-2.ec2.archive.ubuntu.com/ubuntu bionic-updates/multerse amd64 Packages [5708 B]
Get:24 http://ap-northeast-2.ec2.archive.ubuntu.com/ubuntu bionic-updates/multerse Translation-en [3176 B]
Get:25 http://ap-northeast-2.ec2.archive.ubuntu.com/ubuntu bionic-backports/unerse Sources [1188 B]
Get:26 http://ap-northeast-2.ec2.archive.ubuntu.com/ubuntu bionic-backports/unerse amd64 Packages [2852 B]
Get:27 http://ap-northeast-2.ec2.archive.ubuntu.com/ubuntu bionic-backports/unerse Translation-en [1200 B]
Get:28 http://security.ubuntu.com/ubuntu bionic-security/main Sources [51.6 kB
Get:29 http://security.ubuntu.com/ubuntu bionic-security/multiverse Sources [16 B]
Get:30 http://security.ubuntu.com/ubuntu bionic-security/universe Sources [19.kB]
Get:31 http://security.ubuntu.com/ubuntu bionic-security/main amd64 Packages [1 kB]
Get:32 http://security.ubuntu.com/ubuntu bionic-security/main Translation-en [.3 kB]
Get:33 http://security.ubuntu.com/ubuntu bionic-security/universe amd64 Packag [85.1 kB]
Get:34 http://security.ubuntu.com/ubuntu bionic-security/universe Translation- [46.8 kB]
Get:35 http://security.ubuntu.com/ubuntu bionic-security/multiverse amd64 Packes [1440 B]
Get:36 http://security.ubuntu.com/ubuntu bionic-security/multiverse Translatioen [996 B]
Fetched 26.1 MB in 5s (5313 kB/s)
Reading package lists... Done
 
## Confirming "bionic" is supported...
 
+ curl -sLf -o /dev/null 'https://deb.nodesource.com/node_10.x/dists/bionic/Release'
 
## Adding the NodeSource signing key to your keyring...
 
+ curl -s https://deb.nodesource.com/gpgkey/nodesource.gpg.key | apt-key add -
OK
 
## Creating apt sources list file for the NodeSource Node.js 10.x repo...
 
+ echo 'deb https://deb.nodesource.com/node_10.x bionic main' > /etc/apt/sources.list.d/nodesource.list
+ echo 'deb-src https://deb.nodesource.com/node_10.x bionic main' >> /etc/apt/sources.list.d/nodesource.list
 
## Running `apt-get update` for you...
 
+ apt-get update
Hit:1 http://ap-northeast-2.ec2.archive.ubuntu.com/ubuntu bionic InRelease
Hit:2 http://ap-northeast-2.ec2.archive.ubuntu.com/ubuntu bionic-updates InRelease
Hit:3 http://ap-northeast-2.ec2.archive.ubuntu.com/ubuntu bionic-backports InRelease
Get:4 https://deb.nodesource.com/node_10.x bionic InRelease [4611 B]
Get:5 https://deb.nodesource.com/node_10.x bionic/main amd64 Packages [768 B]
Hit:6 http://security.ubuntu.com/ubuntu bionic-security InRelease
Fetched 5379 B in 1s (8255 B/s)
Reading package lists... Done
 
## Run `sudo apt-get install -y nodejs` to install Node.js 10.x and npm
## You may also need development tools to build native addons:
     sudo apt-get install gcc g++ make
## To install the Yarn package manager, run:
     curl -sL https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
     echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
     sudo apt-get update && sudo apt-get install yarn
 
cs


22.

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
$ sudo apt-get install -y nodejs
Reading package lists... Done
Building dependency tree
Reading state information... Done
The following additional packages will be installed:
  libpython-stdlib libpython2.7-minimal libpython2.7-stdlib python
  python-minimal python2.7 python2.7-minimal
Suggested packages:
  python-doc python-tk python2.7-doc binutils binfmt-support
The following NEW packages will be installed:
  libpython-stdlib libpython2.7-minimal libpython2.7-stdlib nodejs python
  python-minimal python2.7 python2.7-minimal
0 upgraded, 8 newly installed, 0 to remove and 54 not upgraded.
Need to get 19.0 MB of archives.
After this operation, 88.4 MB of additional disk space will be used.
Get:1 https://deb.nodesource.com/node_10.x bionic/main amd64 nodejs amd64 10.12.0-1nodesource1 [15.0 MB]
Get:2 http://ap-northeast-2.ec2.archive.ubuntu.com/ubuntu bionic/main amd64 libpython2.7-minimal amd64 2.7.15~rc1-1 [334 kB]
Get:3 http://ap-northeast-2.ec2.archive.ubuntu.com/ubuntu bionic/main amd64 python2.7-minimal amd64 2.7.15~rc1-1 [1292 kB]
Get:4 http://ap-northeast-2.ec2.archive.ubuntu.com/ubuntu bionic/main amd64 python-minimal amd64 2.7.15~rc1-1 [28.1 kB]
Get:5 http://ap-northeast-2.ec2.archive.ubuntu.com/ubuntu bionic/main amd64 libpython2.7-stdlib amd64 2.7.15~rc1-1 [1910 kB]
Get:6 http://ap-northeast-2.ec2.archive.ubuntu.com/ubuntu bionic/main amd64 python2.7 amd64 2.7.15~rc1-1 [238 kB]
Get:7 http://ap-northeast-2.ec2.archive.ubuntu.com/ubuntu bionic/main amd64 libpython-stdlib amd64 2.7.15~rc1-1 [7620 B]
Get:8 http://ap-northeast-2.ec2.archive.ubuntu.com/ubuntu bionic/main amd64 python amd64 2.7.15~rc1-1 [140 kB]
Fetched 19.0 MB in 1s (26.7 MB/s)
Selecting previously unselected package libpython2.7-minimal:amd64.
(Reading database ... 56473 files and directories currently installed.)
Preparing to unpack .../0-libpython2.7-minimal_2.7.15~rc1-1_amd64.deb ...
Unpacking libpython2.7-minimal:amd64 (2.7.15~rc1-1) ...
Selecting previously unselected package python2.7-minimal.
Preparing to unpack .../1-python2.7-minimal_2.7.15~rc1-1_amd64.deb ...
Unpacking python2.7-minimal (2.7.15~rc1-1) ...
Selecting previously unselected package python-minimal.
Preparing to unpack .../2-python-minimal_2.7.15~rc1-1_amd64.deb ...
Unpacking python-minimal (2.7.15~rc1-1) ...
Selecting previously unselected package libpython2.7-stdlib:amd64.
Preparing to unpack .../3-libpython2.7-stdlib_2.7.15~rc1-1_amd64.deb ...
Unpacking libpython2.7-stdlib:amd64 (2.7.15~rc1-1) ...
Selecting previously unselected package python2.7.
Preparing to unpack .../4-python2.7_2.7.15~rc1-1_amd64.deb ...
Unpacking python2.7 (2.7.15~rc1-1) ...
Selecting previously unselected package libpython-stdlib:amd64.
Preparing to unpack .../5-libpython-stdlib_2.7.15~rc1-1_amd64.deb ...
Unpacking libpython-stdlib:amd64 (2.7.15~rc1-1) ...
Setting up libpython2.7-minimal:amd64 (2.7.15~rc1-1) ...
Setting up python2.7-minimal (2.7.15~rc1-1) ...
Linking and byte-compiling packages for runtime python2.7...
Setting up python-minimal (2.7.15~rc1-1) ...
Selecting previously unselected package python.
(Reading database ... 57220 files and directories currently installed.)
Preparing to unpack .../python_2.7.15~rc1-1_amd64.deb ...
Unpacking python (2.7.15~rc1-1) ...
Selecting previously unselected package nodejs.
Preparing to unpack .../nodejs_10.12.0-1nodesource1_amd64.deb ...
Unpacking nodejs (10.12.0-1nodesource1) ...
Processing triggers for mime-support (3.60ubuntu1) ...
Setting up nodejs (10.12.0-1nodesource1) ...
Processing triggers for man-db (2.8.3-2) ...
Setting up libpython2.7-stdlib:amd64 (2.7.15~rc1-1) ...
Setting up python2.7 (2.7.15~rc1-1) ...
Setting up libpython-stdlib:amd64 (2.7.15~rc1-1) ...
Setting up python (2.7.15~rc1-1) ...
 
cs


23.

 : node.js 관련 작업 디렉터리 생성

1
2
$ mkdir nodejs
 
cs


24.

1
2
$ cd nodejs
 
cs


25.

 : 관련 패키지 설치를 진행하기 전에 다음과 같이 업데이트 먼저 진행하는 것을 추천

1
2
$ sudo npm update
 
cs


26.

 : mysql 패키지 설치

1
2
3
4
5
6
7
8
9
10
11
12
13
$ sudo npm install -y mysql
npm WARN saveError ENOENT: no such file or directory, open '/home/ubuntu/nodejs/package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open '/home/ubuntu/nodejs/package.json'
npm WARN nodejs No description
npm WARN nodejs No repository field.
npm WARN nodejs No README data
npm WARN nodejs No license field.
 
+ mysql@2.16.0
added 11 packages from 15 contributors and audited 13 packages in 1.588s
found 0 vulnerabilities
 
cs


27.

 : cors 패키지 설치

1
2
3
4
5
6
7
8
9
10
11
12
$ sudo npm install -y cors
npm WARN saveError ENOENT: no such file or directory, open '/home/ubuntu/nodejs/package.json'
npm WARN enoent ENOENT: no such file or directory, open '/home/ubuntu/nodejs/package.json'
npm WARN nodejs No description
npm WARN nodejs No repository field.
npm WARN nodejs No README data
npm WARN nodejs No license field.
 
+ cors@2.8.4
added 3 packages from 3 contributors and audited 35 packages in 1.402s
found 0 vulnerabilities
 
cs


28.

 : express 패키지 설치

1
2
3
4
5
6
7
8
9
10
11
12
$ sudo npm install -y express
npm WARN saveError ENOENT: no such file or directory, open '/home/ubuntu/nodejs/package.json'
npm WARN enoent ENOENT: no such file or directory, open '/home/ubuntu/nodejs/package.json'
npm WARN nodejs No description
npm WARN nodejs No repository field.
npm WARN nodejs No README data
npm WARN nodejs No license field.
 
+ express@4.16.4
added 45 packages from 35 contributors and audited 158 packages in 2.19s
found 0 vulnerabilities
 
cs


29.

 : forever 패키지 설치

1
2
3
4
5
6
7
8
$ sudo npm install -y -g forever
/usr/bin/forever -> /usr/lib/node_modules/forever/bin/forever
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/forever/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
 
+ forever@0.15.3
added 242 packages from 153 contributors in 7.009s
 
cs

* forever 패키지 같은 경우 설치 시 -g 옵션을 주어 전역 모드로 설치를 진행해야 함


30.

 : Windows에서 Ubuntu로 파일 전송을 위한 WinSCP 설치 필요 시 하기 링크를 클릭

 : WinSCP 설치


31.

 : WinSCP 실행 후 접속하려고 하는 AWS Ubuntu 서버의 정보 기입 후 고급 버튼 클릭

 : AWS Ubuntu 퍼블릭 DNS > 호스트 이름

 : 사용자 이름 > ubuntu


32.

 : 이전의 과정에서 기입 후 고급 버튼 클릭 시 다음과 같은 창이 출력

 : SSH > 인증 > 개인키 파일, 이전 과정에서 pem -> ppk 변환한 파일의 경로를 지정 후 확인


33.

 : 예 버튼을 클릭 후 접속


34.

 : 좌측은 로컬 Windows, 우측은 클라우드 Ubuntu

* app.js 업로드 시 해당 파일에 database 접속 정보 확인 필요


35.

 : 좌측의 해당 app.js 파일을 우클릭 하여 서버측으로 업로드 진행


36.

 : 확인 버튼 클릭


37.

 : putty 실행 후 해당 AWS Ubuntu 서버 접속 정보 기입

 : ubuntu@퍼블릭 DNS > Host Name


38.

 : SSH > Auth > 개인키 파일, 이전 과정에서 pem -> ppk 변환한 파일의 경로를 지정 후 Open 버튼 클릭


39.


40.

 : 업로드한 node.js 작업 디렉터리로 이동

1
2
$ cd nodejs/
 
cs


41.

 : node 명령어로 app.js 실행

1
2
3
4
5
$ sudo forever start -o output.log -e error.log app.js
warn:    --minUptime not set. Defaulting to: 1000ms
warn:    --spinSleepTime not set. Your script will exit if it does not stay up for at least 1000ms
info:    Forever processing file: app.js
 
cs


42.

 : AWS EC2 Ubuntu에 app.js의 서비스 주소로 요청 시 해당 RDS의 MySQL DB에서 데이터 조회 후 출력

* 위와 같이 DB 생성 및 데이터가 있음에도 불구하고 제대로 된 데이터를 출력하지 못한다면 아래와 같은 경우를 고려해야 함

 : EC2 Ubuntu 인스턴스의 인바운드 규칙

 : EC2 Ubuntu 내의 app.js 서비스 상태 및 포트

 : RDS MySQL 인스턴스의 인바운드 규칙



저작자표시

'Cloud > Amazon Web Services' 카테고리의 다른 글

S3 버킷을 통해 정적 웹 사이트 호스팅 구성 및 Vue.js Web App 배포  (0) 2018.10.20
클라우드, S3를 사용한 정적 웹 페이지 구성  (0) 2018.10.14
클라우드, RDS를 사용한 데이터베이스 구성  (0) 2018.10.14
로컬, RDS를 사용한 데이터베이스 구성  (0) 2018.10.13
로컬, EC2를 사용한 동적 웹 페이지 구성  (0) 2018.10.13


1.


2.


3.

 : 데이터베이스 생성 버튼 클릭


4.

 : MySQL 클릭, 하단의 "RDS 프리 티어에 적용되는 옵션만 사용" 체크 박스를 체크 후 다음 단계 버튼 클릭


5.

 : 별도의 지정 사항이 없을 경우 설정 사항의 DB 인스턴스 식별자, 마스터 사용자 이름, 마스터 암호 입력 후 다음 단계 버튼 클릭

* 마스터 사용자 이름 및 마스터 암호는 초기 접속 시 사용되므로 잘 기억해두어야 함!!


6.

 : 데이터베이스 옵션의 데이터베이스 이름 입력 후 데이터베이스 생성 버튼 클릭

 : 테스트 용도로 사용 후 삭제할 것이기 때문에 하단의 삭제 방지 활성화 체크 박스는 해제해도 무관


7.

 : 하기의 정보 확인 후 DB 인스턴스 세부 정보 보기 버튼 클릭


8.

 : 외부 접속을 하기 위해 MySQL Server 혹은 MySQL Workbench 설치 필요 시 하기의 링크 클릭

 > MySQL Workbench 설치

 > MySQL Server 설치


9.

 : MySQL 인스턴스 생성 중


10.

 : 인스턴스 생성 완료 후, 하기 이미지와 일부 상이할 수 있음

 : 하기 인스턴스 목록 중 해당 인스턴스를 클릭


11.

 : 세부 정보에서 보안 그룹 클릭


12.

 : 보안 그룹 목록 중에 해당 보안 그룹의 빈 곳에 우클릭


13.

 : 인바운드 규칙 편집 클릭


14.

 : 변경 전


 : 변경 후

* 위치 무관 혹은 해당 EC2 Ubuntu의 IP Addr을 기입 후 저장 버튼 클릭


15.

 : 엔드포인트 주소를 복사 혹은 확인


16.

 : Workbench 실행


17.

 : 복사한 엔드포인트 주소를 Hostname 란에 붙여넣기

 : MySQL 인스턴스 생성 시 작성한 마스터 사용자 이름을 Username에 입력 후 "Test Connection" 버튼 클릭

 : 위 과정이 이상 없이 진행된 경우 OK 버튼 클릭하여 접속


18.



19.

 : 데이터베이스 생성

1
2
create database mydb;
 
cs

* MySQL 인스턴스 생성 시 DB 생성도 같이 진행하므로 이미 생성되어 있다면 생략 가능


20.

 : 문자 집합 및 정렬 설정 변경

1
2
ALTER DATABASE mydb DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;
 
cs


21.

 : 사용할 데이터베이스 선택

1
2
use mydb;
 
cs


22.

 : 테이블 생성

1
2
3
4
5
6
7
create table todos (
    id int auto_increment primary key,
    title varchar(100),
    isDone boolean,
    createdDate datetime default now()
);
 
cs


23.

 : 샘플 데이터 2건 삽입

1
2
3
insert into todos(title, isDone) values('Hit the gym', false);
insert into todos(title, isDone) values('Pay bills', true);
 
cs


24.

 : 테이블 조회

1
2
select * from todos;
 
cs


  : 조회 결과



저작자표시

'Cloud > Amazon Web Services' 카테고리의 다른 글

클라우드, S3를 사용한 정적 웹 페이지 구성  (0) 2018.10.14
클라우드, EC2를 사용한 동적 웹 페이지 구성  (0) 2018.10.14
로컬, RDS를 사용한 데이터베이스 구성  (0) 2018.10.13
로컬, EC2를 사용한 동적 웹 페이지 구성  (0) 2018.10.13
로컬, S3를 사용한 정적 웹 페이지 구성  (0) 2018.10.13


1.


2.

 : mysql 설치 필요 시 하기의 링크를 클릭

 : mysql 설치


3.

 : mysql 실행 후 MySQL Connections 옆에 + 기호 클릭


4.

 : 다음과 같이 해당 DB 접속 정보를 기입 후 Test Connection 버튼 클릭


5.


6.


7.

 : Test Connection 확인 후 OK 버튼 클릭


8.

 : 다음과 같이 새롭게 생성된 MySQL Connections mysql_mydb를 클릭하여 접속


9.

 : 데이터베이스 생성

1
2
create database mydb;
 
cs


10.

 : 문자 집합 및 정렬 설정 변경

1
2
ALTER DATABASE mydb DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;
 
cs


11.

 : 사용할 데이터베이스 선택

1
2
use mydb;
 
cs


12.

 : 테이블 생성

1
2
3
4
5
6
7
create table todos (
    id int auto_increment primary key,
    title varchar(100),
    isDone boolean,
    createdDate datetime default now()
);
 
cs


13.

 : 샘플 데이터 2건 삽입

1
2
3
insert into todos(title, isDone) values('Hit the gym', false);
insert into todos(title, isDone) values('Pay bills', true);
 
cs


14.

 : 테이블 조회

1
2
select * from todos;
 
cs


  : 조회 결과



저작자표시

'Cloud > Amazon Web Services' 카테고리의 다른 글

클라우드, EC2를 사용한 동적 웹 페이지 구성  (0) 2018.10.14
클라우드, RDS를 사용한 데이터베이스 구성  (0) 2018.10.14
로컬, EC2를 사용한 동적 웹 페이지 구성  (0) 2018.10.13
로컬, S3를 사용한 정적 웹 페이지 구성  (0) 2018.10.13
S3, EC2, RDS를 사용한 정적 및 동적 웹 페이지 구성  (0) 2018.10.13


1.


Ubuntu 환경 구축
2.

 : ubuntu 18.04

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$ grep -r . /etc/*-release
/etc/lsb-release:DISTRIB_ID=Ubuntu
/etc/lsb-release:DISTRIB_RELEASE=16.04
/etc/lsb-release:DISTRIB_CODENAME=xenial
/etc/lsb-release:DISTRIB_DESCRIPTION="Ubuntu 16.04.4 LTS"
/etc/os-release:NAME="Ubuntu"
/etc/os-release:VERSION="16.04.4 LTS (Xenial Xerus)"
/etc/os-release:ID=ubuntu
/etc/os-release:ID_LIKE=debian
/etc/os-release:PRETTY_NAME="Ubuntu 16.04.4 LTS"
/etc/os-release:VERSION_ID="16.04"
/etc/os-release:HOME_URL="http://www.ubuntu.com/"
/etc/os-release:SUPPORT_URL="http://help.ubuntu.com/"
/etc/os-release:BUG_REPORT_URL="http://bugs.launchpad.net/ubuntu/"
/etc/os-release:VERSION_CODENAME=xenial
/etc/os-release:UBUNTU_CODENAME=xenial
 
cs

* 해당 버전은 16.04이나 실습 진행에 있어서 별 다른 문제가 없으므로 다음과 같이 진행함.

* ubuntu 16.04 설치 필요 시 하기의 링크 클릭

 : ubuntu 16.04 설치


3.

 : curl이 설치되어 있지 않은 경우 다음과 같이 curl 설치

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
$ sudo apt-get -y install curl
Reading package lists... Done
Building dependency tree
Reading state information... Done
The following additional packages will be installed:
  libcurl3-gnutls
The following NEW packages will be installed:
  curl
The following packages will be upgraded:
  libcurl3-gnutls
1 upgraded, 1 newly installed, 0 to remove and 169 not upgraded.
Need to get 323 kB of archives.
After this operation, 339 kB of additional disk space will be used.
Get:1 http://kr.archive.ubuntu.com/ubuntu xenial-updates/main amd64 libcurl3-gnutls amd64 7.47.0-1ubuntu2.9 [184 kB]
Get:2 http://kr.archive.ubuntu.com/ubuntu xenial-updates/main amd64 curl amd64 7.47.0-1ubuntu2.9 [138 kB]
Fetched 323 kB in 0s (1,365 kB/s)
(Reading database ... 198888 files and directories currently installed.)
Preparing to unpack .../libcurl3-gnutls_7.47.0-1ubuntu2.9_amd64.deb ...
Unpacking libcurl3-gnutls:amd64 (7.47.0-1ubuntu2.9) over (7.47.0-1ubuntu2.8) ...
Selecting previously unselected package curl.
Preparing to unpack .../curl_7.47.0-1ubuntu2.9_amd64.deb ...
Unpacking curl (7.47.0-1ubuntu2.9) ...
Processing triggers for libc-bin (2.23-0ubuntu10) ...
Processing triggers for man-db (2.7.5-1) ...
Setting up libcurl3-gnutls:amd64 (7.47.0-1ubuntu2.9) ...
Setting up curl (7.47.0-1ubuntu2.9) ...
Processing triggers for libc-bin (2.23-0ubuntu10) ...
 
cs


4.

 : nodejs 설치

 4-1.

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
$ curl -sL https://deb.nodesource.com/setup_10.x | sudo -E bash -
 
## Installing the NodeSource Node.js 10.x repo...
 
 
## Populating apt-get cache...
 
+ apt-get update
Hit:1 http://kr.archive.ubuntu.com/ubuntu xenial InRelease
Hit:2 http://kr.archive.ubuntu.com/ubuntu xenial-updates InRelease
Hit:3 http://kr.archive.ubuntu.com/ubuntu xenial-backports InRelease
Get:4 http://security.ubuntu.com/ubuntu xenial-security InRelease [107 kB]
Fetched 107 kB in 1s (56.9 kB/s)
Reading package lists... Done
 
## Confirming "xenial" is supported...
 
+ curl -sLf -o /dev/null 'https://deb.nodesource.com/node_10.x/dists/xenial/Release'
 
## Adding the NodeSource signing key to your keyring...
 
+ curl -s https://deb.nodesource.com/gpgkey/nodesource.gpg.key | apt-key add -
OK
 
## Creating apt sources list file for the NodeSource Node.js 10.x repo...
 
+ echo 'deb https://deb.nodesource.com/node_10.x xenial main' > /etc/apt/sources.list.d/nodesource.list
+ echo 'deb-src https://deb.nodesource.com/node_10.x xenial main' >> /etc/apt/sources.list.d/nodesource.list
 
## Running `apt-get update` for you...
 
+ apt-get update
Get:1 https://deb.nodesource.com/node_10.x xenial InRelease [4,611 B]
Hit:2 http://kr.archive.ubuntu.com/ubuntu xenial InRelease
Hit:3 http://kr.archive.ubuntu.com/ubuntu xenial-updates InRelease
Hit:4 http://kr.archive.ubuntu.com/ubuntu xenial-backports InRelease
Get:5 https://deb.nodesource.com/node_10.x xenial/main amd64 Packages [768 B]
Get:6 http://security.ubuntu.com/ubuntu xenial-security InRelease [107 kB]
Fetched 112 kB in 1s (63.8 kB/s)
Reading package lists... Done
 
## Run `sudo apt-get install -y nodejs` to install Node.js 10.x and npm
## You may also need development tools to build native addons:
     sudo apt-get install gcc g++ make
## To install the Yarn package manager, run:
     curl -sL https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
     echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
     sudo apt-get update && sudo apt-get install yarn
 
cs


 4-2.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$ sudo apt-get install -y nodejs
Reading package lists... Done
Building dependency tree
Reading state information... Done
The following package was automatically installed and is no longer required:
  libuv1
Use 'sudo apt autoremove' to remove it.
The following packages will be upgraded:
  nodejs
1 upgraded, 0 newly installed, 0 to remove and 169 not upgraded.
Need to get 15.0 MB of archives.
After this operation, 58.4 MB of additional disk space will be used.
Get:1 https://deb.nodesource.com/node_10.x xenial/main amd64 nodejs amd64 10.12.0-1nodesource1 [15.0 MB]
Fetched 15.0 MB in 4s (3,091 kB/s)
(Reading database ... 198957 files and directories currently installed.)
Preparing to unpack .../nodejs_10.12.0-1nodesource1_amd64.deb ...
Unpacking nodejs (10.12.0-1nodesource1) over (4.2.6~dfsg-1ubuntu4.2) ...
Processing triggers for man-db (2.7.5-1) ...
Processing triggers for doc-base (0.10.7) ...
Processing 1 removed doc-base file...
Setting up nodejs (10.12.0-1nodesource1) ...
 
cs

5.

 : node 설치 확인

1
2
3
$ node -v
v10.12.0
 
cs


6.

 : node.js 관련 작업 디렉터리 생성

1
2
$ mkdir nodejs
 
cs

7.

1
2
$ cd nodejs
 
cs


8.

 : 관련 패키지 설치를 진행하기 전에 다음과 같이 업데이트 먼저 진행하는 것을 추천

1
2
$ sudo npm update
 
cs


9.

 : mysql 패키지 설치

1
2
3
4
5
6
7
8
9
10
11
12
13
$ sudo npm install -y mysql
npm WARN saveError ENOENT: no such file or directory, open '/home/rabbit/nodejs/package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open '/home/rabbit/nodejs/package.json'
npm WARN nodejs No description
npm WARN nodejs No repository field.
npm WARN nodejs No README data
npm WARN nodejs No license field.
 
+ mysql@2.16.0
added 11 packages from 15 contributors and audited 13 packages in 1.339s
found 0 vulnerabilities
 
cs


10.

 : cors 패키지 설치

1
2
3
4
5
6
7
8
9
10
11
12
$ sudo npm install -y cors
npm WARN saveError ENOENT: no such file or directory, open '/home/rabbit/nodejs/package.json'
npm WARN enoent ENOENT: no such file or directory, open '/home/rabbit/nodejs/package.json'
npm WARN nodejs No description
npm WARN nodejs No repository field.
npm WARN nodejs No README data
npm WARN nodejs No license field.
 
+ cors@2.8.4
added 3 packages from 3 contributors and audited 35 packages in 1.65s
found 0 vulnerabilities
 
cs


11.

 : express 패키지 설치

1
2
3
4
5
6
7
8
9
10
11
12
$ sudo npm install -y express
npm WARN saveError ENOENT: no such file or directory, open '/home/rabbit/nodejs/package.json'
npm WARN enoent ENOENT: no such file or directory, open '/home/rabbit/nodejs/package.json'
npm WARN nodejs No description
npm WARN nodejs No repository field.
npm WARN nodejs No README data
npm WARN nodejs No license field.
 
+ express@4.16.4
added 45 packages from 35 contributors and audited 158 packages in 2.795s
found 0 vulnerabilities
 
cs


12.

 : forever 패키지 설치

1
2
3
4
5
6
7
8
$ sudo npm install -y -g forever
/usr/bin/forever -> /usr/lib/node_modules/forever/bin/forever
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/forever/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
 
+ forever@0.15.3
added 242 packages from 153 contributors in 4.961s
 
cs

* forever 패키지 같은 경우 설치 시 -g 옵션을 주어 전역 모드로 설치를 진행해야 함


Windows 환경 구축

13.

 : Windows에서 node.js 설치 필요 시 하기의 링크 클릭

 : node.js 설치


13.

 : Windows에서 Ubuntu로 파일 전송을 위한 WinSCP 설치 필요 시 하기 링크를 클릭

 : WinSCP 설치


14.

 : node.js 관련 작업 폴더 생성


15.

 : node.js 관련 작업 폴더 내의 빈 곳에서 Shift + 우클릭 후 "여기에 PowerShell 창 열기" 탭 클릭


16.

 : cors 패키지 설치

1
2
3
4
5
6
7
8
9
10
11
12
13
PS C:\Users\Admin\Downloads\nodejs> npm install -y cors
npm WARN saveError ENOENT: no such file or directory, open 'C:\Users\Admin\package.json'
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN enoent ENOENT: no such file or directory, open 'C:\Users\Admin\package.json'
npm WARN Admin No description
npm WARN Admin No repository field.
npm WARN Admin No README data
npm WARN Admin No license field.
 
+ cors@2.8.4
added 3 packages from 3 contributors and audited 18 packages in 1.891s
found 0 vulnerabilities
 
cs


17.

 : express 패키지 설치

1
2
3
4
5
6
7
8
9
10
11
12
PS C:\Users\Admin\Downloads\nodejs> npm install -y express
npm WARN saveError ENOENT: no such file or directory, open 'C:\Users\Admin\package.json'
npm WARN enoent ENOENT: no such file or directory, open 'C:\Users\Admin\package.json'
npm WARN Admin No description
npm WARN Admin No repository field.
npm WARN Admin No README data
npm WARN Admin No license field.
 
+ express@4.16.4
added 47 packages from 36 contributors and audited 141 packages in 2.884s
found 0 vulnerabilities
 
cs


18.

 : mysql 패키지 설치

1
2
3
4
5
6
7
8
9
10
11
12
PS C:\Users\Admin\Downloads\nodejs> npm install -y mysql
npm WARN saveError ENOENT: no such file or directory, open 'C:\Users\Admin\package.json'
npm WARN enoent ENOENT: no such file or directory, open 'C:\Users\Admin\package.json'
npm WARN Admin No description
npm WARN Admin No repository field.
npm WARN Admin No README data
npm WARN Admin No license field.
 
+ mysql@2.16.0
added 9 packages from 14 contributors and audited 305 packages in 3.747s
found 0 vulnerabilities
 
cs


19.

 : Visual Studio Code 혹은 node.js 개발이 가능한 IDE 툴을 실행


20.

 : 확장 버튼 혹은 Ctrl + Shift + X 버튼을 눌러 node 검색 후 Node.js Extension Pack 설치

 : 설치 후 Reload to Activate 버튼 클릭


21.

 : 코드 작성

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
const cors = require('cors');
const express = require('express');
const mysql = require('mysql');
 
var app = express();
app.listen('8080');
app.use(cors());
app.use(express.json());
 
var con = mysql.createConnection({
 
  host: "____________________________________________________________",
  user: "_____",
  password: "___________",
  port: '____',
  database: "____"
 
});
 
app.get('/todos', function (req, res) {
  console.log("GET: /todos");
 
  con.query("SELECT * FROM todos", function (err, result) {
    if (err) res.send(err);
 
    res.json(result);
    res.end();
  });
});
 
app.post('/todos', function (req, res) {
  console.log("POST: /todos");
  console.log(req.body);
 
  var sql = `INSERT INTO todos(title, isDone) VALUES ('${req.body.title}', ${req.body.isDone})`;
  con.query(sql, function (err, result) {
    if (err) res.send(err);
 
    res.json(result.insertId);
    res.end();
  });
});
 
app.put('/todos', function (req, res) {
  console.log("PUT: /todos");
  console.log(req.body);
 
  var sql = `UPDATE todos SET isDone = ${req.body.isDone} WHERE id = ${req.body.id}`;
  con.query(sql, function (err, result) {
    if (err) res.send(err);
 
    res.json(result);
    res.end();
  });
});
 
app.delete('/todos', function (req, res) {
  console.log("DELETE: /todos");
  console.log(req.body);
 
  var sql = `DELETE FROM todos WHERE id = ${req.body.id}`;
  con.query(sql, function (err, result) {
    if (err) res.send(err);
 
    res.json(result);
    res.end();
  });
});
 
cs

* host, user, password, port, database에 해당하는 5곳은 자신의 환경에 맞는 database 정보를 기입

* 코드의 실행 및 디버깅 과정 생략!


22.

 : node.js 관련 작업 폴더 내에 app.js 파일로 저장


23.

 : node.js 관련 작업 폴더 내의 빈 곳에서 Shift + 우클릭 후 "여기에 PowerShell 창 열기" 탭 클릭


24.

 : node.js 기동 시 다음과 같이 명령어 실행

1
2
PS C:\Users\Admin\Downloads\nodejs> node .\app.js
 
cs


25.

 : 서비스 요청 시 아직 DB가 설계되어 있지 않거나 연결 상태가 정상적이지 않다면 다음과 같이 해당 오류가 발생

 : 정상적으로 연결이 되어 있는 상태에서 데이터가 있을 경우는 다음과 같음

* Windows 개발 환경에서 정상적인 동작을 확인하였다면 이후 Ubuntu 환경으로 app.js를 배포


Windows -> Ubuntu

26.

 : Ubuntu의 IP Addr 확인

1
2
3
$ ifconfig |grep "inet addr"
          inet addr:192.168.168.168  Bcast:192.168.168.168  Mask:255.255.0.0
          inet addr:127.0.0.1  Mask:255.0.0.0
cs


27.

 : WinSCP 실행 후 접속 서버의 정보 기입 후 로그인 버튼 클릭


28.

 : 정상적으로 연결될 경우 다음과 같은 창이 출력되며 예 버튼 클릭


29.

 : 좌측은 Windwos, 우측은 Ubuntu

* app.js 업로드 시 해당 파일에 database 접속 정보 확인 필요


30.

 : 좌측의 해당 app.js 파일을 우클릭 하여 서버측으로 업로드 진행


31.

 : 확인 버튼 클릭


32.

 : putty 실행 후 해당 서버 접속 정보 기입 후 Open 버튼 클릭


33.


34.

 : 해당 app.js 파일의 경로로 이동하여 목록 확인

1
2
3
4
5
6
7
8
$ ll
total 32
drwxrwxr-x  3 rabbit rabbit  4096 10월 13 22:22 ./
drwxr-xr-x 21 rabbit rabbit  4096 10월 13 21:50 ../
-rw-rw-r--  1 rabbit rabbit  1612 10월 13 20:07 app.js
drwxr-xr-x 62 root   root    4096 10월 13 16:35 node_modules/
-rw-r--r--  1 root   root   16065 10월 13 16:35 package-lock.json
 
cs


35.

 : node 명령어로 app.js 실행

1
2
3
4
5
$ sudo forever start -o output.log -e error.log app.js
warn:    --minUptime not set. Defaulting to: 1000ms
warn:    --spinSleepTime not set. Your script will exit if it does not stay up for at least 1000ms
info:    Forever processing file: app.js
 
cs

36.

 : Ubuntu에 app.js의 서비스 주소로 요청 시 Windwos의 Databases에서 해당 데이터를 조회하여 응답함

* 위와 같이 DB 생성 및 데이터가 있음에도 불구하고 제대로 된 데이터를 출력하지 못한다면 아래와 같은 경우를 고려해야 함

 : Windows 방화벽 인바운드 규칙

 : MySQL 계정 외부 접속 허용 권한

 : Ubuntu 내의 app.js 서비스 상태 및 포트



저작자표시

'Cloud > Amazon Web Services' 카테고리의 다른 글

클라우드, RDS를 사용한 데이터베이스 구성  (0) 2018.10.14
로컬, RDS를 사용한 데이터베이스 구성  (0) 2018.10.13
로컬, S3를 사용한 정적 웹 페이지 구성  (0) 2018.10.13
S3, EC2, RDS를 사용한 정적 및 동적 웹 페이지 구성  (0) 2018.10.13
RDS MySQL Remove  (0) 2018.10.01


1.


2.

 : IIS의 설치가 필요할 경우 하기 링크를 클릭 요함

 : IIS 웹 서버 설치


3.

 : Visual Studio Code 혹은 html을 작성할 수 있는 툴을 실행

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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
<!doctype html>
<html lang="ko">
 
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
    crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
 
  <title>To Do List</title>
  <style>
    input, button {
        border-radius: 0px !important;
      }
      /* 라인 기본 스타일 */
      .line {
        padding: 10px; background-color:rgb(238,238,238);
      }
      /* 라인 완료된 스타일 */
      .line.done {
        background-color:rgb(136,136,136); color:white;
      }
      .line-txt {
        vertical-align: top;
      }
      .clear {
        float: right;
      }
      i { 
        cursor: pointer;
      }
      .line-txt.done {
        text-decoration: line-through;
      }                              
  </style>
</head>
 
<body>
  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
    crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 
  <div id="app" class="container" style="width: 526px;">
    <div style="background-color: rgb(244,67,54); width:100%; padding: 20px;">
      <h3 style="color: white; text-align: center; margin-bottom:10px;">My To Do List</h3>
      <form class="form-inline" onsubmit="return false;">
        <input type='text' v-model="title" placeholder="Title..." class="form-control" style="width:400px;">
        <button class="btn" v-on:click="add" style="background-color: rgb(217, 217, 217); color:#555;">
          Add
        </button>
      </form>
    </div>
    <div id="div-todos" style="width: 100%;">
      <div class="line" v-bind:class="{ done: line.isDone }" v-for="line in lines">
        <i class="material-icons" v-on:click="change(line);">done</i>
        <span class="line-txt" v-bind:class="{ done: line.isDone }">{{line.title}}</span>
        <i class="material-icons" v-on:click="clear(line);">clear</i>
      </div>
    </div>
  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        lines: null,
        title: "",
        dataUrl: "_______________________________________________________________________"
      },
      methods: {
        add: function () {
          // title 값 검증
          if (this.title === null || this.title == "") {
            alert("내용을 입력해주세요.");
            return false;
          }
          var item = { isDone: false, title: this.title };
 
          $.ajax({
            type: 'POST',
            url: this.dataUrl,
            data: JSON.stringify(item),
            contentType: "application/json; charset=utf-8",
            success: function (data) {
              // id 값 세팅
              item.id = data;         // <- insertId
              // 한줄 추가
              this.lines.push(item);  // <- {id:6, isDone:false, title:this.title};
              // 초기화
              this.title = "";
            }.bind(this),
            dataType: "json"
          });
 
        },
        change: function (line) {
          $.ajax({
            type: 'PUT',
            url: this.dataUrl,
            data: JSON.stringify({ id: line.id, isDone: !line.isDone }),
            contentType: "application/json; charset=utf-8",
            success: function (data) {
              // 상태값 변경
              line.isDone = !line.isDone;
            }.bind(this),
            dataType: "json"
          });
        },
        clear: function (line) {
          $.ajax({
            type: 'DELETE',
            url: this.dataUrl,
            data: JSON.stringify({ id: line.id }),
            contentType: "application/json; charset=utf-8",
            success: function (data) {
              // 라인 삭제
              this.lines.splice(this.lines.indexOf(line), 1);
            }.bind(this),
            dataType: "json"
          });
        }
      },
      // vue.js 인스턴스 생성 후 시작되는 메소드
      // AJAX (Asyncronous Javascript And XML)
      created: function () {
        $.get("_______________________________________________________________________", function (data) {
          this.lines = data;
        }.bind(this));
      }
    });
</script>
</body>
 
</html>
 
cs

* dataURL을 사용하는 2곳은 해당 정적 웹 페이지가 사용자의 요청을 전달하기 위한 경로로 동적 웹 페이지가 서비스 중인 경로를 기입함


4.

 : 위의 코드 작성 후 IIS 웹 서버가 참조하는 디렉터리에 index.htm 파일로 저장

* 기존의 iisstart.htm 파일이 초기 페이지로 지정되어 있으나 index.htm의 우선순위가 높기 때문에 index.htm으로 초기 페이지가 대체됨.

* 해당 Web Site의 기본 문서에서 확인 가능


5.

 : localhost의 정적 웹 페이지 출력 여부 확인



저작자표시

'Cloud > Amazon Web Services' 카테고리의 다른 글

로컬, RDS를 사용한 데이터베이스 구성  (0) 2018.10.13
로컬, EC2를 사용한 동적 웹 페이지 구성  (0) 2018.10.13
S3, EC2, RDS를 사용한 정적 및 동적 웹 페이지 구성  (0) 2018.10.13
RDS MySQL Remove  (0) 2018.10.01
RDS MySQL  (0) 2018.09.28


1. Architecture

* 개발 과정 및 테스트 절차 생략!!!


2.

 : 로컬 개발 환경 구축 및 로컬 환경 내에 배포

 > 로컬, RDS를 사용한 데이터베이스 구성

 > 로컬, EC2를 사용한 동적 웹 페이지 구성

 > 로컬, S3를 사용한 정적 웹 페이지 구성


3.

 : 클라우드 환경 내에 배포

 > 클라우드, RDS를 사용한 데이터베이스 구성

 > 클라우드, EC2를 사용한 동적 웹 페이지 구성

 > 클라우드, S3를 사용한 정적 웹 페이지 구성


4.

 : Init Static Web


 : Init MySQL


5.

 : Create Static Web


 : Create MySQL


6.

 : Remove Static Web


 : Remove MySQL



저작자표시

'Cloud > Amazon Web Services' 카테고리의 다른 글

로컬, EC2를 사용한 동적 웹 페이지 구성  (0) 2018.10.13
로컬, S3를 사용한 정적 웹 페이지 구성  (0) 2018.10.13
RDS MySQL Remove  (0) 2018.10.01
RDS MySQL  (0) 2018.09.28
외부 접속 허용을 위한 인바운드 규칙  (0) 2018.09.27


1.

 : 데이터베이스 > RDS


2.

 : 해당 DB 인스턴스 상태 중단됨


3.


4.

 : 삭제 클릭


5.


6.

 : 수정 클릭


7.

 : 삭제 방지 활성화 체크 박스 선택 해제 후 계속 버튼 클릭


8.

 : 계속 클릭


9.


10.

 : 삭제 클릭


11.

 : 다음의 항목 작성 후 삭제 버튼 활성화 시 클릭


저작자표시

'Cloud > Amazon Web Services' 카테고리의 다른 글

로컬, S3를 사용한 정적 웹 페이지 구성  (0) 2018.10.13
S3, EC2, RDS를 사용한 정적 및 동적 웹 페이지 구성  (0) 2018.10.13
RDS MySQL  (0) 2018.09.28
외부 접속 허용을 위한 인바운드 규칙  (0) 2018.09.27
탄력적 IP 주소와 인스턴스 또는 기본 네트워크 인터페이스와 연결  (0) 2018.09.27

+ Recent posts

티스토리툴바