[팀 프로젝트 준비] Springboot VueJS AWS 세팅기

개발환경

Spring Boot 2.7
Gradle - Groovy
Java 11
JavaScript
VueJS 3.2.13
NodeJS v18.16.0
JUnit5
MongoDB
Axios
AWS EC2

Spring Project 생성

start.spring.io 에서 아래 이미지와 같이 프로젝트를 생성

VueJS 설치

Vue CLI를 활용해서 설치 , Vue 애플리케이션 개발시 기본적인 폴더 구조 , 라이브러리 등을 설정 참고] https://cli.vuejs.org/

npm install -g @vue/cli

npm 으로 Vue-CLI를 글로벌하게 설치한다는 뜻으로 이 프로젝트 외에도 다른 프로젝트에서 사용이 가능하다.

Vue 프로젝트 생성

vue create [frontend] 
[] - 프로젝트명

Vue 프로젝트 실행

cd frontend
npm run serve

생성한 프로젝트 폴더로 이동후에 npm run serve 명령어를 통해 서버를 실행한다.

백엔드 서버[SpringBoot]와 프론트 서버[VueJS]를 연동하는 이유

두 서버를 연동하지 않으면 VueJS를 이용해 만든 파일을 수정할때마다 새로 build 하고 또 결과물을 SpringBoot의 resources/static으로 이동시켜줘야 하기 때문이다.

개발환경에서는 SpringBoot 서버와 VueJS 서버를 켜서 port 두개를 두고 진행하지만 실 운영환경은 서버를 두개를 두긴 힘들기 때문에

연동을 통해서 VueJS의 빌드 결과물의 목적지를 SpringBoot의 resources/static으로 맞추고 실서버는 SpringBoot 서버 하나만 두도록 설정할 것이다. [ 출저는 정확히 기억이 나지않습니다.. 확인시 수정하겠습니다 ]

vue.config.js 파일 수정

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    transpileDependencies: true,
    outputDir: "../src/main/resources/static", // 빌드 타겟 디렉토리
    devServer: {
        port: 8082,
        proxy:{
            '/api':{
                // '/api' 로 들어오면 포트 8081(스프링 서버)로 보낸다
                target: 'http://localhost:8081',
                changeOrigin:true // cross origin 허용
            }
        }
    }
})

연동 API 테스트 - HomeController 생성

package study.demo.controller;

import lombok.extern.slf4j.Slf4j;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@Slf4j
@RequestMapping("/api")
public class HomeController {

    @GetMapping("test")
    public String home(){
        log.info("TEST");
        return "Hello";
    }


}

localhost:8082/api/test 로 접근을 하게 되면 Hello를 반환하게 됩니다.

AWS EC2 인스턴스 생성 및 디비 생성 [사진 많음] 23년 7월 사진

aws 회원가입은 영문주소 입력후 카드정보 입력과 전화번호 확인후 무료플랜 선택하시면 됩니다. 검색시 자료가 많아서 어렵지 않아요.

웹사이트 구성은 시간이 지남에 따라 달라질수 있습니다.

인스턴스 생성

인스턴스 시작 버튼

이렇게 하시면 인스턴스 생성은 끝이 납니다.

EIP 할당

고정 IP를 Elastic IP 탄력적 IP 라고 합니다.

연결후에 탄력적 IP가 잘 연결됬는지 확인합니다.

EC2 인스턴스까지 생성이 완료 되었습니다.

EC2 서버 접근(접속)

MAC & Linux 기준입니다.

AWS 와 같은 외부 서버로 SSH 접속을 하려면 매번 다음과 같은 긴 명령어가 필요합니다.

ssh -i pem 키 위치 EC2의 탄력적 IP 주소

쉽게 SSH 접속을 할수 있도록 설정하겠습니다.

다운받았던 pem 파일을 ~/.ssh 로 복사해 놓으면 ssh 실행시 pem 키 파일을 자동으로 읽어 접속을 진행합니다.

mkdir .ssh
cp pem 키를 내려받은위치 ~/.ssh/

chmod 600 ~/.shh/pem키이름

권한을 변경한 후에 ~/.ssh 디렉토리에 config 파일을 생성한다.

vim ~/.ssh/config

본인이 원하는 Host를 등록하는데 Host를 앞으로 접속할 키값이 된다.

#coinco-service
Host coinco-service
HostName 3.12.34.567
User ec2-user
IdentityFile ~/.ssh/coinco-service-key.pem
------------------------------------------------
# 주석
Host 본인이 원하는 서비스명
HostName ec2의 탄력적 IP 주소
User ec2-user
IdentityFile ~/.ssh/pem키 이름

생성된 config 파일은 실행 권한이 필요하므로 권한을 설정해줍니다.

chmod 700 ~/.ssh/config

#ssh config에 등록한 서비스명
ssh coinco-service

윈도우의 경우 putty사이트 에 접속해서 푸티(putty.exe , puttygen.exe) 다운로드를 하고 실행한다.

putty 의 경우 pem키로는 사용이 안되고 pem 키를 ppk 파일로 변환후해 해야한다.

puttygen이 이 과정을 진행하는 클라이언트 이다.

아마존 서버 생성시 꼭 해야하는 설정

이 설정은 자바 기반의 웹 애플리케이션이 작동해야 하는 서버들에선 필수로 설정이 되야한다

자바 프로젝트 버전 설치
타임존 설치
호스트네임 변경

Java 설치

yum의 경우 설치가능한 JDK가 1.8 까지만 존재하므로 다운받기 위해선 다른 방법을 사용한다

