Spring Boot와 Vue를 활용한 CRUD가 가능한 웹페이지 만들기(4) - 배포

목차 - https://okane-on-cliff.tistory.com/227

 

차례는 아래와 같다

1. ec2 구축
2. vue-cli 빌드
3. spring-boot 빌드

 

1.ec2 구축

(1)먼저 인스턴트 부터 만든다.

그냥 만들면 되는데 몇가지 짚고 넘어가지면

운영체제 - ubuntu

키페어 - ppk로

네트워크 설정은 편집에서 '보안 그룹 규칙추가' 후 spring-boot의 application.properties에서 할당한 port번호를 Port range에 적어서 포트를 열어준다.

스토리지 구성은 30GB로 해준다.

 

(2)Putty를 통해 22번 포트로 인스턴스에 접속한다.

ㄱ.푸티 설치, 실행

Putty는 검색해서 다운 받으면 된다.

Putty실행

 

ㄴ.푸티 설정

이후 (Category)Session 에서 Host Name 은 EC2의 퍼블릭 IPv4 주소 붙히고

(Category)Window-Apperance 에서 폰트 크기를 조정하고

(Category)Window Colours에서 Default Foreground는 글자색 - 0,0,0으로 해주고, Default Background는 배경색으로 255,255,255 으로 설정해준다.

마지막으로 (Category)Connection - SSH - Auth - Credentials 의 Private key file for authentication에서 인스턴스 생성시 설정한 KeyPair를 지정해 준다.

이후 Session으로 돌아와 저장하고 오픈한다

 

ㄷ.인스턴트 환경구축

로그인 아이디는 무조건 ubuntu다

 

이제 인스턴트에 필요한 환경을 구축해주자

필요한 환경을 구축하는 방법은

1. 카카오 저장소로 저장소 변경
2. java 8 jdk 설치
3. mvn 설치
4. mysql 설치, 계정 만들기, 테이블 만들기

먼저 가장 중요한 기억할 것은 이번에도 실수를 많이 했는데 vi에서 빠져나올땐 ctrl + c로 하는게 아니라 :wq! 나 :q! 같이 정상적으로 종료해야만 한다.

 

카카오 저장소 변경을 위한 것

//vi로 sources.list 열기
$ sudo vi /etc/apt/sources.list

//vi안에서 두 ':'부터 시작하는 아래의 명령어 입력해서 수정 저장 빠져나오기
:%s/kr.archive.ubuntu.com/mirror.kakao.com/
:wq!

//저장소 업데이트
$ sudo apt-get update

자바와 maven 설치

$ sudo apt-get install openjdk-8-jdk
$ sudo apt install maven

mysql 설치

//mysql 설치
$ sudo apt-get install mysql-server

//로그인
$ sudo /usr/bin/mysql -u root -p
// 비밀번호는 없으니 비밀번호 입력해라고 하면 그냥 엔터

//계정 생성 및 권한 부여
CREATE USER 'testuser'@'localhost' IDENTIFIED BY 'mysql비번'
GRANT ALL PRIVILEGES ON 데이터베이스이름[여기 그냥 *해도됨].* FOR'testuser'@'localhost';

//이제 테이블 만들면됨

 

2.vue-cli 빌드

가. 통신하는 부분의 localhost 변경

어떻게 하는게 좋은 방법인지는 모르겠지만 axios로 localhost 호출하는 부분을 모두 인스턴스의 퍼블릭ip로 변경해 줘야 한다. 차라리 다음엔 주소를 저장하는 환경변수를 만든다음 localhost로 해서 개발땐 쓰고 배포할땐 환경변수만 변경해서 배포할 수 있게 해줘야 겠다.

나. vue.config.js 에서 

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: './',
  assetsDir: './',
})

이렇게 수정하고

다.router/index.js에서 router 수정

mode: history 이걸 지워준다.

 

나, 다의 과정을 거치는 것은 이렇게 해야 로컬에서도 그냥 실행이 되는 것 같다. 왜인지는 모르겠다. 그리고 최종적으로 만들어진 index.html에서 script를 import하는데 거기도 src를 ./부터 시작하게 하면 해결 되는 경우도 있는 것 같다.

 

3.spring-boot 빌드 및 실행

2에서 만든 dist폴더의 내용물을 spring-boot의 statics 폴더에 옮긴 후 깃에 push한다. 이후 aws의 인스턴스에 접속해서 git clone을 해준다. 클론 된 폴더에 들어가서 pom.xml이 있는 위치에서

mvn package

명령어를 통해 빌드를 시작한다.

그렇게 만들어진 target 폴더 안에서 jar파일이 생긴것을 확인 한후

nohup java -jar [jar파일의이름] &

명령어로 spring을 시작한다.

spring 표시는 뜨지않는다 &로 인해 백그라운드에서 실행되기 때문이다. nohup을 쳤기 때문에 putty가 꺼져도 서비스는 계속된다.

 

netstat -nap|grep 9999
sudo kill $(sudo lsof -t -i:9999)
netstat -nap|grep 9999

이 명령어를 이용하면 실행되고 있는 spring boot 프로젝트를 종료할 수 있다. 9999는 포트번호를 의미하니 적당한 것으로 바꾸면 된다.

 

이상으로 제작에 대한 설명을 모두 마칩니다.