1.


2.

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

3.

4.
 : 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

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

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

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

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

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

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

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

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

25.

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

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


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


40.

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

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

+ Recent posts

티스토리툴바