'Cloud' 카테고리의 글 목록

Serverless, S3를 사용한 정적 웹 페이지 구성 (0)	2018.10.21
Serverless, Lambda와 API Gateway를 사용한 동적 웹 페이지 구성 (0)	2018.10.21
Serverless, RDS를 사용한 MySQL 데이터베이스 구성 (0)	2018.10.21
AWS IAM 기존에 생성한 그룹의 정책 편집 (0)	2018.10.21
Vue.js Web App 생성 및 S3 배포 (2)	2018.10.20

Serverless, S3를 사용한 정적 웹 페이지 구성

2018. 10. 21. 21:06

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

: Node.js 설치 및 환경 구축

: Vue CLI 설치

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
C:\Users\Admin>npm install -g @vue/cli
C:\Users\Admin\AppData\Roaming\npm\vue -> C:\Users\Admin\AppData\Roaming\npm\node_modules\@vue\cli\bin\vue.js
 
> protobufjs@6.8.8 postinstall C:\Users\Admin\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\protobufjs
> node scripts/postinstall
 
 
> nodemon@1.18.4 postinstall C:\Users\Admin\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\nodemon
> node bin/postinstall || exit 0
 
Love nodemon? You can now support the project via the open collective:
 > https://opencollective.com/nodemon/donate
 
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\@vue\cli\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
 
+ @vue/cli@3.0.5
added 631 packages from 446 contributors in 40.015s
 
Colored by Color Scripter
cs

:작업할 폴더의 경로로 이동, 여기서는 c:\workspace\vue 로 지정

1
2
3
4
C:\Users\Admin>cd c:\workspace\vue
 
c:\workspace\vue>
 
Colored by Color Scripter
cs

: 작업할 myapp 프로젝트를 생성하기 위해 다음과 같이 vue cli 명령어 실행

1
2
c:\workspace\vue>vue create myapp
 
Colored by Color Scripter
cs

: 다음과 같이 선택 가능한 보기가 출력되며, 여기서는 "Manually select features"를 선택

1
2
3
4
5
Vue CLI v3.0.5
? Please pick a preset: (Use arrow keys)
  default (babel, eslint)
> Manually select features
 
Colored by Color Scripter
cs

: 기존에 선택된 Babel과 Linter / Formatter를 그대로 두고 추가로 스페이스 바 키를 눌러 Router 눌러 체크 후 엔터 키로 다음으로 진행

1
2
3
4
5
6
7
8
9
10
11
12
13
Vue CLI v3.0.5
? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
>(*) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing
 
Colored by Color Scripter
cs

: 히스토리 모드를 사용할 것인지를 묻는데 여기서는 n을 입력

1
2
3
4
5
Vue CLI v3.0.5
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n
 
Colored by Color Scripter
cs

* Y 대문자는 디폴트 값을 의미

10.

: 초기값 그대로 ESLint with error prevention only를 선택 후 엔터

1
2
3
4
5
6
7
8
9
10
Vue CLI v3.0.5
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier
 
Colored by Color Scripter
cs

11.

: 초기값 그대로 엔터 키를 눌러 다음으로 진행

1
2
3
4
5
6
7
8
9
Vue CLI v3.0.5
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit
 
Colored by Color Scripter
cs

12.

: 초기값 그대로 엔터 키를 눌러 다음으로 진행

1
2
3
4
5
6
7
8
9
10
Vue CLI v3.0.5
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json
 
Colored by Color Scripter
cs

13.

: 이후 프로젝트도 같은 설정 값을 적용하여 진행할 것인지를 묻는데 여기서는 초기값 N을 입력 후 마무리

1
2
3
4
5
6
7
8
9
Vue CLI v3.0.5
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) N
 
Colored by Color Scripter
cs

14.

: 다음 URL을 통해 설치 진행할 것인지를 묻는데 어느 것을 선택해도 무관하므로 기본값으로 입력 후 다음으로 진행

1
2
3
4
5
6
7
8
Vue CLI v3.0.5
✨  Creating project in c:\workspace\vue\myapp.
🗃  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...
 
?  Your connection to the default npm registry seems to be slow.
   Use https://registry.npm.taobao.org for faster installation? (Y/n) Y
 
Colored by Color Scripter
cs

15.

: 다음과 같이 설치가 완료되면 선택한 설정값과 더불어 설치를 진행한 정보가 포함되어 출력됨

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
c:\workspace\vue>vue create myapp
 
 
Vue CLI v3.0.5
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
 
 
Vue CLI v3.0.5
✨  Creating project in c:\workspace\vue\myapp.
🗃  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...
 
 
> yorkie@2.0.0 install c:\workspace\vue\myapp\node_modules\yorkie
> node bin/install.js
 
setting up Git hooks
done
 
added 1273 packages from 742 contributors in 33.648s
🚀  Invoking generators...
📦  Installing additional dependencies...
 
added 4 packages from 1 contributor in 10.284s
⚓  Running completion hooks...
 
📄  Generating README.md...
 
🎉  Successfully created project myapp.
👉  Get started with the following commands:
 
 $ cd myapp
 $ npm run serve
 
 WARN  Skipped git commit due to missing username and email in git config.
You will need to perform the initial commit yourself.
 
 
c:\workspace\vue>
 
Colored by Color Scripter
cs

* 위와 같이 설치가 정상적으로 끝나지 않고 진행 중 에러가 발생했을 시 점검 사항

> 관리자 모드로 실행하였는지 확인 필요

* 진행 중 에러가 발생했다면 생성된 myapp 폴더를 삭제 후 위의 과정을 다시 진행할 것을 권장

16.

: 생성한 프로젝트 폴더로 이동

1
2
3
4
c:\workspace\vue>cd myapp
 
c:\workspace\vue\myapp>
 
cs

17.

: 해당 프로젝트를 노드 패키지 관리자를 통해서 기동

1
2
c:\workspace\vue\myapp>npm run serve
 
Colored by Color Scripter
cs

18.

: 정상적으로 기동이 되었다면 다음과 같이 클라이언트 접속 정보를 확인할 수 있음

1
2
3
4
5
6
7
8
9
 DONE  Compiled successfully in 5273ms                                                                          17:12:51
 
  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.168.111:8080/
 
  Note that the development build is not optimized.
  To create a production build, run npm run build.
 
Colored by Color Scripter
cs

19.

: 클라이언트 접속 정보를 통해 다음과 같이 초기 화면 확인 가능

20.

: 정상적인 기동을 확인 후 서비스 중지, Ctrl + C 키를 입력

1
2
3
4
5
6
7
8
9
10
11
12
13
 DONE  Compiled successfully in 3218ms                                                                          17:54:03
 
  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.254.1:8080/
 
  Note that the development build is not optimized.
  To create a production build, run npm run build.
 
일괄 작업을 끝내시겠습니까 (Y/N)? Y
 
c:\workspace\vue\myapp>
 
Colored by Color Scripter
cs

21.

: 노드 패키지 매니저를 통해 jquery 패키지를 설치

1
2
3
4
5
6
7
8
9
10
11
12
c:\workspace\vue\myapp>npm install jquery
npm WARN babel-loader@8.0.4 requires a peer of @babel/core@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
 
+ jquery@3.3.1
added 1 package from 1 contributor and audited 14144 packages in 10.307s
found 0 vulnerabilities
 
 
c:\workspace\vue\myapp>
 
Colored by Color Scripter
cs

* 전역 설치가 아니므로 해당 프로젝트 내에 있는지 설치 전에 확인 필요

22.

: 노드 패키지 매니저를 통해 popper.js 패키지를 설치

1
2
3
4
5
6
7
8
9
10
11
12
c:\workspace\vue\myapp>npm install popper.js
npm WARN babel-loader@8.0.4 requires a peer of @babel/core@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
 
+ popper.js@1.14.4
added 1 package from 2 contributors and audited 14145 packages in 9.863s
found 0 vulnerabilities
 
 
c:\workspace\vue\myapp>
 
Colored by Color Scripter
cs

23.

: 노드 패키지 매니저를 통해 jquery 패키지를 설치

1
2
3
4
5
6
7
8
9
10
11
12
c:\workspace\vue\myapp>npm install bootstrap
npm WARN babel-loader@8.0.4 requires a peer of @babel/core@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
 
+ bootstrap@4.1.3
added 1 package from 2 contributors and audited 14146 packages in 9.749s
found 0 vulnerabilities
 
 
c:\workspace\vue\myapp>
 
Colored by Color Scripter
cs

24.

: 노드 패키지 매니저를 통해 axios 패키지를 설치

1
2
3
4
5
6
7
8
9
10
11
12
c:\workspace\vue\myapp>npm install axios
npm WARN babel-loader@8.0.4 requires a peer of @babel/core@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
 
+ axios@0.18.0
added 1 package from 1 contributor and audited 15275 packages in 10.402s
found 0 vulnerabilities
 
 
c:\workspace\vue\myapp>
 
Colored by Color Scripter
cs

* 위의 4가지 패키지를 한번에 설치하고 싶은 경우 다음과 같은 명령어로 일괄 설치 가능

1
2
c:\workspace\vue\myapp>npm install jquery popper.js bootstrap axios
 
Colored by Color Scripter
cs

25.

: 다음 진행 시 VS Code 툴을 사용할 예정이므로 미설치 시 하기의 링크를 클릭

> VSCodeUserSetup-x64-1.28.2 설치

: VS Code 설치 후 확장 팩 설치 필요 시 하기의 링크를 클릭

> VS Code Pack 설치

26.

: VS Code 내에서 myapp 폴더 열기 실행

27.

: /public/index.html 파일 열기

28.

: 하기의 URL에서 Material의 CDN 확인 가능

> https://google.github.io/material-design-icons/#getting-icons

29.

: /public/index.html 파일 내에 적절한 곳에 Material의 CSS CDN 복사 후 붙여넣기

29-1. 추가 전

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>myapp</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but myapp doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
 
Colored by Color Scripter
cs

29-2. 추가 후

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <title>myapp</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but myapp doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
 
Colored by Color Scripter
cs

30.

: /src/main.js 파일 열기

31.

: /src/main.js 파일 내에 추가 패키지 import

31-1. 추가 전

1
2
3
4
5
6
7
8
9
10
11
import Vue from 'vue'
import App from './App.vue'
import router from './router'
 
Vue.config.productionTip = false
 
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
 
Colored by Color Scripter
cs

32-2. 추가 후

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import axios from 'axios'
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.css'
 
Vue.prototype.$http = axios
Vue.config.productionTip = false
 
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
 
Colored by Color Scripter
cs

33.

: /src/views/Todo.vue 파일 생성

34.

: Todo.vue 파일 내에 다음과 같이 코드 작성

: _로 표기된 dataUrl 부분은 자신의 API 게이트웨이 엔드포인트를 작성 후 저장할 것

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
<template>
<div 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' placeholder="Title..." class="form-control" style="width:397px;" v-model="title">
      <button class="btn" style="background-color: rgb(217, 217, 217); color:#555;" v-on:click="add">
        Add
      </button>          
    </form>
  </div>
  <div style="width: 100%; text-align:left;">
    <div class="line" v-bind:class="{ done: line.isDone }" v-for="line in lines" v-bind:key="line.id">
      <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 clear" v-on:click="clear(line);">clear</i>
    </div>        
  </div>
</div>
</template>
 
<script>
export default {
  data: function() {
    return {
      dataUrl: "https://ikvyjq185m.execute-api.ap-northeast-2.amazonaws.com/v1/todo",
      lines: [],
      title: ""
    }
  },
  methods: {
    add: function () {
      let data = {title:this.title, isDone:false};
      this.$http.post(this.dataUrl, data).then((res)=>{
        data.id = res.data.insertedId
        this.lines.push(data);
        this.title = "";
      })        
    },
    change: function(line) {
      let data = {id:line.id, isDone:!line.isDone};
      this.$http.put(this.dataUrl, data).then(()=>{
        line.isDone = !line.isDone;
      })        
    },
    clear: function(line) {
      this.$http.delete(this.dataUrl, {data: {id:line.id}}).then(()=>{
        this.lines.splice(this.lines.indexOf(line), 1);
      })         
    }
  },
  created: function() {
    this.$http.get(this.dataUrl).then((res)=>{
      this.lines = res.data;
    })
  }          
}
</script>
<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>
 
Colored by Color Scripter
cs

35.

: /src/router.js 파일 열기

36.

: router.js 파일 내에 다음과 같이 코드 수정 후 저장

36-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
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
 
Vue.use(Router)
 
export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    }
  ]
})
 
Colored by Color Scripter
cs

36-2. 수정 후

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
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
 
Vue.use(Router)
 
export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    },
    {
      path: '/todo',
      name: 'todo',
      component: () => import('./views/Todo.vue')
    }
  ]
})
 
