Vue.js Web App 생성 및 S3 배포

1.

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

 : Node.js 설치 및 환경 구축

2.

3.

 : Vue CLI 설치

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
 

4.

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

C:\Users\Admin>cd c:\workspace\vue
 
c:\workspace\vue>
 

5.

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

c:\workspace\vue>vue create myapp
 

6.

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

Vue CLI v3.0.5
? Please pick a preset: (Use arrow keys)
  default (babel, eslint)
> Manually select features
 

7.

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

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
 

8.

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

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
 

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

9.

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

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
 

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: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>(*) Lint on save
 ( ) Lint and fix on commit
 

11.

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

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
 

12.

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

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
 

13.

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

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
 

14.

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

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>
 

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

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

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

15.

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

c:\workspace\vue>cd myapp
 
c:\workspace\vue\myapp>
 

16.

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

c:\workspace\vue\myapp>npm run serve
 

17.

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

 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.
 

18.

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

19.

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

 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>
 

20.

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

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>
 

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

21.

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

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>
 

22.

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

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>
 

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

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

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. 추가 전

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

 27-2. 추가 후

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

28.

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

 28-1. 추가 전

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

 28-2. 추가 후

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

29.

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

30.

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

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

31.

 : /src/router.js 파일 열기

32.

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

 32-1. 수정 전

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

 32-2. 수정 후

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

33.

 : /src/App.vue 파일 열기

34.

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

 34-1. 수정 전

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

 34-2. 수정 후

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

35.

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

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>
 

36.

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

c:\workspace\vue\myapp>npm run serve
 

37.

 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.
 

38.

 : Home

 : Todo

39.

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

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

40.

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

  > AWS Management Console을 통한 S3 배포

  > AWS CLI를 통한 S3 배포

41.

 : Home

 : Todo