간단한 AWS 웹 서버 구축 with mongodb (feat. Github and Docker)

오랫만에 블로그에 게시글을 업데이트 해봅니다.

최근에 AWS 로 서버 구축하는 것을 테스트 해본 것이 있어서,

이번 게시글에서는 AWS 를 사용하여 간단하게 웹 서버 구축하는 것을 진행하려고 합니다.

AWS EC2 서버 프리티어 버전으로 1대 발급 받은 후 해당 서버에 java, maven, git, docker, docker-compose 를 설치한 후 github에서 SpringBoot 로 만들어둔 테스트 프로젝트를 받아 빌드하고 실행을 하도록 하겠습니다.

또 마찬가지로 github 에서 docker-compose 파일을 받아 실행하여, mongodb 실행하는 것 까지 해보겠습니다.

AWS 계정을 신규로 만들게 되면 프리티어 서비스의 경우 12개월 무료로 사용 가능합니다.

기존의 이미 계정을 만드셔서 12개월이 지난 경우 새로운 이메일로 계정을 만들면 다시 12개월 사용이 가능합니다. (아마도?)

우선 AWS 가입을 해야하는데 가입하기 위해서는 해외결제가 가능한 카드 번호를 필수로 입력해야합니다.
AWS 의 경우 실제 비용 발생이 될 수 있기 때문에, 매우 조심하셔야 합니다. 테스트 종료 후 서버를 반드시 중지/종료 해두시길 권장합니다.
AWS 가입하는 방법에 대해서는 다른 게시글을 참조 부탁드립니다.

AWS 계정을 만들었다고 생각하고 진행하도록 하겠습니다.

# AWS Linux EC2 Server 생성

인스턴스 생성

AWS 서비스 중 "EC2" 를 선택하고, "인스턴스" 메뉴를 선택합니다.계정을 만들었다고 생각하고 진행하도록 하겠습니다.

우측 상단 쪽에 보시면 "인스턴스 시작" 이라는 버튼이 있고 해당 버튼을 누르면 인스턴스 생성을 할 수 있습니다.

[서비스] > "EC2" 선택 >  [인스턴스] > [인스턴스시작]

가장 상단에 있는 "Amazon Linux" 를 선택하여 서버를 만듭니다.

여러개의 서버 스펙을 선택할 수 있는 있는 Grid 가 보일텐데 여기에서 공짜로 사용할 수 있는 것은 "프리 티어 사용 가능" 이 붙어 있는 서버만 가능합니다. 

CPU1 코어에, 1기가 메모리만 할당 받을 수 있습니다. (너무 사양이 부족하지만... 테스트니까)

우측 하단에 보면 "다음: 인스턴스 세부 정보 구성" 버튼을 눌러 다음 단계로 이동합니다.

프리티어를 사용하기 위해서는 설정을 할 수 있는 것이 없기는 한데, 스토리지 용량 정도는 약간 증설 가능하긴 합니다.

하지만 그냥 진행하도록 하겠습니다.

"보안 그룹 구성"에서 방화벽 설정을 할 수 있게 됩니다. 

해당 탭에서 밖으로 몇가지 포트를 설정하도록 하겠습니다. (실제로 운영을 할 경우 이렇게 아무렇게나 포트 오픈하면 안돼요)

키 페어를 생성을 하고 다운받으신 후 "인스턴스 시작"을 누르면  서버가 구동됩니다.

해당 키 페어는 서버에 접속할 때 필요하니, 저장 위치를 기억하셔야 합니다.

인스턴스 상태가 "실행 중" 상태가 되게 되면 퍼블릭 IP를 조회할 수 있습니다.

서버 접속

퍼블릭 IP를 통해 SSH 를 접속하도록 하겠습니다. 접속 시 아까 저장한 인증서 파일의 경로를 같이 적어둬야 합니다.

ssh 연결 명령어 : ssh -i {인증서경로} ec2-user@{아이피}
                           (ex: ssh -i ~/Downloads/aws-test.pem ec2-user@13.209.19.10)

SSH 에서 "yes" 라고 적으면 서버에 접속이 됩니다.

# 테스트 웹 서버 및 MongoDB 구축

git 설치

터미널에서 아래 명령어를 수행하여 git 을 설치합니다.

sudo yum install git

git clone 수행

테스트용으로 만들어둔 backend / mongodb github 프로젝트를 clone 합니다.

대충 폴더를 만들어주고, 해당 폴더에서 아래 git clone 명령어를 수행합니다.