Colored by Color Scripter
cs

37.

: /src/App.vue 파일 열기

38.

: App.vue 파일 내에 다음과 같이 코드 수정 후 저장

38-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
<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
#nav {
  padding: 30px;
}
#nav a {
  font-weight: bold;
  color: #2c3e50;
}
#nav a.router-link-exact-active {
  color: #42b983;
}
</style>
 
Colored by Color Scripter
cs

38-2. 수정 후

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
<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/todo">Todo</router-link>
    </div>
    <router-view/>
  </div>
</template>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
#nav {
  padding: 30px;
}
#nav a {
  font-weight: bold;
  color: #2c3e50;
}
#nav a.router-link-exact-active {
  color: #42b983;
}
</style>
 
Colored by Color Scripter
cs

39.

: CMD 창에서 해당 프로젝트를 배포 모드로 빌드, 정상적으로 완료 시 해당 빌드 정보 확인

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
c:\workspace\vue\myapp>npm run build
 
> myapp@0.1.0 build c:\workspace\vue\myapp
> vue-cli-service build
 
 
/  Building for production...
 
 WARNING  Compiled with 2 warnings                                                                              18:48:15
 
 warning
 
asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  js/chunk-vendors.ed2ca4b2.js (261 KiB)
 
 warning
 
entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  app (420 KiB)
      css/chunk-vendors.ac0ebac2.css
      js/chunk-vendors.ed2ca4b2.js
      css/app.aea4cb45.css
      js/app.7d3963e9.js
 
 
  File                                    Size              Gzipped
 
  dist\js\chunk-vendors.ed2ca4b2.js       261.01 kb         85.86 kb
  dist\js\app.7d3963e9.js                 6.96 kb           2.52 kb
  dist\js\chunk-05147150.db13258f.js      1.97 kb           0.97 kb
  dist\js\about.72f7e6cd.js               0.47 kb           0.33 kb
  dist\css\chunk-vendors.ac0ebac2.css     151.61 kb         21.38 kb
  dist\css\app.aea4cb45.css               0.42 kb           0.26 kb
  dist\css\chunk-05147150.4bf1e231.css    0.23 kb           0.17 kb
 
  Images and other types of assets omitted.
 
 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
 
 
c:\workspace\vue\myapp>
 
Colored by Color Scripter
cs

40.

: 수정 사항 반영이 되었는지 확인을 위해 로컬에서 해당 프로젝트 기동

1
2
c:\workspace\vue\myapp>npm run serve
 
Colored by Color Scripter
cs

41.

1
2
3
4
5
6
7
8
9
 DONE  Compiled successfully in 6046ms                                                                          18:52:03
 
  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.254.1:8080/
 
  Note that the development build is not optimized.
  To create a production build, run npm run build.
 
Colored by Color Scripter
cs

42.

: Home

: Todo

43.

: 위의 과정 중 정상적으로 빌드 과정을 끝마쳤다면 다음과 같이 dist 폴더 이하에 빌드된 파일 및 폴더 목록을 확인 가능

* S3 배포할 파일 및 폴더 목록

44.

: 위 과정을 정상적으로 진행하였다면 다음을 진행, Management Console 혹은 CLI 둘 중 한 가지 선택하여 진행

> AWS Management Console을 통한 S3 배포

> AWS CLI를 통한 S3 배포

45.

: Home

: Todo

저작자표시

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

AWS Serverless를 사용한 Web App 정보 시스템 구축 (0)	2018.10.21
Serverless, Lambda와 API Gateway를 사용한 동적 웹 페이지 구성 (0)	2018.10.21
Serverless, RDS를 사용한 MySQL 데이터베이스 구성 (0)	2018.10.21
AWS IAM 기존에 생성한 그룹의 정책 편집 (0)	2018.10.21
Vue.js Web App 생성 및 S3 배포 (2)	2018.10.20

Serverless, Lambda와 API Gateway를 사용한 동적 웹 페이지 구성

2018. 10. 21. 20:08

: 컴퓨팅 > Lambda 클릭

: 함수 만들기 버튼 클릭

: 함수 생성에서 새로 작성을 클릭 후 다음과 같은 예시로 작성, 작성 후 함수 생성 버튼 클릭

> 이름 -> todo

> 런타임 -> Python 3.6

> 역할 -> 1개 이상의 템플릿에서 새로운 역할을 생성합니다.

> 역할 이름 -> myRoleDefault

: 생성한 Lambda 함수 화면

: Designer에서 API 게이트웨이를 클릭하여 트리거 추가 후 추가된 API 게이트웨이 항목 클릭

: 트리거 구성에서 다음과 같은 예시로 작성 후 추가 버튼 클릭

> API -> 새 API 생성

> 보안 -> 열기

* 추가 세팅 이하가 보이지 않는다면 추가 세팅을 클릭하여 하위 목록 활성화

> 배포 단계 -> v1

: 트리거 구성 후 저장되지 않은 변경 사항이 있으므로 상단의 저장 버튼을 클릭

10.

11.

: 프로젝트를 생성할 경로로 이동, 여기서는 "c:\workspace\python"으로 지정

1
2
3
4
C:\Users\Admin>cd c:\workspace\python
 
c:\workspace\python>
 
Colored by Color Scripter
cs

12.

: 작업할 프로젝트 폴더를 생성

1
2
3
4
c:\workspace\python>mkdir todo
 
c:\workspace\python>
 
cs

13.

: 생성한 프로젝트 폴더로 이동

1
2
3
4
c:\workspace\python>cd todo
 
c:\workspace\python\todo>
 
cs

14.

: 파이썬 패키지 관리 명령어를 통해서 pymysql 패키지를 설치

: -t 옵션은 설치를 진행할 타겟을 지정한다는 의미이며, 앞에 .은 현재 경로를 의미하므로 현재 경로가 프로젝트 폴더 내에 있는지 확인 필요!!

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
c:\workspace\python\todo>pip install pymysql -t .
Collecting pymysql
  Downloading https://files.pythonhosted.org/packages/a7/7d/682c4a7da195a678047c8f1c51bb7682aaedee1dca7547883c3993ca9282/PyMySQL-0.9.2-py2.py3-none-any.whl (47kB)
    100% |████████████████████████████████| 51kB 97kB/s
Collecting cryptography (from pymysql)
  Downloading https://files.pythonhosted.org/packages/da/f6/6b9f031611697cb61d25c884237a8762725df7373a0accd49b39fbbb23cd/cryptography-2.3.1-cp37-cp37m-win32.whl (1.1MB)
    100% |████████████████████████████████| 1.1MB 462kB/s
Collecting six>=1.4.1 (from cryptography->pymysql)
  Downloading https://files.pythonhosted.org/packages/67/4b/141a581104b1f6397bfa78ac9d43d8ad29a7ca43ea90a2d863fe3056e86a/six-1.11.0-py2.py3-none-any.whl
Collecting cffi!=1.11.3,>=1.7 (from cryptography->pymysql)
  Downloading https://files.pythonhosted.org/packages/2d/9e/9d84a78d4ea3d0fa94f6d0e4bcd88406709312949f48f3853f26f8f52ebe/cffi-1.11.5-cp37-cp37m-win32.whl (154kB)
    100% |████████████████████████████████| 163kB 468kB/s
Collecting idna>=2.1 (from cryptography->pymysql)
  Using cached https://files.pythonhosted.org/packages/4b/2a/0276479a4b3caeb8a8c1af2f8e4355746a97fab05a372e4a2c6a6b876165/idna-2.7-py2.py3-none-any.whl
Collecting asn1crypto>=0.21.0 (from cryptography->pymysql)
  Downloading https://files.pythonhosted.org/packages/ea/cd/35485615f45f30a510576f1a56d1e0a7ad7bd8ab5ed7cdc600ef7cd06222/asn1crypto-0.24.0-py2.py3-none-any.whl (101kB)
    100% |████████████████████████████████| 102kB 561kB/s
Collecting pycparser (from cffi!=1.11.3,>=1.7->cryptography->pymysql)
  Downloading https://files.pythonhosted.org/packages/68/9e/49196946aee219aead1290e00d1e7fdeab8567783e83e1b9ab5585e6206a/pycparser-2.19.tar.gz (158kB)
    100% |████████████████████████████████| 163kB 482kB/s
Installing collected packages: six, pycparser, cffi, idna, asn1crypto, cryptography, pymysql
  Running setup.py install for pycparser ... done
Successfully installed asn1crypto-0.24.0 cffi-1.11.5 cryptography-2.3.1 idna-2.7 pycparser-2.19 pymysql-0.9.2 six-1.11.0
You are using pip version 10.0.1, however version 18.1 is available.
You should consider upgrading via the 'python -m pip install --upgrade pip' command.
 
c:\workspace\python\todo>
 
Colored by Color Scripter
cs

15.

: 생성한 프로젝트 폴더 내에서 todo.py 파일 생성

1
2
3
4
c:\workspace\python\todo>type NUL > todo.py
 
c:\workspace\python\todo>
 
Colored by Color Scripter
cs

16.

: 다음 진행 시 VS Code 툴을 사용할 예정이므로 미설치 시 하기의 링크를 클릭

> VSCodeUserSetup-x64-1.28.2 설치

: VS Code 설치 후 확장 팩 설치 필요 시 하기의 링크를 클릭하여 참고 후 적절한 팩을 설치

> VS Code Pack 설치

17.

: VS Code 실행

18.

: 생성한 todo.py 파일 열기

19.

: todo.py 파일 내에 다음과 같이 코드 작성

* pymysql.connect 부분은 자신의 환경에 맞는 데이터베이스 정보를 기입, 여기서는 _로 표현

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
import json
import pymysql
 
connection = pymysql.connect(host='____________________________________________________',
                         user='_____',
                         password='___________',
                         db='____',
                         charset='utf8mb4',
                         cursorclass=pymysql.cursors.DictCursor)       
 
def todo_handler(event, context):
    
    result = None    
    method = event["httpMethod"]
    
    body = json.loads(event["body"]) if event["body"] else {} 
    
    try:
        if method == "GET" :
            with connection.cursor() as cursor:
                sql = "SELECT id, title, isDone FROM todos"
                cursor.execute(sql)
                result = cursor.fetchall()
        
        elif method == "POST" :
            with connection.cursor() as cursor:
                sql = "INSERT INTO todos(title, isDone) VALUES(%s, %s)"
                cursor.execute(sql, (body["title"], bool(body["isDone"])))
                result = {"rowcount":cursor.rowcount, "insertedId":cursor.lastrowid}
                
            connection.commit()
        
        elif method == "PUT" :
            with connection.cursor() as cursor:
                sql = "UPDATE todos SET isDone = %s WHERE id = %s"
                cursor.execute(sql, (bool(body["isDone"]), int(body["id"])))
                result = {"rowcount":cursor.rowcount}
                
            connection.commit()
            
        elif method == "DELETE" :
            with connection.cursor() as cursor:
                sql = "DELETE FROM todos WHERE id = %s"
                cursor.execute(sql, (int(body["id"])))
                result = {"rowcount":cursor.rowcount}
                
            connection.commit()            
            
    except Exception as e:
        result = e
        connection.close()
    
    finally:                    
        return {
            "statusCode": 200,
            "headers": {
                "Access-Control-Allow-Origin" : "*",
                "Access-Control-Allow-Methods" : "POST, GET, OPTIONS, PUT, DELETE",
                "Access-Control-Allow-Headers" : "Origin, X-Requested-With, Content-Type, Accept, Authorization",
                "Content-Type" : "application/json"
            },
            "body": json.dumps(result)
        }
 
Colored by Color Scripter
cs

20.

: 작성한 todo.py 파일을 압축하여 배포할 것이기 때문에 GnuWin32 미설치인 경우 하기의 링크 참고

> GnuWin32 zip-3.0 설치

21.

22.

: 해당 프로젝트 경로로 이동, 여기서는 "c:\workspace\python\todo"로 지정

1
2
3
4
C:\Users\Admin>cd c:\workspace\python\todo
 
c:\workspace\python\todo>
 
Colored by Color Scripter
cs

23.

: zip 명령을 통해 배포할 압축 파일 생성

