* Windows 10 Pro
1.
: https://nodejs.org/ko/
: 10.12.0 현재 버전 클릭
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
: 환경 변수(N)... 버튼 클릭
12.
: 시스템 변수(S) > Path > 편집(I)...
13.
: 환경 변수 등록 여부 확인
14.
15.
| node.js 시작하기 (0) | 2018.06.18 |
|---|---|
| node-v7.4.0-x64 설치 및 환경 구축 (0) | 2017.01.24 |
1.
2.
: 스토리지 > S3 클릭
3.
: 버킷 만들기 버튼 클릭
4.
: 버킷 이름 기입 후 다음 버튼 클릭
5.
: 특별한 설정 사항이 없다면 그대로 다음 버튼 클릭
6.
: 퍼블릭 권한 관리에서 "이 버킷에 퍼블릭 읽기 액세스 권한을 부여함"을 선택 후 다음 버튼 클릭
7.
: 검토 후 이상 없을 시 버킷 만들기 버튼 클릭
8.
: 버킷 목록 중 해당 버킷을 클릭
9.
: 상단에 속성 탭 클릭
10.
: 정적 웹 사이트 호스팅 클릭
11.
: 인덱스 문서를 기입 후 저장
: 엔드포인트의 경로는 접속 시 필요하기 때문에 따로 기억해놓아야 함!!
12.
: 개요 탭을 클릭 후 바로 밑에 업로드 버튼 클릭
13.
: 파일 추가 버튼을 클릭 후 index.htm이 위치한 경로를 지정
14.
: 다음 버튼 클릭
15.
: 퍼블릭 권한 관리에서 "이 객체에 퍼블릭 읽기 액세스 권한을 부여함" 선택 후 다음 버튼 클릭
16.
: 특별한 설정 사항이 없다면 확인 후 다음 버튼 클릭
17.
: 내용 검토 후 업로드 버튼 클릭
18.
19.
| 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.
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 설치 필요 시 하기 링크를 클릭
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 인스턴스의 인바운드 규칙
| 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 설치 필요 시 하기의 링크 클릭
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 |
: 조회 결과
| 클라우드, 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 |
: 조회 결과
| 클라우드, 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 설치 필요 시 하기의 링크 클릭
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 설치 필요 시 하기의 링크 클릭
13.
: Windows에서 Ubuntu로 파일 전송을 위한 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 서비스 상태 및 포트
| 클라우드, 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.
: https://nodejs.org/ko/download/
2.
3.
4.
5.
6.
7.
8.
9.
: 환경 변수 설정
9-1.
9-2.
: 환경 변수(N)... 버튼 클릭
9-3.
: 새로 만들기(W)... 버튼 클릭
9-4.
: 새로 만들기(N) 버튼 클릭
* 설치 경로 확인
9-5.
: 확인 버튼 클릭
10.
11.
1 2 3 4 5 6 | Microsoft Windows [Version 10.0.17134.285] (c) 2018 Microsoft Corporation. All rights reserved. C:\Users\Admin>node -v v8.12.0 | cs |
| Windows 10에서 WinSCP 설치 (0) | 2018.10.13 |
|---|---|
| Windows 10 Pro에서 IIS 추가 (0) | 2018.10.13 |
| 포트 사용 여부 확인 (0) | 2018.07.25 |
| iSCSI Client 연결 (0) | 2018.03.22 |
| 윈도우 10 시작 시 프로그램 자동 실행 지정하기 (0) | 2018.01.19 |
1.
: https://winscp.net/eng/download.php
: "DOWNLOAD WINSCP 5.13.4 (9.7 MB)" 버튼 클릭
2.
3.
4.
5.
6.
7.
8.
| Windows 10에서 node.js 설치 (0) | 2018.10.13 |
|---|---|
| Windows 10 Pro에서 IIS 추가 (0) | 2018.10.13 |
| 포트 사용 여부 확인 (0) | 2018.07.25 |
| iSCSI Client 연결 (0) | 2018.03.22 |
| 윈도우 10 시작 시 프로그램 자동 실행 지정하기 (0) | 2018.01.19 |
1.
2.
: 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의 정적 웹 페이지 출력 여부 확인
| 로컬, 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.
2.
: Windows 기능 켜기/끄기 클릭
3.
: 인터넷 정보 서비스 체크 박스 클릭
4.
5.
6.
7.
* 우측 상단의 탐색 버튼을 클릭하여 해당 디렉터리 확인 가능
8.
9.
: 해당 디렉터리
| Windows 10에서 node.js 설치 (0) | 2018.10.13 |
|---|---|
| Windows 10에서 WinSCP 설치 (0) | 2018.10.13 |
| 포트 사용 여부 확인 (0) | 2018.07.25 |
| iSCSI Client 연결 (0) | 2018.03.22 |
| 윈도우 10 시작 시 프로그램 자동 실행 지정하기 (0) | 2018.01.19 |