git clone https://github.com/vackjangmi/sooyeol-test-mongodb

git clone https://github.com/vackjangmi/sooyeol-test-server

java 11 설치

테스트로 만든 backend 프로젝트의 경우 SpringBoot / java 11 로 되어 있기 때문에 java 11 버전이 설치가 필요합니다.

기본적으로 aws-linux 에는 java 1.7 이 설치되어 있습니다.

아래 명령어를 수행하여 java 11을 설치하고 version 을 확인합니다. (java 11버전으로 나오면 정상 설치된 것입니다.)

sudo rpm --import https://yum.corretto.aws/corretto.key

sudo curl -L -o /etc/yum.repos.d/corretto.repo https://yum.corretto.aws/corretto.repo

sudo yum install -y java-11-amazon-corretto-devel

java -version

maven 설치

SpringBoot 프로젝트를 빌드하기 위해서는 maven 이 필요하기 때문에 아래 명령어를 수행하여 maven도 설치를 합니다.

sudo wget http://repos.fedorapeople.org/repos/dchen/apache-maven/epel-apache-maven.repo -O /etc/yum.repos.d/epel-apache-maven.repo

sudo sed -i s/\$releasever/6/g /etc/yum.repos.d/epel-apache-maven.repo

sudo yum install -y apache-maven

mvn --version

spring boot maven build

maven 이 설치가 다 됐으면 backend 프로젝트 (sooyeol-test-server) 로 이동하여 아래 명령을 수행하여 빌드 합니다.

mvn clean package

docker 설치

github 에 올려둔 테스트용 mongodb 의 경우 docker 로 구성이 되어 있기 때문에 docker 설치가 필요합니다.

아래 명령어를 수행하여 docker 를 설치를 하고 docker service 를 실행합니다.

sudo yum install docker

sudo service docker start

보너스)

docker 의 경우 특별한 작업을 해주지 않을 경우 sudo 명령을 통해 실행해야하는데, 매번 그렇게 하기 불편함이 있습니다.

그렇기 때문에 아래 명령어를 수행하여 sudo 없이 docker 명령어를 수행하게 설정합니다.

해당 명령어를 수행 후 터미널을 종료 후 다시 접속해야 (세션 재 생성) 정상 동작합니다.

sudo usermod -aG docker $USER

docker-compose 설치 & root 계정 활성화

github에 올려둔 테스트용 mongodb 스크립트의 경우 docker-compose 로 작성되어 있습니다.

해당 스크립트에 대한 설명은 별도로 하지 않도록 하겠습니다.

docker-compose 를 설치하기 위해서는 root 권한이 필요합니다.

아래 명령어를 수행하여 root 권한 획득 후 root 계정으로 전환합니다.

sudo passwd root

su root

root 계정으로 전환 완료 후 아래 명령어를 수행하여 docker-compose 를 설치하고, exit를 수행하여 다시 원래 ec2-user 계정으로 전환합니다.

sudo curl -L https://github.com/docker/compose/releases/download/1.25.0-rc2/docker-compose-`uname -s`-`uname -m` -o /usr/local/bin/docker-compose

sudo chmod +x /usr/local/bin/docker-compose

mongodb docker 실행

정상적으로 docker 와 docker-compose 가 설치가 됐으면 mongodb 프로젝트로 이동하여 아래 명령어를 수행하여 docker 컨테이너를 실행하고, 정상적으로 실행됐는지 확인합니다.

docker-compose up --build -d

docker ps

docker 가 정상적으로 실행이 된것이 확인 됐으면, 웹 브라우저를 열어 http://{ip주소}:9018 로 접속합니다.

backend 쪽 api 를 테스트하기 위해서는 "sooyeol" 이라는 database를 만들고, "person" 이라는 collection을 만들어야 합니다.

spring boot 실행

backend 프로젝트의 maven 빌드 된 폴더 (target 폴더)로 이동하여 아래 명령어를 수행하여 SpringBoot 를 실행합니다.

nohup java -jar xxx.jar &

서버 테스트

http://{ip주소}:8000/api/person 으로 접속해보면 테스트 페이지가 열립니다.

해당 페이지가 열리면 정상적으로 서버가 올라온 것입니다.

swagger-ui 를 적용해둔 소스이기 때문에 아래 url 로 접속하시면 api 문서도 같이 확인 가능합니다.

http://{ip주소}:8000/swagger-ui.html

http://{ip주소}:8000/api/person 에 대해서 POST (생성) / PUT (수정) / DELETE(삭제) api 를 테스트해볼 수 있습니다.