: 여기서 -r 옵션은 하위 폴더 및 파일을 포함한다는 의미이며,현재 경로에 해당 폴더 및 파일을 todo.zip 파일로 압축한다는 의미

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
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
c:\workspace\python\todo>zip -r todo.zip .
  adding: asn1crypto/ (164 bytes security) (stored 0%)
  adding: asn1crypto/algos.py (164 bytes security) (deflated 81%)
  adding: asn1crypto/cms.py (164 bytes security) (deflated 82%)
  adding: asn1crypto/core.py (164 bytes security) (deflated 84%)
  adding: asn1crypto/crl.py (164 bytes security) (deflated 79%)
  adding: asn1crypto/csr.py (164 bytes security) (deflated 63%)
  adding: asn1crypto/keys.py (164 bytes security) (deflated 82%)
  adding: asn1crypto/ocsp.py (164 bytes security) (deflated 83%)
  adding: asn1crypto/parser.py (164 bytes security) (deflated 74%)
  adding: asn1crypto/pdf.py (164 bytes security) (deflated 66%)
  adding: asn1crypto/pem.py (164 bytes security) (deflated 71%)
  adding: asn1crypto/pkcs12.py (164 bytes security) (deflated 67%)
  adding: asn1crypto/tsp.py (164 bytes security) (deflated 76%)
  adding: asn1crypto/util.py (164 bytes security) (deflated 81%)
  adding: asn1crypto/version.py (164 bytes security) (deflated 21%)
  adding: asn1crypto/x509.py (164 bytes security) (deflated 80%)
  adding: asn1crypto/_elliptic_curve.py (164 bytes security) (deflated 61%)
  adding: asn1crypto/_errors.py (164 bytes security) (deflated 49%)
  adding: asn1crypto/_ffi.py (164 bytes security) (deflated 54%)
  adding: asn1crypto/_inet.py (164 bytes security) (deflated 74%)
  adding: asn1crypto/_int.py (164 bytes security) (deflated 59%)
  adding: asn1crypto/_iri.py (164 bytes security) (deflated 70%)
  adding: asn1crypto/_ordereddict.py (164 bytes security) (deflated 64%)
  adding: asn1crypto/_perf/ (164 bytes security) (stored 0%)
  adding: asn1crypto/_perf/_big_num_ctypes.py (164 bytes security) (deflated 66%)
  adding: asn1crypto/_perf/__init__.py (164 bytes security) (stored 0%)
  adding: asn1crypto/_perf/__pycache__/ (164 bytes security) (stored 0%)
  adding: asn1crypto/_perf/__pycache__/_big_num_ctypes.cpython-37.pyc (164 bytes security) (deflated 41%)
  adding: asn1crypto/_perf/__pycache__/__init__.cpython-37.pyc (164 bytes security) (deflated 22%)
  adding: asn1crypto/_teletex_codec.py (164 bytes security) (deflated 77%)
  adding: asn1crypto/_types.py (164 bytes security) (deflated 55%)
  adding: asn1crypto/__init__.py (164 bytes security) (deflated 37%)
  adding: asn1crypto/__pycache__/ (164 bytes security) (stored 0%)
  adding: asn1crypto/__pycache__/algos.cpython-37.pyc (164 bytes security) (deflated 67%)
  adding: asn1crypto/__pycache__/cms.cpython-37.pyc (164 bytes security) (deflated 67%)
  adding: asn1crypto/__pycache__/core.cpython-37.pyc (164 bytes security) (deflated 70%)
  adding: asn1crypto/__pycache__/crl.cpython-37.pyc (164 bytes security) (deflated 64%)
  adding: asn1crypto/__pycache__/csr.cpython-37.pyc (164 bytes security) (deflated 52%)
  adding: asn1crypto/__pycache__/keys.cpython-37.pyc (164 bytes security) (deflated 66%)
  adding: asn1crypto/__pycache__/ocsp.cpython-37.pyc (164 bytes security) (deflated 69%)
  adding: asn1crypto/__pycache__/parser.cpython-37.pyc (164 bytes security) (deflated 58%)
  adding: asn1crypto/__pycache__/pdf.cpython-37.pyc (164 bytes security) (deflated 50%)
  adding: asn1crypto/__pycache__/pem.cpython-37.pyc (164 bytes security) (deflated 54%)
  adding: asn1crypto/__pycache__/pkcs12.cpython-37.pyc (164 bytes security) (deflated 56%)
  adding: asn1crypto/__pycache__/tsp.cpython-37.pyc (164 bytes security) (deflated 62%)
  adding: asn1crypto/__pycache__/util.cpython-37.pyc (164 bytes security) (deflated 67%)
  adding: asn1crypto/__pycache__/version.cpython-37.pyc (164 bytes security) (deflated 23%)
  adding: asn1crypto/__pycache__/x509.cpython-37.pyc (164 bytes security) (deflated 67%)
  adding: asn1crypto/__pycache__/_elliptic_curve.cpython-37.pyc (164 bytes security) (deflated 48%)
  adding: asn1crypto/__pycache__/_errors.cpython-37.pyc (164 bytes security) (deflated 35%)
  adding: asn1crypto/__pycache__/_ffi.cpython-37.pyc (164 bytes security) (deflated 45%)
  adding: asn1crypto/__pycache__/_inet.cpython-37.pyc (164 bytes security) (deflated 51%)
  adding: asn1crypto/__pycache__/_int.cpython-37.pyc (164 bytes security) (deflated 43%)
  adding: asn1crypto/__pycache__/_iri.cpython-37.pyc (164 bytes security) (deflated 47%)
  adding: asn1crypto/__pycache__/_ordereddict.cpython-37.pyc (164 bytes security) (deflated 50%)
  adding: asn1crypto/__pycache__/_teletex_codec.cpython-37.pyc (164 bytes security) (deflated 49%)
  adding: asn1crypto/__pycache__/_types.cpython-37.pyc (164 bytes security) (deflated 38%)
  adding: asn1crypto/__pycache__/__init__.cpython-37.pyc (164 bytes security) (deflated 26%)
  adding: asn1crypto-0.24.0.dist-info/ (164 bytes security) (stored 0%)
  adding: asn1crypto-0.24.0.dist-info/DESCRIPTION.rst (164 bytes security) (deflated 8%)
  adding: asn1crypto-0.24.0.dist-info/INSTALLER (164 bytes security) (stored 0%)
  adding: asn1crypto-0.24.0.dist-info/METADATA (164 bytes security) (deflated 57%)
  adding: asn1crypto-0.24.0.dist-info/metadata.json (164 bytes security) (deflated 52%)
  adding: asn1crypto-0.24.0.dist-info/RECORD (164 bytes security) (deflated 58%)
  adding: asn1crypto-0.24.0.dist-info/top_level.txt (164 bytes security) (stored 0%)
  adding: asn1crypto-0.24.0.dist-info/WHEEL (164 bytes security) (deflated 14%)
  adding: cffi/ (164 bytes security) (stored 0%)
  adding: cffi/api.py (164 bytes security) (deflated 73%)
  adding: cffi/backend_ctypes.py (164 bytes security) (deflated 81%)
  adding: cffi/cffi_opcode.py (164 bytes security) (deflated 70%)
  adding: cffi/commontypes.py (164 bytes security) (deflated 64%)
  adding: cffi/cparser.py (164 bytes security) (deflated 75%)
  adding: cffi/error.py (164 bytes security) (deflated 55%)
  adding: cffi/ffiplatform.py (164 bytes security) (deflated 63%)
  adding: cffi/lock.py (164 bytes security) (deflated 62%)
  adding: cffi/model.py (164 bytes security) (deflated 76%)
  adding: cffi/parse_c_type.h (164 bytes security) (deflated 71%)
  adding: cffi/recompiler.py (164 bytes security) (deflated 78%)
  adding: cffi/setuptools_ext.py (164 bytes security) (deflated 66%)
  adding: cffi/vengine_cpy.py (164 bytes security) (deflated 78%)
  adding: cffi/vengine_gen.py (164 bytes security) (deflated 76%)
  adding: cffi/verifier.py (164 bytes security) (deflated 71%)
  adding: cffi/_cffi_errors.h (164 bytes security) (deflated 61%)
  adding: cffi/_cffi_include.h (164 bytes security) (deflated 76%)
  adding: cffi/_embedding.h (164 bytes security) (deflated 67%)
  adding: cffi/__init__.py (164 bytes security) (deflated 44%)
  adding: cffi/__pycache__/ (164 bytes security) (stored 0%)
  adding: cffi/__pycache__/api.cpython-37.pyc (164 bytes security) (deflated 57%)
  adding: cffi/__pycache__/backend_ctypes.cpython-37.pyc (164 bytes security) (deflated 63%)
  adding: cffi/__pycache__/cffi_opcode.cpython-37.pyc (164 bytes security) (deflated 50%)
  adding: cffi/__pycache__/commontypes.cpython-37.pyc (164 bytes security) (deflated 35%)
  adding: cffi/__pycache__/cparser.cpython-37.pyc (164 bytes security) (deflated 48%)
  adding: cffi/__pycache__/error.cpython-37.pyc (164 bytes security) (deflated 45%)
  adding: cffi/__pycache__/ffiplatform.cpython-37.pyc (164 bytes security) (deflated 40%)
  adding: cffi/__pycache__/lock.cpython-37.pyc (164 bytes security) (deflated 27%)
  adding: cffi/__pycache__/model.cpython-37.pyc (164 bytes security) (deflated 59%)
  adding: cffi/__pycache__/recompiler.cpython-37.pyc (164 bytes security) (deflated 58%)
  adding: cffi/__pycache__/setuptools_ext.cpython-37.pyc (164 bytes security) (deflated 48%)
  adding: cffi/__pycache__/vengine_cpy.cpython-37.pyc (164 bytes security) (deflated 64%)
  adding: cffi/__pycache__/vengine_gen.cpython-37.pyc (164 bytes security) (deflated 57%)
  adding: cffi/__pycache__/verifier.cpython-37.pyc (164 bytes security) (deflated 48%)
  adding: cffi/__pycache__/__init__.cpython-37.pyc (164 bytes security) (deflated 28%)
  adding: cffi-1.11.5.dist-info/ (164 bytes security) (stored 0%)
  adding: cffi-1.11.5.dist-info/entry_points.txt (164 bytes security) (deflated 18%)
  adding: cffi-1.11.5.dist-info/INSTALLER (164 bytes security) (stored 0%)
  adding: cffi-1.11.5.dist-info/METADATA (164 bytes security) (deflated 66%)
  adding: cffi-1.11.5.dist-info/RECORD (164 bytes security) (deflated 49%)
  adding: cffi-1.11.5.dist-info/top_level.txt (164 bytes security) (deflated 5%)
  adding: cffi-1.11.5.dist-info/WHEEL (164 bytes security) (deflated 3%)
  adding: cryptography/ (164 bytes security) (stored 0%)
  adding: cryptography/exceptions.py (164 bytes security) (deflated 56%)
  adding: cryptography/fernet.py (164 bytes security) (deflated 72%)
  adding: cryptography/hazmat/ (164 bytes security) (stored 0%)
  adding: cryptography/hazmat/backends/ (164 bytes security) (stored 0%)
  adding: cryptography/hazmat/backends/interfaces.py (164 bytes security) (deflated 84%)
  adding: cryptography/hazmat/backends/openssl/ (164 bytes security) (stored 0%)
  adding: cryptography/hazmat/backends/openssl/aead.py (164 bytes security) (deflated 77%)
  adding: cryptography/hazmat/backends/openssl/backend.py (164 bytes security) (deflated 82%)
  adding: cryptography/hazmat/backends/openssl/ciphers.py (164 bytes security) (deflated 75%)
  adding: cryptography/hazmat/backends/openssl/cmac.py (164 bytes security) (deflated 67%)
  adding: cryptography/hazmat/backends/openssl/decode_asn1.py (164 bytes security) (deflated 77%)
  adding: cryptography/hazmat/backends/openssl/dh.py (164 bytes security) (deflated 83%)
  adding: cryptography/hazmat/backends/openssl/dsa.py (164 bytes security) (deflated 83%)
  adding: cryptography/hazmat/backends/openssl/ec.py (164 bytes security) (deflated 77%)
  adding: cryptography/hazmat/backends/openssl/encode_asn1.py (164 bytes security) (deflated 78%)
  adding: cryptography/hazmat/backends/openssl/hashes.py (164 bytes security) (deflated 68%)
  adding: cryptography/hazmat/backends/openssl/hmac.py (164 bytes security) (deflated 68%)
  adding: cryptography/hazmat/backends/openssl/rsa.py (164 bytes security) (deflated 81%)
  adding: cryptography/hazmat/backends/openssl/utils.py (164 bytes security) (deflated 55%)
  adding: cryptography/hazmat/backends/openssl/x25519.py (164 bytes security) (deflated 72%)
  adding: cryptography/hazmat/backends/openssl/x509.py (164 bytes security) (deflated 82%)
  adding: cryptography/hazmat/backends/openssl/__init__.py (164 bytes security) (deflated 34%)
  adding: cryptography/hazmat/backends/openssl/__pycache__/ (164 bytes security) (stored 0%)
  adding: cryptography/hazmat/backends/openssl/__pycache__/aead.cpython-37.pyc (164 bytes security) (deflated 50%)
  adding: cryptography/hazmat/backends/openssl/__pycache__/backend.cpython-37.pyc (164 bytes security) (deflated 62%)
  adding: cryptography/hazmat/backends/openssl/__pycache__/ciphers.cpython-37.pyc (164 bytes security) (deflated 48%)
  adding: cryptography/hazmat/backends/openssl/__pycache__/cmac.cpython-37.pyc (164 bytes security) (deflated 43%)
  adding: cryptography/hazmat/backends/openssl/__pycache__/decode_asn1.cpython-37.pyc (164 bytes security) (deflated 58%)
  adding: cryptography/hazmat/backends/openssl/__pycache__/dh.cpython-37.pyc (164 bytes security) (deflated 62%)
  adding: cryptography/hazmat/backends/openssl/__pycache__/dsa.cpython-37.pyc (164 bytes security) (deflated 62%)
  adding: cryptography/hazmat/backends/openssl/__pycache__/ec.cpython-37.pyc (164 bytes security) (deflated 57%)
  adding: cryptography/hazmat/backends/openssl/__pycache__/encode_asn1.cpython-37.pyc (164 bytes security) (deflated 56%)
  adding: cryptography/hazmat/backends/openssl/__pycache__/hashes.cpython-37.pyc (164 bytes security) (deflated 44%)
  adding: cryptography/hazmat/backends/openssl/__pycache__/hmac.cpython-37.pyc (164 bytes security) (deflated 44%)
  adding: cryptography/hazmat/backends/openssl/__pycache__/rsa.cpython-37.pyc (164 bytes security) (deflated 58%)
  adding: cryptography/hazmat/backends/openssl/__pycache__/utils.cpython-37.pyc (164 bytes security) (deflated 40%)
  adding: cryptography/hazmat/backends/openssl/__pycache__/x25519.cpython-37.pyc (164 bytes security) (deflated 49%)
  adding: cryptography/hazmat/backends/openssl/__pycache__/x509.cpython-37.pyc (164 bytes security) (deflated 68%)
  adding: cryptography/hazmat/backends/openssl/__pycache__/__init__.cpython-37.pyc (164 bytes security) (deflated 28%)
  adding: cryptography/hazmat/backends/__init__.py (164 bytes security) (deflated 45%)
  adding: cryptography/hazmat/backends/__pycache__/ (164 bytes security) (stored 0%)
  adding: cryptography/hazmat/backends/__pycache__/interfaces.cpython-37.pyc (164 bytes security) (deflated 78%)
  adding: cryptography/hazmat/backends/__pycache__/__init__.cpython-37.pyc (164 bytes security) (deflated 32%)
  adding: cryptography/hazmat/bindings/ (164 bytes security) (stored 0%)
  adding: cryptography/hazmat/bindings/openssl/ (164 bytes security) (stored 0%)
  adding: cryptography/hazmat/bindings/openssl/binding.py (164 bytes security) (deflated 63%)
  adding: cryptography/hazmat/bindings/openssl/_conditional.py (164 bytes security) (deflated 75%)
  adding: cryptography/hazmat/bindings/openssl/__init__.py (164 bytes security) (deflated 29%)
  adding: cryptography/hazmat/bindings/openssl/__pycache__/ (164 bytes security) (stored 0%)
  adding: cryptography/hazmat/bindings/openssl/__pycache__/binding.cpython-37.pyc (164 bytes security) (deflated 47%)
  adding: cryptography/hazmat/bindings/openssl/__pycache__/_conditional.cpython-37.pyc (164 bytes security) (deflated 66%)
  adding: cryptography/hazmat/bindings/openssl/__pycache__/__init__.cpython-37.pyc (164 bytes security) (deflated 20%)
  adding: cryptography/hazmat/bindings/_constant_time.cp37-win32.pyd (164 bytes security) (deflated 49%)
  adding: cryptography/hazmat/bindings/_openssl.cp37-win32.pyd (164 bytes security) (deflated 53%)
  adding: cryptography/hazmat/bindings/_padding.cp37-win32.pyd (164 bytes security) (deflated 48%)
  adding: cryptography/hazmat/bindings/__init__.py (164 bytes security) (deflated 29%)
  adding: cryptography/hazmat/bindings/__pycache__/ (164 bytes security) (stored 0%)
  adding: cryptography/hazmat/bindings/__pycache__/__init__.cpython-37.pyc (164 bytes security) (deflated 19%)
  adding: cryptography/hazmat/primitives/ (164 bytes security) (stored 0%)
  adding: cryptography/hazmat/primitives/asymmetric/ (164 bytes security) (stored 0%)
  adding: cryptography/hazmat/primitives/asymmetric/dh.py (164 bytes security) (deflated 78%)
  adding: cryptography/hazmat/primitives/asymmetric/dsa.py (164 bytes security) (deflated 78%)
  adding: cryptography/hazmat/primitives/asymmetric/ec.py (164 bytes security) (deflated 80%)
  adding: cryptography/hazmat/primitives/asymmetric/padding.py (164 bytes security) (deflated 63%)
  adding: cryptography/hazmat/primitives/asymmetric/rsa.py (164 bytes security) (deflated 73%)
  adding: cryptography/hazmat/primitives/asymmetric/utils.py (164 bytes security) (deflated 61%)
  adding: cryptography/hazmat/primitives/asymmetric/x25519.py (164 bytes security) (deflated 67%)
  adding: cryptography/hazmat/primitives/asymmetric/__init__.py (164 bytes security) (deflated 60%)
  adding: cryptography/hazmat/primitives/asymmetric/__pycache__/ (164 bytes security) (stored 0%)
  adding: cryptography/hazmat/primitives/asymmetric/__pycache__/dh.cpython-37.pyc (164 bytes security) (deflated 68%)
  adding: cryptography/hazmat/primitives/asymmetric/__pycache__/dsa.cpython-37.pyc (164 bytes security) (deflated 67%)
  adding: cryptography/hazmat/primitives/asymmetric/__pycache__/ec.cpython-37.pyc (164 bytes security) (deflated 70%)
  adding: cryptography/hazmat/primitives/asymmetric/__pycache__/padding.cpython-37.pyc (164 bytes security) (deflated 49%)
  adding: cryptography/hazmat/primitives/asymmetric/__pycache__/rsa.cpython-37.pyc (164 bytes security) (deflated 61%)
  adding: cryptography/hazmat/primitives/asymmetric/__pycache__/utils.cpython-37.pyc (164 bytes security) (deflated 47%)
  adding: cryptography/hazmat/primitives/asymmetric/__pycache__/x25519.cpython-37.pyc (164 bytes security) (deflated 52%)
  adding: cryptography/hazmat/primitives/asymmetric/__pycache__/__init__.cpython-37.pyc (164 bytes security) (deflated 55%)
  adding: cryptography/hazmat/primitives/ciphers/ (164 bytes security) (stored 0%)
  adding: cryptography/hazmat/primitives/ciphers/aead.py (164 bytes security) (deflated 82%)
  adding: cryptography/hazmat/primitives/ciphers/algorithms.py (164 bytes security) (deflated 78%)
  adding: cryptography/hazmat/primitives/ciphers/base.py (164 bytes security) (deflated 77%)
  adding: cryptography/hazmat/primitives/ciphers/modes.py (164 bytes security) (deflated 80%)
  adding: cryptography/hazmat/primitives/ciphers/__init__.py (164 bytes security) (deflated 51%)
  adding: cryptography/hazmat/primitives/ciphers/__pycache__/ (164 bytes security) (stored 0%)
  adding: cryptography/hazmat/primitives/ciphers/__pycache__/aead.cpython-37.pyc (164 bytes security) (deflated 62%)
  adding: cryptography/hazmat/primitives/ciphers/__pycache__/algorithms.cpython-37.pyc (164 bytes security) (deflated 68%)
  adding: cryptography/hazmat/primitives/ciphers/__pycache__/base.cpython-37.pyc (164 bytes security) (deflated 64%)
  adding: cryptography/hazmat/primitives/ciphers/__pycache__/modes.cpython-37.pyc (164 bytes security) (deflated 66%)
  adding: cryptography/hazmat/primitives/ciphers/__pycache__/__init__.cpython-37.pyc (164 bytes security) (deflated 36%)
  adding: cryptography/hazmat/primitives/cmac.py (164 bytes security) (deflated 67%)
  adding: cryptography/hazmat/primitives/constant_time.py (164 bytes security) (deflated 55%)
  adding: cryptography/hazmat/primitives/hashes.py (164 bytes security) (deflated 75%)
  adding: cryptography/hazmat/primitives/hmac.py (164 bytes security) (deflated 67%)
  adding: cryptography/hazmat/primitives/kdf/ (164 bytes security) (stored 0%)
  adding: cryptography/hazmat/primitives/kdf/concatkdf.py (164 bytes security) (deflated 72%)
  adding: cryptography/hazmat/primitives/kdf/hkdf.py (164 bytes security) (deflated 72%)
  adding: cryptography/hazmat/primitives/kdf/kbkdf.py (164 bytes security) (deflated 68%)
  adding: cryptography/hazmat/primitives/kdf/pbkdf2.py (164 bytes security) (deflated 63%)
  adding: cryptography/hazmat/primitives/kdf/scrypt.py (164 bytes security) (deflated 61%)
  adding: cryptography/hazmat/primitives/kdf/x963kdf.py (164 bytes security) (deflated 61%)
  adding: cryptography/hazmat/primitives/kdf/__init__.py (164 bytes security) (deflated 48%)
  adding: cryptography/hazmat/primitives/kdf/__pycache__/ (164 bytes security) (stored 0%)
  adding: cryptography/hazmat/primitives/kdf/__pycache__/concatkdf.cpython-37.pyc (164 bytes security) (deflated 51%)
  adding: cryptography/hazmat/primitives/kdf/__pycache__/hkdf.cpython-37.pyc (164 bytes security) (deflated 49%)
  adding: cryptography/hazmat/primitives/kdf/__pycache__/kbkdf.cpython-37.pyc (164 bytes security) (deflated 44%)
  adding: cryptography/hazmat/primitives/kdf/__pycache__/pbkdf2.cpython-37.pyc (164 bytes security) (deflated 41%)
  adding: cryptography/hazmat/primitives/kdf/__pycache__/scrypt.cpython-37.pyc (164 bytes security) (deflated 41%)
  adding: cryptography/hazmat/primitives/kdf/__pycache__/x963kdf.cpython-37.pyc (164 bytes security) (deflated 39%)
  adding: cryptography/hazmat/primitives/kdf/__pycache__/__init__.cpython-37.pyc (164 bytes security) (deflated 42%)
  adding: cryptography/hazmat/primitives/keywrap.py (164 bytes security) (deflated 72%)
  adding: cryptography/hazmat/primitives/mac.py (164 bytes security) (deflated 55%)
  adding: cryptography/hazmat/primitives/padding.py (164 bytes security) (deflated 81%)
  adding: cryptography/hazmat/primitives/serialization.py (164 bytes security) (deflated 70%)
  adding: cryptography/hazmat/primitives/twofactor/ (164 bytes security) (stored 0%)
  adding: cryptography/hazmat/primitives/twofactor/hotp.py (164 bytes security) (deflated 60%)
  adding: cryptography/hazmat/primitives/twofactor/totp.py (164 bytes security) (deflated 59%)
  adding: cryptography/hazmat/primitives/twofactor/utils.py (164 bytes security) (deflated 48%)
  adding: cryptography/hazmat/primitives/twofactor/__init__.py (164 bytes security) (deflated 30%)
  adding: cryptography/hazmat/primitives/twofactor/__pycache__/ (164 bytes security) (stored 0%)
  adding: cryptography/hazmat/primitives/twofactor/__pycache__/hotp.cpython-37.pyc (164 bytes security) (deflated 42%)
  adding: cryptography/hazmat/primitives/twofactor/__pycache__/totp.cpython-37.pyc (164 bytes security) (deflated 44%)
  adding: cryptography/hazmat/primitives/twofactor/__pycache__/utils.cpython-37.pyc (164 bytes security) (deflated 29%)
  adding: cryptography/hazmat/primitives/twofactor/__pycache__/__init__.cpython-37.pyc (164 bytes security) (deflated 28%)
  adding: cryptography/hazmat/primitives/__init__.py (164 bytes security) (deflated 29%)
  adding: cryptography/hazmat/primitives/__pycache__/ (164 bytes security) (stored 0%)
  adding: cryptography/hazmat/primitives/__pycache__/cmac.cpython-37.pyc (164 bytes security) (deflated 47%)
  adding: cryptography/hazmat/primitives/__pycache__/constant_time.cpython-37.pyc (164 bytes security) (deflated 39%)
  adding: cryptography/hazmat/primitives/__pycache__/hashes.cpython-37.pyc (164 bytes security) (deflated 61%)
  adding: cryptography/hazmat/primitives/__pycache__/hmac.cpython-37.pyc (164 bytes security) (deflated 46%)
  adding: cryptography/hazmat/primitives/__pycache__/keywrap.cpython-37.pyc (164 bytes security) (deflated 54%)
  adding: cryptography/hazmat/primitives/__pycache__/mac.cpython-37.pyc (164 bytes security) (deflated 49%)
  adding: cryptography/hazmat/primitives/__pycache__/padding.cpython-37.pyc (164 bytes security) (deflated 68%)
  adding: cryptography/hazmat/primitives/__pycache__/serialization.cpython-37.pyc (164 bytes security) (deflated 54%)
  adding: cryptography/hazmat/primitives/__pycache__/__init__.cpython-37.pyc (164 bytes security) (deflated 20%)
  adding: cryptography/hazmat/__init__.py (164 bytes security) (deflated 37%)
  adding: cryptography/hazmat/__pycache__/ (164 bytes security) (stored 0%)
  adding: cryptography/hazmat/__pycache__/__init__.cpython-37.pyc (164 bytes security) (deflated 27%)
  adding: cryptography/utils.py (164 bytes security) (deflated 67%)
  adding: cryptography/x509/ (164 bytes security) (stored 0%)
  adding: cryptography/x509/base.py (164 bytes security) (deflated 86%)
  adding: cryptography/x509/certificate_transparency.py (164 bytes security) (deflated 56%)
  adding: cryptography/x509/extensions.py (164 bytes security) (deflated 84%)
  adding: cryptography/x509/general_name.py (164 bytes security) (deflated 81%)
  adding: cryptography/x509/name.py (164 bytes security) (deflated 70%)
  adding: cryptography/x509/oid.py (164 bytes security) (deflated 76%)
  adding: cryptography/x509/__init__.py (164 bytes security) (deflated 74%)
  adding: cryptography/x509/__pycache__/ (164 bytes security) (stored 0%)
  adding: cryptography/x509/__pycache__/base.cpython-37.pyc (164 bytes security) (deflated 74%)
  adding: cryptography/x509/__pycache__/certificate_transparency.cpython-37.pyc (164 bytes security) (deflated 52%)
  adding: cryptography/x509/__pycache__/extensions.cpython-37.pyc (164 bytes security) (deflated 76%)
  adding: cryptography/x509/__pycache__/general_name.cpython-37.pyc (164 bytes security) (deflated 69%)
  adding: cryptography/x509/__pycache__/name.cpython-37.pyc (164 bytes security) (deflated 61%)
  adding: cryptography/x509/__pycache__/oid.cpython-37.pyc (164 bytes security) (deflated 56%)
  adding: cryptography/x509/__pycache__/__init__.cpython-37.pyc (164 bytes security) (deflated 55%)
  adding: cryptography/__about__.py (164 bytes security) (deflated 47%)
  adding: cryptography/__init__.py (164 bytes security) (deflated 45%)
  adding: cryptography/__pycache__/ (164 bytes security) (stored 0%)
  adding: cryptography/__pycache__/exceptions.cpython-37.pyc (164 bytes security) (deflated 56%)
  adding: cryptography/__pycache__/fernet.cpython-37.pyc (164 bytes security) (deflated 47%)
  adding: cryptography/__pycache__/utils.cpython-37.pyc (164 bytes security) (deflated 53%)
  adding: cryptography/__pycache__/__about__.cpython-37.pyc (164 bytes security) (deflated 31%)
  adding: cryptography/__pycache__/__init__.cpython-37.pyc (164 bytes security) (deflated 32%)
  adding: cryptography-2.3.1.dist-info/ (164 bytes security) (stored 0%)
  adding: cryptography-2.3.1.dist-info/INSTALLER (164 bytes security) (stored 0%)
  adding: cryptography-2.3.1.dist-info/METADATA (164 bytes security) (deflated 67%)
  adding: cryptography-2.3.1.dist-info/RECORD (164 bytes security) (deflated 69%)
  adding: cryptography-2.3.1.dist-info/top_level.txt (164 bytes security) (stored 0%)
  adding: cryptography-2.3.1.dist-info/WHEEL (164 bytes security) (deflated 3%)
  adding: idna/ (164 bytes security) (stored 0%)
  adding: idna/codec.py (164 bytes security) (deflated 76%)
  adding: idna/compat.py (164 bytes security) (deflated 38%)
  adding: idna/core.py (164 bytes security) (deflated 76%)
  adding: idna/idnadata.py (164 bytes security) (deflated 79%)
  adding: idna/intranges.py (164 bytes security) (deflated 58%)
  adding: idna/package_data.py (164 bytes security) (stored 0%)
  adding: idna/uts46data.py (164 bytes security) (deflated 81%)
  adding: idna/__init__.py (164 bytes security) (deflated 12%)
  adding: idna/__pycache__/ (164 bytes security) (stored 0%)
  adding: idna/__pycache__/codec.cpython-37.pyc (164 bytes security) (deflated 56%)
  adding: idna/__pycache__/compat.cpython-37.pyc (164 bytes security) (deflated 40%)
  adding: idna/__pycache__/core.cpython-37.pyc (164 bytes security) (deflated 50%)
  adding: idna/__pycache__/idnadata.cpython-37.pyc (164 bytes security) (deflated 66%)
  adding: idna/__pycache__/intranges.cpython-37.pyc (164 bytes security) (deflated 40%)
  adding: idna/__pycache__/package_data.cpython-37.pyc (164 bytes security) (deflated 16%)
  adding: idna/__pycache__/uts46data.cpython-37.pyc (164 bytes security) (deflated 79%)
  adding: idna/__pycache__/__init__.cpython-37.pyc (164 bytes security) (deflated 16%)
  adding: idna-2.7.dist-info/ (164 bytes security) (stored 0%)
  adding: idna-2.7.dist-info/INSTALLER (164 bytes security) (stored 0%)
  adding: idna-2.7.dist-info/LICENSE.txt (164 bytes security) (deflated 57%)
  adding: idna-2.7.dist-info/METADATA (164 bytes security) (deflated 62%)
  adding: idna-2.7.dist-info/RECORD (164 bytes security) (deflated 48%)
  adding: idna-2.7.dist-info/top_level.txt (164 bytes security) (stored 0%)
  adding: idna-2.7.dist-info/WHEEL (164 bytes security) (deflated 15%)
  adding: pycparser/ (164 bytes security) (stored 0%)
  adding: pycparser/ast_transforms.py (164 bytes security) (deflated 68%)
  adding: pycparser/c_ast.py (164 bytes security) (deflated 87%)
  adding: pycparser/c_generator.py (164 bytes security) (deflated 77%)
  adding: pycparser/c_lexer.py (164 bytes security) (deflated 69%)
  adding: pycparser/c_parser.py (164 bytes security) (deflated 80%)
  adding: pycparser/lextab.py (164 bytes security) (deflated 74%)
  adding: pycparser/ply/ (164 bytes security) (stored 0%)
  adding: pycparser/ply/cpp.py (164 bytes security) (deflated 78%)
  adding: pycparser/ply/ctokens.py (164 bytes security) (deflated 62%)
  adding: pycparser/ply/lex.py (164 bytes security) (deflated 76%)
  adding: pycparser/ply/yacc.py (164 bytes security) (deflated 81%)
  adding: pycparser/ply/ygen.py (164 bytes security) (deflated 63%)
  adding: pycparser/ply/__init__.py (164 bytes security) (deflated 4%)
  adding: pycparser/ply/__pycache__/ (164 bytes security) (stored 0%)
  adding: pycparser/ply/__pycache__/cpp.cpython-37.pyc (164 bytes security) (deflated 52%)
  adding: pycparser/ply/__pycache__/ctokens.cpython-37.pyc (164 bytes security) (deflated 40%)
  adding: pycparser/ply/__pycache__/lex.cpython-37.pyc (164 bytes security) (deflated 52%)
  adding: pycparser/ply/__pycache__/yacc.cpython-37.pyc (164 bytes security) (deflated 58%)
  adding: pycparser/ply/__pycache__/ygen.cpython-37.pyc (164 bytes security) (deflated 39%)
  adding: pycparser/ply/__pycache__/__init__.cpython-37.pyc (164 bytes security) (deflated 12%)
  adding: pycparser/plyparser.py (164 bytes security) (deflated 63%)
  adding: pycparser/yacctab.py (164 bytes security) (deflated 87%)
  adding: pycparser/_ast_gen.py (164 bytes security) (deflated 71%)
  adding: pycparser/_build_tables.py (164 bytes security) (deflated 53%)
  adding: pycparser/_c_ast.cfg (164 bytes security) (deflated 59%)
  adding: pycparser/__init__.py (164 bytes security) (deflated 60%)
  adding: pycparser/__pycache__/ (164 bytes security) (stored 0%)
  adding: pycparser/__pycache__/ast_transforms.cpython-37.pyc (164 bytes security) (deflated 56%)
  adding: pycparser/__pycache__/c_ast.cpython-37.pyc (164 bytes security) (deflated 80%)
  adding: pycparser/__pycache__/c_generator.cpython-37.pyc (164 bytes security) (deflated 63%)
  adding: pycparser/__pycache__/c_lexer.cpython-37.pyc (164 bytes security) (deflated 55%)
  adding: pycparser/__pycache__/c_parser.cpython-37.pyc (164 bytes security) (deflated 74%)
  adding: pycparser/__pycache__/lextab.cpython-37.pyc (164 bytes security) (deflated 63%)
  adding: pycparser/__pycache__/plyparser.cpython-37.pyc (164 bytes security) (deflated 51%)
  adding: pycparser/__pycache__/yacctab.cpython-37.pyc (164 bytes security) (deflated 82%)
  adding: pycparser/__pycache__/_ast_gen.cpython-37.pyc (164 bytes security) (deflated 59%)
  adding: pycparser/__pycache__/_build_tables.cpython-37.pyc (164 bytes security) (deflated 26%)
  adding: pycparser/__pycache__/__init__.cpython-37.pyc (164 bytes security) (deflated 46%)
  adding: pycparser-2.19-py3.7.egg-info/ (164 bytes security) (stored 0%)
  adding: pycparser-2.19-py3.7.egg-info/dependency_links.txt (164 bytes security) (stored 0%)
  adding: pycparser-2.19-py3.7.egg-info/installed-files.txt (164 bytes security) (deflated 80%)
  adding: pycparser-2.19-py3.7.egg-info/PKG-INFO (164 bytes security) (deflated 57%)
  adding: pycparser-2.19-py3.7.egg-info/SOURCES.txt (164 bytes security) (deflated 81%)
  adding: pycparser-2.19-py3.7.egg-info/top_level.txt (164 bytes security) (stored 0%)
  adding: pymysql/ (164 bytes security) (stored 0%)
  adding: pymysql/charset.py (164 bytes security) (deflated 84%)
  adding: pymysql/connections.py (164 bytes security) (deflated 74%)
  adding: pymysql/constants/ (164 bytes security) (stored 0%)
  adding: pymysql/constants/CLIENT.py (164 bytes security) (deflated 50%)
  adding: pymysql/constants/COMMAND.py (164 bytes security) (deflated 56%)
  adding: pymysql/constants/CR.py (164 bytes security) (deflated 66%)
  adding: pymysql/constants/ER.py (164 bytes security) (deflated 63%)
  adding: pymysql/constants/FIELD_TYPE.py (164 bytes security) (deflated 45%)
  adding: pymysql/constants/FLAG.py (164 bytes security) (deflated 31%)
  adding: pymysql/constants/SERVER_STATUS.py (164 bytes security) (deflated 50%)
  adding: pymysql/constants/__init__.py (164 bytes security) (stored 0%)
  adding: pymysql/constants/__pycache__/ (164 bytes security) (stored 0%)
  adding: pymysql/constants/__pycache__/CLIENT.cpython-37.pyc (164 bytes security) (deflated 33%)
  adding: pymysql/constants/__pycache__/COMMAND.cpython-37.pyc (164 bytes security) (deflated 41%)
  adding: pymysql/constants/__pycache__/CR.cpython-37.pyc (164 bytes security) (deflated 51%)
  adding: pymysql/constants/__pycache__/ER.cpython-37.pyc (164 bytes security) (deflated 56%)
  adding: pymysql/constants/__pycache__/FIELD_TYPE.cpython-37.pyc (164 bytes security) (deflated 34%)
  adding: pymysql/constants/__pycache__/FLAG.cpython-37.pyc (164 bytes security) (deflated 27%)
  adding: pymysql/constants/__pycache__/SERVER_STATUS.cpython-37.pyc (164 bytes security) (deflated 37%)
  adding: pymysql/constants/__pycache__/__init__.cpython-37.pyc (164 bytes security) (deflated 22%)
  adding: pymysql/converters.py (164 bytes security) (deflated 74%)
  adding: pymysql/cursors.py (164 bytes security) (deflated 72%)
  adding: pymysql/err.py (164 bytes security) (deflated 61%)
  adding: pymysql/optionfile.py (164 bytes security) (deflated 59%)
  adding: pymysql/protocol.py (164 bytes security) (deflated 72%)
  adding: pymysql/times.py (164 bytes security) (deflated 58%)
  adding: pymysql/util.py (164 bytes security) (deflated 49%)
  adding: pymysql/_auth.py (164 bytes security) (deflated 70%)
  adding: pymysql/_compat.py (164 bytes security) (deflated 50%)
  adding: pymysql/_socketio.py (164 bytes security) (deflated 66%)
  adding: pymysql/__init__.py (164 bytes security) (deflated 59%)
  adding: pymysql/__pycache__/ (164 bytes security) (stored 0%)
  adding: pymysql/__pycache__/charset.cpython-37.pyc (164 bytes security) (deflated 67%)
  adding: pymysql/__pycache__/connections.cpython-37.pyc (164 bytes security) (deflated 54%)
  adding: pymysql/__pycache__/converters.cpython-37.pyc (164 bytes security) (deflated 59%)
  adding: pymysql/__pycache__/cursors.cpython-37.pyc (164 bytes security) (deflated 55%)
  adding: pymysql/__pycache__/err.cpython-37.pyc (164 bytes security) (deflated 55%)
  adding: pymysql/__pycache__/optionfile.cpython-37.pyc (164 bytes security) (deflated 39%)
  adding: pymysql/__pycache__/protocol.cpython-37.pyc (164 bytes security) (deflated 59%)
  adding: pymysql/__pycache__/times.cpython-37.pyc (164 bytes security) (deflated 47%)
  adding: pymysql/__pycache__/util.cpython-37.pyc (164 bytes security) (deflated 35%)
  adding: pymysql/__pycache__/_auth.cpython-37.pyc (164 bytes security) (deflated 46%)
  adding: pymysql/__pycache__/_compat.cpython-37.pyc (164 bytes security) (deflated 25%)
  adding: pymysql/__pycache__/_socketio.cpython-37.pyc (164 bytes security) (deflated 51%)
  adding: pymysql/__pycache__/__init__.cpython-37.pyc (164 bytes security) (deflated 42%)
  adding: PyMySQL-0.9.2.dist-info/ (164 bytes security) (stored 0%)
  adding: PyMySQL-0.9.2.dist-info/INSTALLER (164 bytes security) (stored 0%)
  adding: PyMySQL-0.9.2.dist-info/LICENSE.txt (164 bytes security) (deflated 41%)
  adding: PyMySQL-0.9.2.dist-info/METADATA (164 bytes security) (deflated 61%)
  adding: PyMySQL-0.9.2.dist-info/RECORD (164 bytes security) (deflated 57%)
  adding: PyMySQL-0.9.2.dist-info/top_level.txt (164 bytes security) (stored 0%)
  adding: PyMySQL-0.9.2.dist-info/WHEEL (164 bytes security) (deflated 14%)
  adding: six-1.11.0.dist-info/ (164 bytes security) (stored 0%)
  adding: six-1.11.0.dist-info/DESCRIPTION.rst (164 bytes security) (deflated 51%)
  adding: six-1.11.0.dist-info/INSTALLER (164 bytes security) (stored 0%)
  adding: six-1.11.0.dist-info/METADATA (164 bytes security) (deflated 54%)
  adding: six-1.11.0.dist-info/metadata.json (164 bytes security) (deflated 43%)
  adding: six-1.11.0.dist-info/RECORD (164 bytes security) (deflated 36%)
  adding: six-1.11.0.dist-info/top_level.txt (164 bytes security) (stored 0%)
  adding: six-1.11.0.dist-info/WHEEL (164 bytes security) (deflated 14%)
  adding: six.py (164 bytes security) (deflated 75%)
  adding: todo.py (172 bytes security) (stored 0%)
  adding: _cffi_backend.cp37-win32.pyd (164 bytes security) (deflated 53%)
  adding: __pycache__/ (164 bytes security) (stored 0%)
  adding: __pycache__/six.cpython-37.pyc (164 bytes security) (deflated 58%)
 
