1.

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


2.

 : 좌측 메뉴에서 그룹 클릭


3.

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


4.

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


5.

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

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


6.

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


7.

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


8.

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

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


9.

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



저작자표시

'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

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

2.

3.
 : 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
 
cs

4.
 :작업할 폴더의 경로로 이동, 여기서는 c:\workspace\vue 로 지정
1
2
3
4
C:\Users\Admin>cd c:\workspace\vue
 
c:\workspace\vue>
 
cs

5.
 : 작업할 myapp 프로젝트를 생성하기 위해 다음과 같이 vue cli 명령어 실행
1
2
c:\workspace\vue>vue create myapp
 
cs

6.
 : 다음과 같이 선택 가능한 보기가 출력되며, 여기서는 "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
 
cs

7.
 : 기존에 선택된 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
 
cs

8.
 : 히스토리 모드를 사용할 것인지를 묻는데 여기서는 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
 
cs
* Y 대문자는 디폴트 값을 의미

9.
 : 초기값 그대로 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
 
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
 
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
 
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
 
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
 
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>
 
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
 
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.
 
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>
 
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>
 
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>
 
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>
 
cs

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

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


23.

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

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


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>
 
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>
 
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')
 
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')
 
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>
 
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')
    }
  ]
})
 
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')
    }
  ]
})
 
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>
 
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>
 
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>
 
cs


36.

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

1
2
c:\workspace\vue\myapp>npm run serve
 
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.
 
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


사전 준비 사항

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


1.

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

  > Windows에 AWS Command Line Interface 설치


2.

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

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


3.

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

  > Wiindows에서 AWS CLI 관련 configure 구성


4.


5.

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

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

6.

 : 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>
 
cs


7.

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

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>
 
cs

8.

 : 배포를 위한 설정 정보를 바탕으로 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>
 
cs


9.

 : 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


*사전 준비 사항

 : AWS CLI 설치

 : AWS IAM 사용자 생성


1.


2.

 : AWS CLI 설치 확인


3.

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>
 
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


출처: 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


1.

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


2.

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


3.

 : 사용자 추가 버튼 클릭


4.

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


5.

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


6.

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


7.

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


8.

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


9.

 : 액세스 키 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


* Windows 10 Pro


1.

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

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


2.


3.


4.


5.


6.


7.


8.


9.



저작자표시

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

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


1.

 : 스토리지 > S3 클릭


2.

 : 버킷 만들기 버튼 클릭


3.

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


4.

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


5.

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


6.

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


7.

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


8.

 : 상단에 속성 탭 클릭


9.

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


10.

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

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

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


11.

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


12.

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

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


13.

 : 다음 버튼 클릭


14.

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


15.

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


16.

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


17.


18.

 : Home


 : Todo



저작자표시

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

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


1.

 : vs code 실행


2.

 : Ctrl + Shift + X 키 혹은 좌측 탭에 확장 버튼을 클릭


3.

 : 작업에 적합한 플러그인 혹은 팩을 검색 후 설치 버튼 클릭


4.

 : 설치 이후 다시 로드 혹은 활성화하려면 다시 로드 클릭

* 이외에도 추가적으로 필요한 플러그인 및 팩이 있다면 위와 같은 과정으로 설치 후 다시 로드를 진행



저작자표시

'Tools > VS Code' 카테고리의 다른 글

VSCodeUserSetup-x64-1.28.2 설치  (0) 2018.10.20

* Windows 10 Pro


1.

 : https://code.visualstudio.com/download

 : Windows 버튼을 클릭 시 기본 64bit 버전을 내려받음


2.


3.


4.


5.


6.

 : 추가할 작업이 있을 경우 선택, 여기서는 그대로 진행


7.


8.


9.


10.



저작자표시

'Tools > VS Code' 카테고리의 다른 글

VS Code Extensions  (0) 2018.10.20

+ Recent posts

티스토리툴바