POST / PUT / DELETE 등을 수행한 후 http://{ip주소}:9018 사이트에서 데이터가 잘 반영 됐는지 확인 가능합니다.

Vue 프로젝트 생성 및 js 파일로 Vue Componet (library) 만들기

제가 vue 를 쓰는 방법은 전체 vue 앱을 만드는 형태가 아닌 일부 part 만 vue로 변환해서 사용합니다.

우선 vue를 쓰게 된 이유 부터 여러 사람이 쉽고 빠르게 개발하기 위해서 사용을 했습니다.

그러나 .vue 로 된 형태의 전체 앱으로 만들게 되면 새로운 IDE 를 사용해야 한다거나 서버를 nodeJS 서버를 사용해야 한다거나 등의 문제가 발생하기도 하기 때문입니다.

또한 기존의 개발되어 있던 사이트를 전체로 갈아 엎어버리지는 못하기도 하지요.

그렇기 때문에 일부의 영역만 vue 로 개발을 하게 됩니다. 또한 그렇게 하다보면 component 화 시켜서 재사용을 하고 싶어질 때도있습니다.

물론 쌩으로 프로젝트에 컴포넌트를 만들어서 사용할 수는 있으나 재사용성이나, 코드확인의 번거로움이 있을 수 있지요.

js 형태로 Component 를 만들게 되면 templete 를 확인하기가 어렵습니다.

참고 : Vue에서 컴포넌트 템플릿을 정의하는 7가지 방법

그러나 element-ui 같이 js import 를 통해 vue component 를 사용한다면 어떨까란 생각이 들었고, 

이것저것 찾아봤지만 제가 딱 원하는 형태의 것을 검색하지 못했습니다. (제 검색실력이 부족해서일수도 있고..)

그래서 이 글을 정리하게 됐습니다.

이 글은 element-ui 같은 library componet 를 개발하기 위한 예제를 수행해볼 수 있는 글입니다.

어렵지 않게 가능할 것이고, 이 방법을 익히면 생각보다 유용할 것 같습니다.

# 사전준비

nodeJs

npm

# Vue Cli 설치 및 테스트

vue-cli 설치

아래 명령어를 사용하여 global 영역에 vue-cli 를 설치합니다.

npm install -g @vue/cli

무언가를 다운로드 하고 설치하는 것을 확인할 수 있습니다.

설치가 완료 되면 아래와 같은 화면이 나타납니다.

vue-cli 설치 확인

제대로 설치 됐는지 확인하기 위해서는 아래 명령어를 사용합니다.

아래 이미지와 같이 vue/cli 관련된 내용들이 나오면 정상 설치 된 것입니다.

npm -g list | grep vue

# Vue 프로젝트 생성 (vue-cli or vue ui)

vue 프로젝트를 생성하는 것은 cli 와 ui 방식으로 하는 두가지 방식이 있습니다.

ui 방식은 아직 beta 이지만, 윈도우를 주로 사용한 입장에서는 뭔가 더 알기 쉽게 생성이 가능한 것 같아서 추가로 정리해 둡니다.

vue-cli 를 통한 생성

cli를 통한 설치를 진행하고자 하면 아래 명령어를 통하여 프로젝트를 생성합니다.

vue create {프로젝트명}

빠른 테스트를 위하여 default로 선택합니다

vue-cli 설치 할 때 처럼 무언가를 다운로드하고 프로젝트를 구성하는 것을 확인할 수 있습니다.

다운로드 및 프로젝트 구성이 완료 되면 아래와 같이 화면에 나타납니다.

제일 마지막에 적혀 있는 것 처럼 '생성한 프로젝트명' 으로 폴더가 생기고, 해당 폴더에서 실행하면 테스트 구동이 됩니다.

설명에 적혀 있었던 대로 아래 명령어를 수행합니다.

npm run serve

해당 명령어를 수행하면 nodeJS 로 구성된 웹 서버를 구동시켜 줍니다.

그럼 아래와 같이 local URL 을 노출 시켜 주는데 브라우저를 통하여 해당 url 로 접속합니다.

정상적으로 테스트 페이지가 열리는 것을 확인할 수 있습니다.

vue ui 를 통한 생성

아래 명령어를 수행하면 vue ui 웹 화면이 열립니다.

vue ui

아래와 같은 창이 열리게 되고 "+ 새 프로젝트를 만들어보세요" 버튼을 클릭하여 새로운 프로젝트를 생성할 수 있습니다.