c:\workspace\python\todo>
 
Colored by Color Scripter
cs

24.

: 이전 과정에서 생성한 todo라는 이름의 lambda 서비스에 압축한 todo.zip 파일을 배포함으로써 업데이트를 진행한다는 의미

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
c:\workspace\python\todo>aws lambda update-function-code --function-name todo --zip-file fileb://todo.zip
{
    "FunctionName": "todo",
    "FunctionArn": "________________________________________________________",
    "Runtime": "python3.6",
    "Role": "_________________________________________________________",
    "Handler": "______________________________",
    "CodeSize": 2310716,
    "Description": "",
    "Timeout": 3,
    "MemorySize": 128,
    "LastModified": "2018-10-21T09:46:43.719+0000",
    "CodeSha256": "____________________________________________",
    "Version": "$LATEST",
    "TracingConfig": {
        "Mode": "PassThrough"
    },
    "RevisionId": "____________________________________"
}
 
c:\workspace\python\todo>
 
Colored by Color Scripter
cs

25.

: lambda 함수 목록 중에서 해당 함수 이름 클릭

26.

: 압축 파일 배포 후 함수 코드를 확인해보면 핸들러 정보를 찾을 수 없다는 메세지를 확인할 수 있음

: 기본값으로 적용된 핸들러 정보와 배포한 압축 파일 및 핸들러 정보가 일치하지 않아서 발생하는 문제