Amazon에서 제공하는 OpenJDK Amazon Coretto를 다운받아 설치한다.

sudo yum update
yum list java*jdk-devel

# aws coreetto 다운
sudo curl -L https://corretto.aws/downloads/latest/amazon-corretto-11-x64-linux-jdk.rpm -o jdk11.rpm

# jdk11 설치
sudo yum localinstall jdk11.rpm

# jdk version 선택
sudo /usr/sbin/alternatives --config java

# java 버전 확인
java --version

# 다운받은 설치키트 제거
rm -rf jdk11.rpm

타임존 변경

기본 서버 시간은 미국(UTC 세계 표준 시간이므로 한국 시간과 9시간 차이가 나기 때문에 한국시간대로 변경해야한다.

sudo rm /etc/localtime
sudo ln -s /usr/share/zoneinfo/Asia/Seoul /etc/localtime
# 타임존 확인
date

HostName 변경

현재 접속한 서버의 별명 등록 , 실무에선 여러대의 서버가 작동되므로 이를 구분하기 위해 호스트 네임 필수 등록

sudo vim /etc/sysconfig/network

HOSTNAME=서비스명 추가

####
# 버전이 다른듯 함
sudo vi /etc/hostname
사용할 호스트명 입력

hostnamectl set-hostname hostname명

hostname 변경후에 서버를 리부팅 해야한다.

sudo reboot
hostname # hostname 확인

HostName 등록후 /etc/hosts 에 변경한 hostname을 등록

host 주소를 찾을때 가장 먼저 검색해보는 것이다.

sudo vim /etc/hosts

curl 등록한 호스트이름

등록이 정상적으로 되었다면 Failed to connect to hostname 와 같은 에러가 발생하고

잘못 등록이 되었다면 찾을수 없는 주소라는 에러가 발생한다.

AWS RDS 데이터베이스 환경 세팅

데이터베이스 생성 버튼을 누르면 생성되고 몇분이 소요된다.

RDS 생성후 몇가지 설정은 필수로 해야한다.

타임존 : 시간 설정
Character Set : 문자 인코딩 설정
collation : 데이터의 정렬기준을 위한 설정

파라미터 그룹 생성은 RDS DB버전하고 맞춰야한다.

생성된 파라미터 그룹을 클릭해서 상세페이지로 이동하여 파라미터 편집을 클릭한다.

time_zone 검색후 Asia/Seoul 선택한다.

Character Set 의 경우 utf8은 이모지 저장 불가하고 utf8mb4는 이모지 저장 가능

utf8mb4

character_set_client
character_set_connection
character_set_database
character_set_filesystem
character_set_results
character_set_server

utf8mb4_general_ci

collation_connection
collation_server

변경사항 저장후에 파라미터를 적용해줍니다.

수정 클릭하여 들어가주고

서비스 오픈중이 아니기 때문에 즉시적용을 해도된다.

간혹 제대로 반영이 되지 않을경우 (적용이 바로되지 않는경우)가 있기 때문에 재부팅도 진행해준다.

앞서 적용했던 파라미터중 character_set_database , collation_connection 2가지 항목은 MariaDB에서만 RDS파라미터 그룹으로는 변경이 되지 않기때문에 DB연결후 직접 쿼리를 실행해서 변경해줘야 한다.

ALTER DATABASE 데이터베이스명
CHARACTER SET = 'utf8mb4'
COLLATE = 'utf8mb4_general_ci';

RDS 접근

RDS에 접근하기 위해서는 RDS의 보안 그룹에 본인 PC의 IP를 추가하여야 한다.

VPC 보안 그룹을 선택한뒤

하단의 인바운드 규칙을 편집해 줍니다.

RDS 정보 페이지에서 엔드포인트 및 포트 확인후에 디비 툴로 연결하고 설정이 잘되었는지 확인합니다.

-- 쿼리가 수행될 database 선택
use 데이터베이스명; -- 데이터베이스명

-- 현재의 character_set , collation 설정 확인
show variables like 'c%';

-- MariaDB 에서만 RDS 파라미터 그룹으로 변경이 안됨
ALTER DATABASE 데이터베이스명
    CHARACTER SET = 'utf8mb4'
COLLATE = 'utf8mb4_general_ci';

-- time_zone 확인
select @@time_zone, now();

MySQL CLI 설치

EC2에서 RDS접근을 확인하기 위해 mysql 을 설치합니다

sudo yum install mysql

-- 설치후 RDS 접근
mysql -u 계정 -p -h Host주소
mysql -u admin -p -h

Vue Axios 설정

npm install axios -- axios 설치

axios 전역으로 설정하기 위해 생성한 Vue 프로젝트 파일중 main.js 파일을 수정합니다.

-- 기존
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')
-- 수정
import { createApp } from 'vue'
import App from './App.vue'
import axios from "axios";

const app = createApp(App);
app.config.globalProperties.axios = axios;
app.mount('#app')

Axios 사용시에는 Vue Component 에서 this.axios로 접근이 가능하다.

getPage(){
      return this.axios
          .get('/api/test')
          .then(res => {
            console.log(res.data);
          }).catch(err => {
            console.log(err);
          })
    }

Vue Router

Vue add 명령어는 일련의 작업들을 처리하고 App.vue 와 main.js 가 변경되고 기존 작업한 내용들이 없어지므로

npm install 명령어를 사용한다.

npm install vue-router --save

vue add router

Vuetify 설정

vue add vuetify

저작자표시 비영리 동일조건