프로젝트 폴더를 지정하고 git 연결은 하지 않도록 하고.. 나머지 옵션은 뭐 대충 기본으로 선택해서 진행합니다.

프리셋도 cli 때와 마찬가지로 default 로 진행합니다.

로딩 이미지가 나오고 조금 기다리면 아래와 같이 프로젝트가 생성 된 것을 확인할 수 있습니다.

test-componet 폴더가 생성이 되고 해당 폴더 밑에 파일도 정상적으로 된 것을 확인할 수 있습니다.

vue ui 를 사용했으니까 실행까지 ui 를 통해 진행해보도록 하겠습니다.

작업목록 > serve > 실행 을 하면 "npm run serve" 가 수행이 되어 서버가 실행되는 것을 확인할 수 있습니다.

# component js 로 만들기 예제

IDE 를 이용하여 생성된 test-component 를 열어 줍니다.

저는 VS Code 를 사용하여 열었습니다. 

우선 자동으로 생성 됐던 "App.vue", "components/HelloWorld.vue" 파일을 삭제하고 시작하겠습니다.

그 다음 테스틀 위한 "components/firstComponent.vue", "components/secondComponent.vue" 파일을 생성하겠습니다.

하나의 프로젝트, 즉 1개의 js library 안에 여러개의 component를 구현하기 위해 2개의 component를 생성합니다.

components/firstComponent.vue

<template>
  <div class="firstComponent">
    <h1>First Component</h1>
    <span>{{message}}</span>
  </div>
</template>

<script>
export default {
  name: 'firstComponent',
  props: {
    message: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

components/secondComponent.vue

<template>
  <div class="secondComponent">
    <h1>Second Component</h1>
    <div v-for="item in items" v-bind:key="item">
      {{item}}
    </div>
  </div>
</template>

<script>
export default {
  name: 'secondComponent',
  props: {
    items: Array
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

생성한 component 를 import 하도록 "main.js" 파일을 아래와 같이 수정합니다.

코드 설명을 대충 하면 firstComponent 와 secondComponent 를 import 해서 각각의 component를 Vue.component install 하는 코드 입니다. 

나중에 component 가 또 추가가 되면 import 하는 부분과 const components 변수, export default 부분에 추가를 해주면 됩니다.

main.js

import First from './components/firstComponent.vue'
import Second from './components/secondComponent.vue'

const components = [
  First,
  Second
];

const install = function(Vue) { 
  components.forEach(component => {
    Vue.component(component.name, component);
  });
};

/* istanbul ignore if */
if (typeof window !== 'undefined' && window.Vue) {
  install(window.Vue);
}

export default {
  First,
  Second
}

마지막으로 build 하는 명령어를 추가하기 위해 "package.json" 파일을 수정합니다.

"scripts" 에 아래와 같이 "libbuild" 추가합니다.

"libbuild": "vue-cli-service build --target wc --name test-component 'src/main.js'"

제가 대충 구분을 하기 위해서 libbuild 라고 추가 했는데 본인이 생각하는 prefix 를 사용하시면 되겠습니다.

vue-cli-service 명령어에 포함되는 --name 은 생성한 component 프로젝트 명이어야 하고, 아까 수정한 main.js 파일을 빌드해야 합니다.

package.json

{
  "name": "test-component",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "libbuild": "vue-cli-service build --target wc --name test-component 'src/main.js'"
  },
  "dependencies": {
    "core-js": "^3.4.3",
    "vue": "^2.6.10"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-plugin-eslint": "^4.1.0",
    "@vue/cli-service": "^4.1.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.6.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

아래 명령어를 수행하여 빌드를 진행합니다.

npm run libbuild

빌드가 완료 되면 dist 폴더에 생성되는 것을 확인할 수 있습니다.

빌드가 되면 demo.html 파일도 같이 생성 되는데, 이 파일은 외부 lib 형태의 vue 예제로 만들어주지는 않습니다.

그래서 아래와 같이 수정하여 외부 component 처럼 사용할 수 있는 것을 테스트 해 볼 수 있습니다.

dist/demo.html

<meta charset="utf-8">
<title>test-component demo</title>
<script src="https://unpkg.com/vue"></script>
<script src="./test-component.min.js"></script>


<div id="app">
    <first-component v-bind:message="message"></first-component>
    <second-component v-bind:items="items"></second-component>
</div>
<script>
     var vue = new Vue({
        el : "#app",
        data : function() {
            return {
                message : "test",
                items : [ "item1", "item2", "item3", "item4" ]
            }
        }
     });
</script>