27.

: 좌측에 핸들러를 포함하는 todo.py 파일을 클릭 후 해당 핸들러 이름 확인하여 상단의 핸들러 정보를 수정

28.

: 페이지 상단의 저장 버튼을 클릭하여 변경 사항 적용

29.

: API 게이트웨이 트리거 클릭

30.

: 해당 API 게이트웨이 클릭, 여기서는 todo-API

31.

: 클라이언트라고 적힌 경계선 박스 내에 테스트 클릭

32.

: 메서드 요청 방식을 GET으로 선택 후 하단의 테스트 버튼 클릭

33.

: 응답 본문

: 로그

* 로그 메시지 마지막 라인 2줄에서 정상 동작 여부를 최종 확인 가능

34.

: 메서드 요청 방식을 POST로 선택 후 요청 본문 작성, 그리고 테스트 버튼 클릭

35.

: 응답 본문

: 로그

* 로그 메시지 마지막 라인 2줄에서 정상 동작 여부를 최종 확인 가능

: RDS의 MySQL 데이터베이스에서 테이블 확인

36.

: 메서드 요청 방식을 PUT로 선택 후 요청 본문 작성, 그리고 테스트 버튼 클릭

37.

: 응답 본문

: 로그

* 로그 메시지 마지막 라인 2줄에서 정상 동작 여부를 최종 확인 가능

: RDS의 MySQL 데이터베이스에서 테이블 확인

> 이전 테이블 정보

> 이후 테이블 정보

38.

: 메서드 요청 방식을 DELETE로 선택 후 요청 본문 작성, 그리고 테스트 버튼 클릭

39.

: 응답 본문

: 로그

* 로그 메시지 마지막 라인 2줄에서 정상 동작 여부를 최종 확인 가능

: RDS의 MySQL 데이터베이스에서 테이블 확인

> 이전 테이블 정보

> 이후 테이블 정보

40.

: 위 과정에 따라 적절한 테스트 검증이 끝났다면 리소스 옆의 작업 콤보 박스를 클릭

41.

: API 배포 클릭

42.

: 배포 스테이지 선택 후 배포 버튼 클릭

43.

: URL 호출 경로를 확인 후 하단의 변경 사항 저장 버튼 클릭

저작자표시

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

AWS Serverless를 사용한 Web App 정보 시스템 구축 (0)	2018.10.21
Serverless, S3를 사용한 정적 웹 페이지 구성 (0)	2018.10.21
Serverless, RDS를 사용한 MySQL 데이터베이스 구성 (0)	2018.10.21
AWS IAM 기존에 생성한 그룹의 정책 편집 (0)	2018.10.21
Vue.js Web App 생성 및 S3 배포 (2)	2018.10.20

Serverless, RDS를 사용한 MySQL 데이터베이스 구성

2018. 10. 21. 16:01

: 데이터베이스 > RDS 클릭

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

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

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

* 마스터 사용자 이름 및 마스터 암호는 초기 접속 시 사용되므로 메모 필요!!

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

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

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

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

> MySQL Workbench 설치

> MySQL Server 설치

: 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;
 
Colored by Color Scripter
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()
);
 
Colored by Color Scripter
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);
 
Colored by Color Scripter
cs

24.

: 테이블 조회

1
2
select * from todos;
 
cs

: 조회 결과

저작자표시

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

Serverless, S3를 사용한 정적 웹 페이지 구성 (0)	2018.10.21
Serverless, Lambda와 API Gateway를 사용한 동적 웹 페이지 구성 (0)	2018.10.21
AWS IAM 기존에 생성한 그룹의 정책 편집 (0)	2018.10.21
Vue.js Web App 생성 및 S3 배포 (2)	2018.10.20
AWS CLI를 통한 Vue.js Web App 배포 (0)	2018.10.20

AWS IAM 기존에 생성한 그룹의 정책 편집

2018. 10. 21. 13:50

: 보안, 자격 증명 및 규정 준수 > IAM 클릭

: 좌측 메뉴에서 그룹 클릭

: 그룹 목록 중에서 해당 그룹 이름을 클릭

: 요약 정보 밑에 권한 탭을 클릭

: 기존에 AmazoneS3FullAccess 정책이 설정되어 있으며 그 외 2개의 정책을 추가할 예정

: 정책 편집을 진행하려면 정책 연결 버튼 클릭

: 필요한 정책 연결을 필터링하여 조회 후 좌측 끝에 체크 박스를 각각 클릭

: 우측 하단에 정책 연결 버튼 클릭

: 다음과 같이 권한 정보에서 기존 정책 외에 2개의 새로운 정책이 추가된 것을 확인 가능

: 정책을 삭제해야 할 경우는 정책 목록 중 우측에 해당 정책의 정책 분리를 클릭

저작자표시

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

Serverless, Lambda와 API Gateway를 사용한 동적 웹 페이지 구성 (0)	2018.10.21
Serverless, RDS를 사용한 MySQL 데이터베이스 구성 (0)	2018.10.21
Vue.js Web App 생성 및 S3 배포 (2)	2018.10.20
AWS CLI를 통한 Vue.js Web App 배포 (0)	2018.10.20
Wiindows에서 AWS CLI 관련 configure 구성 (0)	2018.10.20

Vue.js Web App 생성 및 S3 배포

2018. 10. 20. 22:33

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

: Node.js 설치 및 환경 구축

: Vue CLI 설치

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
C:\Users\Admin>npm install -g @vue/cli
C:\Users\Admin\AppData\Roaming\npm\vue -> C:\Users\Admin\AppData\Roaming\npm\node_modules\@vue\cli\bin\vue.js
 
> protobufjs@6.8.8 postinstall C:\Users\Admin\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\protobufjs
> node scripts/postinstall
 
 
> nodemon@1.18.4 postinstall C:\Users\Admin\AppData\Roaming\npm\node_modules\@vue\cli\node_modules\nodemon
> node bin/postinstall || exit 0
 
Love nodemon? You can now support the project via the open collective:
 > https://opencollective.com/nodemon/donate
 
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\@vue\cli\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
 
+ @vue/cli@3.0.5
added 631 packages from 446 contributors in 40.015s
 
Colored by Color Scripter
cs

:작업할 폴더의 경로로 이동, 여기서는 c:\workspace\vue 로 지정

1
2
3
4
C:\Users\Admin>cd c:\workspace\vue
 
c:\workspace\vue>
 
Colored by Color Scripter
cs

: 작업할 myapp 프로젝트를 생성하기 위해 다음과 같이 vue cli 명령어 실행

1
2
c:\workspace\vue>vue create myapp
 
Colored by Color Scripter
cs

: 다음과 같이 선택 가능한 보기가 출력되며, 여기서는 "Manually select features"를 선택

1
2
3
4
5
Vue CLI v3.0.5
? Please pick a preset: (Use arrow keys)
  default (babel, eslint)
> Manually select features
 
Colored by Color Scripter
cs

: 기존에 선택된 Babel과 Linter / Formatter를 그대로 두고 추가로 스페이스 바 키를 눌러 Router 눌러 체크 후 엔터 키로 다음으로 진행

1
2
3
4
5
6
7
8
9
10
11
12
13
Vue CLI v3.0.5
? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
>(*) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing
 
Colored by Color Scripter
cs

: 히스토리 모드를 사용할 것인지를 묻는데 여기서는 n을 입력

1
2
3
4
5
Vue CLI v3.0.5
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n
 
Colored by Color Scripter
cs

* Y 대문자는 디폴트 값을 의미

: 초기값 그대로 ESLint with error prevention only를 선택 후 엔터

1
2
3
4
5
6
7
8
9
10
Vue CLI v3.0.5
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier
 
Colored by Color Scripter
cs

10.

: 초기값 그대로 엔터 키를 눌러 다음으로 진행

1
2
3
4
5
6
7
8
9
Vue CLI v3.0.5
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit
 
Colored by Color Scripter
cs

11.

: 초기값 그대로 엔터 키를 눌러 다음으로 진행

1
2
3
4
5
6
7
8
9
10
Vue CLI v3.0.5
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json
 
Colored by Color Scripter
cs

12.

: 이후 프로젝트도 같은 설정 값을 적용하여 진행할 것인지를 묻는데 여기서는 초기값 N을 입력 후 마무리

1
2
3
4
5
6
7
8
9
Vue CLI v3.0.5
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) N
 
Colored by Color Scripter
cs

13.

: 다음 URL을 통해 설치 진행할 것인지를 묻는데 어느 것을 선택해도 무관하므로 기본값으로 입력 후 다음으로 진행

1
2
3
4
5
6
7
8
Vue CLI v3.0.5
✨  Creating project in c:\workspace\vue\myapp.
🗃  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...
 
?  Your connection to the default npm registry seems to be slow.
   Use https://registry.npm.taobao.org for faster installation? (Y/n) Y
 
Colored by Color Scripter
cs

14.

: 다음과 같이 설치가 완료되면 선택한 설정값과 더불어 설치를 진행한 정보가 포함되어 출력됨

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
c:\workspace\vue>vue create myapp
 
 
Vue CLI v3.0.5
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Linter
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No
 
 
Vue CLI v3.0.5
✨  Creating project in c:\workspace\vue\myapp.
🗃  Initializing git repository...
⚙  Installing CLI plugins. This might take a while...
 
 
> yorkie@2.0.0 install c:\workspace\vue\myapp\node_modules\yorkie
> node bin/install.js
 
setting up Git hooks
done
 
added 1273 packages from 742 contributors in 33.648s
🚀  Invoking generators...
📦  Installing additional dependencies...
 
added 4 packages from 1 contributor in 10.284s
⚓  Running completion hooks...
 
📄  Generating README.md...
 
🎉  Successfully created project myapp.
👉  Get started with the following commands:
 
 $ cd myapp
 $ npm run serve
 
 WARN  Skipped git commit due to missing username and email in git config.
You will need to perform the initial commit yourself.
 
 
c:\workspace\vue>
 
Colored by Color Scripter
cs

* 위와 같이 설치가 정상적으로 끝나지 않고 진행 중 에러가 발생했을 시 점검 사항

> 관리자 모드로 실행하였는지 확인 필요

* 진행 중 에러가 발생했다면 생성된 myapp 폴더를 삭제 후 위의 과정을 다시 진행할 것을 권장

15.

: 생성한 프로젝트 폴더로 이동

1
2
3
4
c:\workspace\vue>cd myapp
 
c:\workspace\vue\myapp>
 
cs

16.

: 해당 프로젝트를 노드 패키지 관리자를 통해서 기동

1
2
c:\workspace\vue\myapp>npm run serve
 
Colored by Color Scripter
cs

17.

: 정상적으로 기동이 되었다면 다음과 같이 클라이언트 접속 정보를 확인할 수 있음

1
2
3
4
5
6
7
8
9
 DONE  Compiled successfully in 5273ms                                                                          17:12:51
 
  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.168.111:8080/
 
  Note that the development build is not optimized.
  To create a production build, run npm run build.
 
Colored by Color Scripter
cs

18.

: 클라이언트 접속 정보를 통해 다음과 같이 초기 화면 확인 가능

19.

: 정상적인 기동을 확인 후 서비스 중지, Ctrl + C 키를 입력

1
2
3
4
5
6
7
8
9
10
11
12
13
 DONE  Compiled successfully in 3218ms                                                                          17:54:03
 
  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.254.1:8080/
 
  Note that the development build is not optimized.
  To create a production build, run npm run build.
 
일괄 작업을 끝내시겠습니까 (Y/N)? Y
 
c:\workspace\vue\myapp>
 
Colored by Color Scripter
cs

20.

: 노드 패키지 매니저를 통해 jquery 패키지를 설치

1
2
3
4
5
6
7
8
9
10
11
12
c:\workspace\vue\myapp>npm install jquery
npm WARN babel-loader@8.0.4 requires a peer of @babel/core@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
 
+ jquery@3.3.1
added 1 package from 1 contributor and audited 14144 packages in 10.307s
found 0 vulnerabilities
 
 
c:\workspace\vue\myapp>
 
Colored by Color Scripter
cs

* 전역 설치가 아니므로 해당 프로젝트 내에 있는지 설치 전에 확인 필요

21.

: 노드 패키지 매니저를 통해 popper.js 패키지를 설치

1
2
3
4
5
6
7
8
9
10
11
12
c:\workspace\vue\myapp>npm install popper.js
npm WARN babel-loader@8.0.4 requires a peer of @babel/core@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
 
+ popper.js@1.14.4
added 1 package from 2 contributors and audited 14145 packages in 9.863s
found 0 vulnerabilities
 
 
c:\workspace\vue\myapp>
 
Colored by Color Scripter
cs

22.

: 노드 패키지 매니저를 통해 jquery 패키지를 설치

1
2
3
4
5
6
7
8
9
10
11
12
c:\workspace\vue\myapp>npm install bootstrap
npm WARN babel-loader@8.0.4 requires a peer of @babel/core@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
 
+ bootstrap@4.1.3
added 1 package from 2 contributors and audited 14146 packages in 9.749s
found 0 vulnerabilities
 
 
c:\workspace\vue\myapp>
 
Colored by Color Scripter
cs

* 위의 3가지 패키지를 한번에 설치하고 싶은 경우 다음과 같은 명령어로 일괄 설치 가능

1
2
c:\workspace\vue\myapp>npm install jquery popper.js bootstrap
 
Colored by Color Scripter
cs

23.

: 다음 진행 시 VS Code 툴을 사용할 예정이므로 미설치 시 하기의 링크를 클릭

> VSCodeUserSetup-x64-1.28.2 설치

: VS Code 설치 후 확장 팩 설치 필요 시 하기의 링크를 클릭

> VS Code Pack 설치

24.

: VS Code 내에서 myapp 폴더 열기 실행

25.

: /public/index.html 파일 열기

26.

: 하기의 URL에서 Material의 CDN 확인 가능

> https://google.github.io/material-design-icons/#getting-icons

27.

: /public/index.html 파일 내에 적절한 곳에 Material의 CSS CDN 복사 후 붙여넣기

27-1. 추가 전

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>myapp</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but myapp doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
 
Colored by Color Scripter
cs

27-2. 추가 후

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <title>myapp</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but myapp doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>
 
Colored by Color Scripter
cs

28.

: /src/main.js 파일 내에 추가 패키지 import

28-1. 추가 전

1
2
3
4
5
6
7
8
9
10
11
import Vue from 'vue'
import App from './App.vue'
import router from './router'
 
Vue.config.productionTip = false
 
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
 
Colored by Color Scripter
cs

28-2. 추가 후

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import Vue from 'vue'
import App from './App.vue'
import router from './router'
 
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.css'
 
Vue.config.productionTip = false
 
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
 
Colored by Color Scripter
cs

29.

: /src/views/Todo.vue 파일 생성

30.

: Todo.vue 파일 내에 다음과 같이 코드 작성

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
<template>
<div 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' placeholder="Title..." class="form-control" style="width:397px;" v-model="title">
      <button class="btn" style="background-color: rgb(217, 217, 217); color:#555;" v-on:click="add">
        Add
      </button>          
    </form>
  </div>
  <div style="width: 100%; text-align:left;">
    <div class="line" v-bind:class="{ done: line.isDone }" v-for="line in lines" v-bind:key="line.id">
      <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 clear" v-on:click="clear(line);">clear</i>
    </div>        
  </div>
</div>
</template>
 
<script>
 
// jquery 사용
const $ = require('jquery');
window.$ = $;
 
export default {
  data: function() {
    return {
      lines: [
        {id:1, isDone:false, title:"Hit the gym"},
        {id:2, isDone:true, title:"Pay bills"}
      ],
      title: ""
    }
  },
  methods: {
    add: function () {
      // 한줄 추가
      this.lines.push({isDone:false, title:this.title});
      // 초기화
      this.title = "";
    },
    change: function(line) {
      line.isDone = !line.isDone;
    },
    clear: function(line) {
      this.lines.splice(this.lines.indexOf(line), 1);
    }
  }          
}
</script>
<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>
 
Colored by Color Scripter
cs

31.

: /src/router.js 파일 열기

32.

: router.js 파일 내에 다음과 같이 코드 수정 후 저장

32-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
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
 
Vue.use(Router)
 
export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    }
  ]
})
 
Colored by Color Scripter
cs

32-2. 수정 후

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
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
 
Vue.use(Router)
 
export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    },
    {
      path: '/todo',
      name: 'todo',
      component: () => import('./views/Todo.vue')
    }
  ]
})
 
Colored by Color Scripter
cs

33.

: /src/App.vue 파일 열기

34.

: App.vue 파일 내에 다음과 같이 코드 수정 후 저장

34-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
<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
#nav {
  padding: 30px;
}
#nav a {
  font-weight: bold;
  color: #2c3e50;
}
#nav a.router-link-exact-active {
  color: #42b983;
}
</style>
 
Colored by Color Scripter
cs

34-2. 수정 후

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
<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/todo">Todo</router-link>
    </div>
    <router-view/>
  </div>
</template>
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
#nav {
  padding: 30px;
}
#nav a {
  font-weight: bold;
  color: #2c3e50;
}
#nav a.router-link-exact-active {
  color: #42b983;
}
</style>
 
Colored by Color Scripter
cs

35.

: CMD 창에서 해당 프로젝트를 배포 모드로 빌드, 정상적으로 완료 시 해당 빌드 정보 확인

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
c:\workspace\vue\myapp>npm run build
 
> myapp@0.1.0 build c:\workspace\vue\myapp
> vue-cli-service build
 
 
/  Building for production...
 
 WARNING  Compiled with 2 warnings                                                                              18:48:15
 
 warning
 
asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  js/chunk-vendors.ed2ca4b2.js (261 KiB)
 
 warning
 
entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  app (420 KiB)
      css/chunk-vendors.ac0ebac2.css
      js/chunk-vendors.ed2ca4b2.js
      css/app.aea4cb45.css
      js/app.7d3963e9.js
 
 
  File                                    Size              Gzipped
 
  dist\js\chunk-vendors.ed2ca4b2.js       261.01 kb         85.86 kb
  dist\js\app.7d3963e9.js                 6.96 kb           2.52 kb
  dist\js\chunk-05147150.db13258f.js      1.97 kb           0.97 kb
  dist\js\about.72f7e6cd.js               0.47 kb           0.33 kb
  dist\css\chunk-vendors.ac0ebac2.css     151.61 kb         21.38 kb
  dist\css\app.aea4cb45.css               0.42 kb           0.26 kb
  dist\css\chunk-05147150.4bf1e231.css    0.23 kb           0.17 kb
 
  Images and other types of assets omitted.
 
 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
 
 
c:\workspace\vue\myapp>
 
Colored by Color Scripter
cs

36.

: 수정 사항 반영이 되었는지 확인을 위해 로컬에서 해당 프로젝트 기동

1
2
c:\workspace\vue\myapp>npm run serve
 
Colored by Color Scripter
cs

37.

1
2
3
4
5
6
7
8
9
 DONE  Compiled successfully in 6046ms                                                                          18:52:03
 
  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.254.1:8080/
 
  Note that the development build is not optimized.
  To create a production build, run npm run build.
 
Colored by Color Scripter
cs

38.

: Home

: Todo

39.

: 위의 과정 중 정상적으로 빌드 과정을 끝마쳤다면 다음과 같이 dist 폴더 이하에 빌드된 파일 및 폴더 목록을 확인 가능

* S3 배포할 파일 및 폴더 목록

40.

: 위 과정을 정상적으로 진행하였다면 다음을 진행, Management Console 혹은 CLI 둘 중 한 가지 선택하여 진행

> AWS Management Console을 통한 S3 배포

> AWS CLI를 통한 S3 배포

41.

: Home

: Todo

저작자표시

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

Serverless, RDS를 사용한 MySQL 데이터베이스 구성 (0)	2018.10.21
AWS IAM 기존에 생성한 그룹의 정책 편집 (0)	2018.10.21
AWS CLI를 통한 Vue.js Web App 배포 (0)	2018.10.20
Wiindows에서 AWS CLI 관련 configure 구성 (0)	2018.10.20
AWS Region 및 Availability Zone (0)	2018.10.20

AWS CLI를 통한 Vue.js Web App 배포

2018. 10. 20. 22:30

사전 준비 사항

: 배포를 위한 Vue.js Web App 빌드된 파일 및 폴더

: AWS CLI 설치와 관련하여 하기의 링크 참조

> Windows에 AWS Command Line Interface 설치

: AWS IAM 계정 관련하여 하기의 링크 참조

> AWS IAM 사용자 및 그룹, 정책 생성

: 로컬 환경에서 AWS CLI configure 구성 관련하여 하기의 링크 참조

> Wiindows에서 AWS CLI 관련 configure 구성

: 배포할 프로젝트가 위치한 경로로 이동, 여기서는 "c:\workspace\vue\myapp"가 해당 프로젝트

1
2
3
4
C:\Users\Admin>cd c:\workspace\vue\myapp
 
c:\workspace\vue\myapp>
 
Colored by Color Scripter
cs

: vue cli를 통해 S3에 배포할 것이기 때문에 노드 패키지 매니저로 관련 플러그인 설치

1
2
3
4
5
6
7
8
9
10
11
12
c:\workspace\vue\myapp>npm add vue-cli-plugin-s3-deploy
npm WARN babel-loader@8.0.4 requires a peer of @babel/core@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
 
+ vue-cli-plugin-s3-deploy@3.0.0
added 13 packages from 64 contributors and audited 15270 packages in 13.744s
found 0 vulnerabilities
 
 
c:\workspace\vue\myapp>
 
Colored by Color Scripter
cs

: 설치한 플러그인을 호출하여 배포를 위한 설정을 진행

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
c:\workspace\vue\myapp>vue invoke s3-deploy
? How do you want to authenticate with AWS? Environment variables: AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY, etc.
? Which AWS region hosts the bucket? ap-northeast-2
? Name of the S3 bucket: bucket.myapp
? Create bucket if it does not exist? Yes
? Enable Static Site Hosting on bucket? Yes
? Filename of static index page: index.html
? Filename of static error page: index.html
? Where are your built files? dist
? Which files should be deployed? **
? Where in the bucket should the files be deployed? /
? Which Access Control List (ACL) setting should be applied to deployed files? public-read
? Enable PWA deploy (disables caching of certain files) options? No
? Enable invalidation of a CloudFront distribution on deploy? No
 
🚀  Invoking generator for vue-cli-plugin-s3-deploy...
✔  Successfully invoked generator for plugin: vue-cli-plugin-s3-deploy
   The following files have been updated / added:
 
     src/views/Todo.vue
     vue.config.js
     package-lock.json
     package.json
     public/index.html
     src/App.vue
     src/main.js
     src/router.js
 
   You should review these changes with git diff and commit them.
 
 
c:\workspace\vue\myapp>
 
Colored by Color Scripter
cs

: 배포를 위한 설정 정보를 바탕으로 CLI를 통해 순차적으로 배포 과정 진행

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
c:\workspace\vue\myapp>npm run deploy
 
> myapp@0.1.0 deploy c:\workspace\vue\myapp
> vue-cli-service s3-deploy
 
{"awsProfile":"default","region":"ap-northeast-2","bucket":"bucket.myapp","createBucket":true,"staticHosting":true,"staticIndexPage":"index.html","staticErrorPage":"index.html","assetPath":"dist","assetMatch":"**","deployPath":"/","acl":"public-read","pwa":false,"enableCloudfront":false,"uploadConcurrency":5,"pluginVersion":"3.0.0"}
 INFO  Options: {"awsProfile":"default","region":"ap-northeast-2","bucket":"bucket.myapp","createBucket":true,"staticHosting":true,"staticIndexPage":"index.html","staticErrorPage":"index.html","assetPath":"dist","assetMatch":"**","deployPath":"/","acl":"public-read","pwa":false,"enableCloudfront":false,"uploadConcurrency":5,"pluginVersion":"3.0.0"}
 INFO  Bucket: bucket.myapp does not exist, attempting to create.
 INFO  Bucket: bucket.myapp created.
 INFO  Static Hosting is enabled.
 INFO  Deploying 14 assets from c:\workspace\vue\myapp\dist\ to https://s3-ap-northeast-2.amazonaws.com/bucket.myapp/
 INFO  (1/14) Uploaded js/chunk-05147150.db13258f.js.map
 INFO  (2/14) Uploaded js/chunk-05147150.db13258f.js
 INFO  (3/14) Uploaded js/app.e6857a6f.js.map
 INFO  (4/14) Uploaded js/app.e6857a6f.js
 INFO  (5/14) Uploaded js/chunk-vendors.ed2ca4b2.js
 INFO  (6/14) Uploaded js/about.72f7e6cd.js
 INFO  (7/14) Uploaded css/chunk-05147150.4bf1e231.css
 INFO  (8/14) Uploaded img/logo.82b9c7a5.png
 INFO  (9/14) Uploaded js/about.72f7e6cd.js.map
 INFO  (10/14) Uploaded css/chunk-vendors.ac0ebac2.css
 INFO  (11/14) Uploaded css/app.aea4cb45.css
 INFO  (12/14) Uploaded index.html
 INFO  (13/14) Uploaded favicon.ico
 INFO  (14/14) Uploaded js/chunk-vendors.ed2ca4b2.js.map
 INFO  Deployment complete.
 
c:\workspace\vue\myapp>
 
Colored by Color Scripter
cs

: AWS Management Console에 접속하여 S3 확인

9-1. 배포 전

9-2. 배포 후

* 리전 설정 시 서울로 지정했음에도 불구하고 미국 동부 지역에 생성된 것으로 보아 버그가 아닐까 하는 의문...

> 위와 같은 일을 방지하기 위해 버킷을 AWS 관리 콘솔에 접속하여 서울로 지정하여 생성한 후 CLI로 배포를 하는 방법이 있으니 참고

10.

: 엔드포인트를 확인 후 접속

10-1. Home

10-2. Todo

저작자표시

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

AWS IAM 기존에 생성한 그룹의 정책 편집 (0)	2018.10.21
Vue.js Web App 생성 및 S3 배포 (2)	2018.10.20
Wiindows에서 AWS CLI 관련 configure 구성 (0)	2018.10.20
AWS Region 및 Availability Zone (0)	2018.10.20
AWS IAM 사용자 및 그룹, 정책 생성 (0)	2018.10.20

Wiindows에서 AWS CLI 관련 configure 구성

2018. 10. 20. 21:41

*사전 준비 사항

: AWS CLI 설치

: AWS IAM 사용자 생성

: AWS CLI 설치 확인

1
2
3
4
5
6
7
8
C:\Users\Admin>aws configure
AWS Access Key ID [None]: ____________________
AWS Secret Access Key [None]: ________________________________________
Default region name [None]: ap-northeast-2
Default output format [None]:
 
C:\Users\Admin>
 
Colored by Color Scripter
cs

* AWS IAM 사용자 생성 시 Access Key ID 및 Secret Access Key 발급됨

* ap-northeast-2는 서울, 각 region 표기와 관련하여 하기의 링크 참조

> AWS Region 및 AZ 참고

저작자표시

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

Vue.js Web App 생성 및 S3 배포 (2)	2018.10.20
AWS CLI를 통한 Vue.js Web App 배포 (0)	2018.10.20
AWS Region 및 Availability Zone (0)	2018.10.20
AWS IAM 사용자 및 그룹, 정책 생성 (0)	2018.10.20
Windows에 AWS Command Line Interface 설치 (0)	2018.10.20

AWS Region 및 Availability Zone

2018. 10. 20. 21:26

출처: https://docs.aws.amazon.com/ko_kr/AmazonRDS/latest/UserGuide/Concepts.RegionsAndAvailabilityZones.html

Region Name	Region	Endpoint	Protocol
미국 동부(오하이오)	us-east-2	rds.us-east-2.amazonaws.com	HTTPS
미국 동부(버지니아 북부)	us-east-1	rds.us-east-1.amazonaws.com	HTTPS
미국 서부(캘리포니아 북부)	us-west-1	rds.us-west-1.amazonaws.com	HTTPS
미국 서부(오레곤)	us-west-2	rds.us-west-2.amazonaws.com	HTTPS
아시아 태평양(뭄바이)	ap-south-1	rds.ap-south-1.amazonaws.com	HTTPS
Asia Pacific (Osaka-Local)	ap-northeast-3	rds.ap-northeast-3.amazonaws.com	HTTPS
아시아 태평양(서울)	ap-northeast-2	rds.ap-northeast-2.amazonaws.com	HTTPS
아시아 태평양(싱가포르)	ap-southeast-1	rds.ap-southeast-1.amazonaws.com	HTTPS
아시아 태평양(시드니)	ap-southeast-2	rds.ap-southeast-2.amazonaws.com	HTTPS
아시아 태평양(도쿄)	ap-northeast-1	rds.ap-northeast-1.amazonaws.com	HTTPS
캐나다(중부)	ca-central-1	rds.ca-central-1.amazonaws.com	HTTPS
중국(베이징)	cn-north-1	rds.cn-north-1.amazonaws.com.cn	HTTPS
중국(닝샤)	cn-northwest-1	rds.cn-northwest-1.amazonaws.com.cn	HTTPS
EU(프랑크푸르트)	eu-central-1	rds.eu-central-1.amazonaws.com	HTTPS
EU(아일랜드)	eu-west-1	rds.eu-west-1.amazonaws.com	HTTPS
EU(런던)	eu-west-2	rds.eu-west-2.amazonaws.com	HTTPS
EU(파리)	eu-west-3	rds.eu-west-3.amazonaws.com	HTTPS
남아메리카(상파울루)	sa-east-1	rds.sa-east-1.amazonaws.com	HTTPS

저작자표시

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

AWS CLI를 통한 Vue.js Web App 배포 (0)	2018.10.20
Wiindows에서 AWS CLI 관련 configure 구성 (0)	2018.10.20
AWS IAM 사용자 및 그룹, 정책 생성 (0)	2018.10.20
Windows에 AWS Command Line Interface 설치 (0)	2018.10.20
S3 버킷을 통해 정적 웹 사이트 호스팅 구성 및 Vue.js Web App 배포 (0)	2018.10.20

AWS IAM 사용자 및 그룹, 정책 생성

2018. 10. 20. 20:26

: 보안, 자격 증명 및 규정 준수 > IAM 클릭

: 좌측 메뉴에서 사용자 클릭

: 사용자 추가 버튼 클릭

: 사용자 이름 입력 및 엑세스 유형 선택 후 "다음: 권한" 버튼을 클릭

: 그룹 생성 후 해당 사용자를 추가하기 위해 "그룹 생성" 버튼 클릭

: 그룹 이름 입력 및 정책 필터를 검색하여 해당 정책을 선택 후 "그룹 생성" 버튼 클릭

: "다음: 검토" 버튼 클릭

: 해당 내용 확인 후 "사용자 만들기" 버튼 클릭

: 액세스 키 ID 및 비밀 액세스 키를 따로 기록 후 닫기 버튼 클릭

10.

: 생성 후 해당 사용자 및 그룹 확인

저작자표시

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

Wiindows에서 AWS CLI 관련 configure 구성 (0)	2018.10.20
AWS Region 및 Availability Zone (0)	2018.10.20
Windows에 AWS Command Line Interface 설치 (0)	2018.10.20
S3 버킷을 통해 정적 웹 사이트 호스팅 구성 및 Vue.js Web App 배포 (0)	2018.10.20
클라우드, S3를 사용한 정적 웹 페이지 구성 (0)	2018.10.14

PREV 1 2 3 NEXT

Another Windows

Cloud

AWS Serverless를 사용한 Web App 정보 시스템 구축

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

Serverless, S3를 사용한 정적 웹 페이지 구성

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

Serverless, Lambda와 API Gateway를 사용한 동적 웹 페이지 구성

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

Serverless, RDS를 사용한 MySQL 데이터베이스 구성

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

AWS IAM 기존에 생성한 그룹의 정책 편집

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

Vue.js Web App 생성 및 S3 배포

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

AWS CLI를 통한 Vue.js Web App 배포

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

Wiindows에서 AWS CLI 관련 configure 구성

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

AWS Region 및 Availability Zone

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

AWS IAM 사용자 및 그룹, 정책 생성

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

+ Recent posts

티스토리툴바