공부하는블로그

지난 포스팅인 Jenkins로 Springboot 배포에 이어서 github webhook을 연동하는 법.

https://myyoun.tistory.com/164

git Webhook 은 git Repository에 push, commit, tag와 같은 이벤트가 발생하게 되면 Jenkins 같은 CI 서버에 이벤트를 HTTP POST payload로 전달하도록 하는 기능이다.

그럼 이벤트를 받은 CI 서버에서는 설정해놓은 스크립트 및 빌드를 실행하게 된다.

이전 포스팅에서는 git에 push 해준 상태에서 Jenkins 페이지로 들어가 직접 빌드 버튼을 눌러야 빌드하고 배포하는 과정이었다면 webhook을 연결함으로써 push 해주기만 해도 알아서 빌드와 배포까지 처리해주도록 하는 것이다.

환경으로는 

• AWS EC2 Ubuntu 20.04

여기서는 webhook 연동이기 때문에 나머지 환경에 대해서는 굳이 언급이 필요없을듯 하다.

먼저 Jenkins 페이지에서 GitHub Integragion Plugin을 설치한다.

이전에 해보면서 이미 설치 되어있기 때문에 따로 나오는건 없지만 설치 가능을 누르고 검색하면 나온다.

체크하고 Install without restart 클릭. 저 DotCi를 설치하는건 아니고, 

이것을 설치하면 된다.

다음은 GitHub Token을 발급 받는다.

오른쪽 상단 아이콘 클릭해서 Settings로 이동.

왼쪽 메뉴에서 Developer settings로 이동.

personal access tokens -> Generate new token을 눌러 새로운 토큰을 생성한다.

Note는 임의로 작성하면 되고 repo와 admin:repo_hook을 체크한 뒤 생성!

이렇게 토큰이 나온다.

이 토큰을 Jenkins에 등록한다.

젠킨스 페이지에서 Jenkins관리 -> Manage credentials 클릭.

Stores scoped to Jenkins 아래에서 global 클릭

왼쪽 메뉴에서 Add Credentials 클릭.

kind 는 Secret text 를 선택해주고 Secret에는 방금 생성한 토큰을 복사해 붙여준다.

ID는 github username을 입력한다.

Description은 선택사항.

다 작성했으면 OK.

Jenkins관리 -> 시스템 설정으로 이동한다.

Add GitHubServer를 눌러 GitHub Server를 선택한다.

Name은 임의로 입력.

Credentials 에는 방금 생성한 Credential을 선택해준다.

그리고 Manage hooks 체크 한뒤 Apply -> 저장.

연동할 Repository에서 Settings -> Webhooks -> Add webhook

Payload URL에는 jenkins접속 주소와 포트를 적고 그 뒤에 github-webhook/ 을 붙여준다.

webhook 뒤에 / 안붙이면 제대로 안되니 / 꼭 붙일것!!!!!!!!!

Add webhook 클릭.

그럼 이제 jenkins 페이지로 이동해 해당 item으로 이동 한뒤 구성으로 이동.

나머지는 이전 포스팅과 셋팅은 동일하고 빌드유발에서 GitHub hook trigger for GITScm polling 만 체크해준다.

그럼 설정 끝~~!!!!

확인은 해당 프로젝트를 조금 수정해 repository에 push 해보거나 README.md 파일 있으면 그냥 repository 페이지에서

README.md만 수정해보면 된다.

편하게 README.md 수정으로 테스트

제대로 연결이 되어있다면 jenkins페이지 build에 알아서 이렇게 진행 되는것을 볼 수 있다.

그럼 당연히 서버에서 확인해도 수정이 잘 되어있는것을 볼 수 있다.

그리고 webhook에서도 제대로 처리 되면 저렇게 초록색 체크가 되어있다.

참고

https://www.comtec.kr/2021/07/22/jenkins-webhook-%EC%84%A4%EC%A0%95/

그리고 살~짝 다른 방법도 있었다.

이 방법 역시 제대로 되는것을 확인!

https://nirsa.tistory.com/301?category=962430 

CI/CD에 대한 언급이 많은 만큼 Jenkins를 통해 구축해보기로 했다.

CI/CD 개념은 따로 포스팅했다.

https://myyoun.tistory.com/166

환경은 다음과 같다.

• AWS EC2 Ubuntu 20.04
• Spring Boot 2.5.4
• Gradle 7.1.1

CI/CD를 제대로 구축하게 되면 git에 push했을 때 알아서 동작하는것 까지 설정해야 하지만 여기서는 직접 Jenkins에서 빌드를 눌러 배포까지 처리하는 과정만 정리한다.

일단 Jenkins를 사용하기 위해서는 jdk가 필요하다.

https://myyoun.tistory.com/157

jdk 설치 및 환경변수 설정은 상단 포스팅에 있으니 참고.

jenkins를 설치하기 전 저장소 키를 먼저 다운로드 해야한다.

wget -q -O - https://pkg.jenkins.io/debian/jenkins.io.key | sudo apt-key add -

echo deb https://pkg.jenkins.io/debian-stable binary/ | sudo tee /etc/apt/sources.list.d/jenkins.list

만약 설치중 "Package 'jenkins' has no installation candidate" 라는 에러가 발생했다면 하단 링크를 참고한다.

위 키는 2020년 4월에 변경된 키인데 간혹 그 전에 포스팅 된 글에서는 예전 키 경로가 적혀 있을 수 있기 때문이다.

추후 또 변경된다면 같은 에러가 발생할 수 있기 때문에 참고.

https://serverfault.com/questions/1034893/installing-jenkins-on-ubuntu-tells-me-package-jenkins-has-no-installation-can

그럼 이제 Jenkins 설치를 시작한다.

sudo apt-get update

sudo apt-get install jenkins

키 다운로드 후 update를 안해주면 Package 'jenkins' has no installation candidate 에러를 볼 수 있으니 update 해주고 설치한다.

설치가 끝났다면 서비스 포트를 변경해준다.

jenkins는 기본 default로 8080포트를 사용중이다.

만약 8080 포트를 사용하고 있지 않은 상황이라면 굳이 바꿔줄 필요가 없겠지만 사용하고 있다면 변경해줘야 한다.

sudo vi /etc/default/jenkins

중간쯤에 HTTP_PORT 가 8080으로 되어있는데 이 부분을 사용할 포트로 바꿔주면 된다.

변경해줬다면 jenkins를 재시작 해준다.

sudo service jenkins restart

그리고 systemctl status로 정상 작동 여부를 확인한다.

sudo systemctl status jenkins

그럼 이제 Jenkins 에 접속하기 전에 패스워드를 확인해야 한다.

sudo cat /var/lib/jenkins/secrets/initialAdminPassword

입력하면 바로 하단에 출력된다.

브라우저에서 Jenkins로 접속하는 방법은 본인 퍼블릭IP:포트번호  다.

이전에 포트설정할때 9090으로 설정했기 때문에 IP:9090 으로 접근한다.

그럼 이런 화면을 볼 수 있는데 방금 찾아놓은 패스워드를 여기 입력해준다.

여기서는 환경이나 설정에 따라 다르겠지만 그냥 suggested로 진행했다.

suggested를 클릭하면 설치가 진행되는데 시간이 쫌 걸린다.

끝나면 Admin 계정 생성을 진행한다.

스킵도 가능하긴한데 스킵하지 않고 진행했다.

다음은 접근하기 위한 URL이다. 이미 사전에 포트번호를 변경해뒀다면 본인 퍼블릭IP:바뀐포트번호 형태로 출력될것이다.

그럼 일단 1차적인 설정은 끝!

다음으로 필요한 플러그인 설치를 진행한다.

설정이 끝나고 나오는 페이지에서 Jenkins 관리로 들어간다.

플러그인 관리로 이동.

필요한 플러그인은 Gradle Plugin과 Post build task다.

보통 Gradle Plugin은 기본적으로 설치되어 있는것 같다.

하지만 Post build task는 설치되어 있지 않기 때문에 설치가능 탭에서 Post build task를 검색해 설치해준다.

restart에 대해서는 딱히 언급되는걸 본적은 없는데 그냥 Install without restart를 해줬다 항상.

그럼 이런 페이지가 뜨고 페이지 하단에는

이렇게 뜬다. 그냥 restart를 누르는 이유가 여기있다.

어차피 내가 또 체크해서 재시작 해야되니까 그냥............... 별 의미 없는것 같다.

이건 플러그인마다 재시작에 대한 것이 좀 다르겠지만 뭘 택하던 크~게 영향은 없는 것 같다.

그럼 이제 작업을 생성한다.

새로운 Item 클릭.

name을 입력하고 FreestyleProject를 선택한다.

여기도 그때그때마다 상황에 따라 다를 것.

General 부분은 따로 뭘 작성하지 않았다.

소스코드 관리는 git을 통해 진행할것이기 때문에 관리하고자 하는 프로젝트 URL을 적는다.

적고나면 Credentials에서 Add -> Jenkins 클릭.

git의 Username과 password를 적고 Add를 눌러주면 된다.

그럼 이렇게 select box에서 선택할 수 있다.

build에서는 Add build step을 눌러 Invoke Gradle script 를 선택해준다.

여기서 Invoke Gradle를 선택하게 되면 Gradle Version이랑 다 선택해주면서 진행해야 한다.

일단 Use Gradle Wrapper로 선택해 진행한다.

Make gradlew executable 를 체크하지 않으면 permission denied 에러가 발생하니 꼭 체크해준다.

Wrapper location에는 ${workspace}로 해두면 알아서 경로를 찾아가기 때문에 좋다.

Tasks에서는 build를 입력함으로써 빌드를 실행하도록 한다.

빌드 후 조치는 말그대로 빌드가 끝난 후 실행할 것에 대해 작성하는 것이다.

Log text는 빌드가 성공했을 때 Log에서 찍히는 텍스트다.

Log text에 적은대로 찍힌다는 의미가 아니라 로그에 저 텍스트가 찍혔을 때 이 스크립트를 실행한다는 의미로 받아들일 수 있다.

Gradle의 경우는 BUILD SUCCESSFUL로 로그에 찍히고 Maven에는 BUILD SUCCESS로 찍힌다고 한다.

Script에는 배포를 위한 스크립트를 작성해주면 되고

Run script only if all previous steps were successful 를 체크해 이전 단계가 제대로 완료 되었을 때만 script를 실행하도록 하면 끝이다. 

그럼 이제 Apply 누르고 저장 누르면 끝!

Build Now 를 누르면 작업이 시작되고 

빌드 로그는 시간대 옆에 작게 나오는 화살표를 누르면 Console Output에서 확인할 수 있다.

그리고 Log text 에 관해서는 Console Output에 들어가서

이부분에서 확인할 수 있다.

파란글씨부분이 Log text에 들어가야 하는 부분이고 Log text를 제대로 적었다면 

Match found for : BUILD SUCCESSFUL : True로 출력되게 된다.

참고

https://velog.io/@ifthenelse/jenkins-%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0-ubuntu-20.04

환경

• EC2 - Ubuntu 20.04
• 프로젝트 - Spring Boot
• ACM
• AWS 로드밸런서
• AWS Route 53

HTTPS로 설정하는 과정에서 502와 503 에러를 겪었다.

환경을 이렇게 적는 이유는 해결 방안을 검색하다보니 nginx를 사용한 상황과 node 환경에서 서버 셋팅중에 발생하는 문제도 적지 않았기 때문이다.

이 경우 완전 다른 해결방안이 필요하기 때문에 현재 환경을 꼭 확인해야 한다.

처음 발생한 에러는 503.

찾아보니 503에러 발생 원인이 너무 다양하다.

발생한 오류가 정확하게는 503 Service Temporarily Unavailable.

보통 https 503 에러에 대해 검색해보면 '서버가 Request를 처리할 준비가 되지 않은 것을 나타낸다' 라고 많이 얘기한다.

흔히 다운되거나 오버로드 된 상황.

이 오류에 대해 AWS 에서는 '로드밸런서의 대상 그룹에 등록된 대상이 없습니다.' 라는 안내를 해준다.

즉, 로드밸런서를 생성할 때 같이 등록해주는 대상그룹(Target Group)에 등록된 인스턴스가 없다는 것이다.

말 그대로 대상그룹에는 내가 연결하고자 하는 서버가 있어야 연결이 되고 처리해줄 수 있는데 그 연결이 안되어있으니 발생하는 문제라는것.

대상그룹을 처음 생성하면 마지막에 이런 페이지를 볼 수 있다. 여기서 그냥 Create를 누르면 아무 연결도 없이 그룹이 생성된다.

이 상태로 로드밸런서에 대상 그룹을 넣어주면 연결된 인스턴스가 없기 때문에 요청을 처리할 서버가 없게 되고 그럼 503에러가 발생하는 것이다.

그래서 해당 인스턴스를 선택한 뒤 Include as pending below 버튼을 눌러 등록 해줘야 한다.

만약 이미 비어있는 상태의 대상그룹을 만들었다면 해당 대상 그룹명을 눌러 들어간다.

그럼 하단에 Regist할 수 있는 버튼이 있다. 눌러주면 같은 화면을 볼 수 있으니 등록이 가능하다.

이렇게 등록해주면 503 에러는 해결이 된다.

502에러의 경우는 Bad Gateway 오류였다.

이 경우 유효하지 않은 응답을 받을 때 발생하는 오류다.

역시 원인은 다양하지만 보통 잘못된 네트워크 연결이나 과부하 상태에서 발생한다.

AWS에서는 Classic Load Balancer를 통한 502 에러에 대해 다음과 같이 안내가 되어있다.

AWS에서는 로그를 활성화 해 확인하라고 하지만 이 로그는 S3에서 확인할 수 있다.

하지만 난 S3를 지금 사용하지 않는 상황.

도움이 전혀 될 해결 방안이 아니다.

로드밸런서 CloudWatch에서도 전혀 표시되는 문제가 없었다.

한 블로그에서 서버 로그를 확인해보라는 것도 보고 확인해봤지만 애초에 서버에 접근조차 못하는지 로그는 전혀 찍히지 않았다.

그리고 EC2 의 퍼블릭 IP를 통해서는 접근이 가능하고 HTTP로도 문제없이 접근이 가능했다.

문제가 발생하는것은 HTTPS뿐이었다.

그러던중 한 블로그 포스팅을 봤다.

https://uhou.tistory.com/130

나랑 환경은 조금 다른 상황에서 발생하신 오류지만 본인이 생각하신 여러 추측해 대해 정리해주셨다.

내가 팁을 얻은 부분은 여기다.

'하지만 저는 AWS의 로드밸런서를 그저 https연결을 위한 도구로만 사용하였고' 라는 부분에서 아 여기가 문제일 수 있겠다는 생각을 했다.

로드밸런서 문제면 가능성이 있는건 대상그룹인가?

503에러도 결국 대상그룹 문제였기 때문에. 그리고 HTTP로는 정상적인 접근이 가능했기 때문에.

결론은 또 대상그룹에서 발생한 문제였다.

처음 ACM인증부터 로드밸런서까지 HTTPS를 사용하는 과정에 대해 나와 현재 환경이 제일 비슷한 블로그 글들을 찾아 진행했다.

하지만 대상그룹에 대해서는 '로드밸런서에서 대상그룹을 선택해주세요' 나 '없으면 만들고 선택해주시면 됩니다' 정도만 나왔다.

물론 적어주신 분도 있었겠지만 내가 본 글중에는 없었기 때문에.....................

Target Group Protocol이 HTTP 인것 하나 HTTPS 인것 하나 이렇게 두개를 만들었다.

왜?

로드밸런서 Listener에 HTTP와 HTTPS를 추가해야하니까 HTTP Listener 에는 HTTP TargetGroup을 HTTPS Listener 에는 HTTPS Target Group을 넣어야겠다고 생각했으니까...

그리고 그렇게 등록해 생성한 뒤에 Listener 탭을 봤을 때 HTTPS에 SSL 인증서도 제대로 들어가있었기 때문에 아무 의심도 하지 않았었다.

서버 내에서 URL에 8080을 제거 하기 위해 80포트로 들어오면 8080으로 연결하도록 설정했다.

그래서 HTTP를 통한 접속은 제대로 처리 된것이다.

80포트로는 접근할 수 있으니까.

근데 HTTPS를 쓰겠다고 443으로 접근했으니 될리가 있나..?

그래서 HTTPS Listener의 Target Group을 HTTP로 바꿔줬다.

결과는?

당연히 해결....

생각없이 설정하지 말고 생각좀 하자...ㅠㅠ

이전에 Eclipse로 spring프로젝트를 생성해 진행한 것을 IntelliJ 에서 돌리려 하니

'Error:java: Compilation failed: internal java compiler error'

라는 오류가 발생했다.

보이는대로 내부 자바 컴파일러 오류다.

환경은

Eclipse, Spring, Maven을 사용한 상태다.

저 오류 그대로 구글에서 검색해보면 다양한 방법이 많이 나온다.

하지만 해결이 안되서 IntelliJ 내에서 컴파일 관련 설정을 이것저것 뒤져보다 방법을 찾았다.

이번과 다른 경우로 이런 오류가 발생하는 경우도 있겠지만 이 경우는 버전문제로 해결했다.

File> Settings > Build, Execution, Deployment > Compiler > JavaCompiler 로 이동한다.

거기서 나는 이 Target bytecode version 이 1.6으로 되어있었다.

보기에 Use compiler에 javac가 설정되어있는 것을 먼저 봤고 아래 bytecode version을 눌러보니 자바 버전들로 예상할 수 있었던 숫자들이 쭉 나오는것을 확인했다.

그럼 이게 문제이지 않을까 싶어서 변경했다.

왜냐면 내 데스크탑에는 1.8로 셋팅해놨는데 1.6이니까 안되는거 아닐까? 했기 때문.

아래 8버전으로 그냥 설정해도 될것 같았지만 일단은 default로 1.6이었으니까 1.8로 먼저 해보기로 하고 변경했다.

Apply 해주고 OK 누른뒤 서버 실행하니까 정상 작동...ㅠㅠ

그리고 해보니까 예상했던것 처럼 8로 맞춰도 잘 된다!

EC2에 MySQL을 설치해뒀는데 데스크탑에서 볼 수 있게 셋팅하고 싶었다.

일단 EC2 접속 후

  sudo nano /etc/mysql/mysql.conf.d/mysqld.cnf

이렇게 mysqld.cnf 파일을 열어준다.

sudo를 사용하지 않았더니 권한때문에 저장이 안된다.

처음부터 이렇게 접근하는게 맞는것 같다.

조금만 아래로 내려보면 이렇게 bind-address 와 mysqlx-bind-address 를 볼 수 있다.

보통 다른글 포스팅 보면 bind-address 밖에 없는데 나는 두개..

이 두개를 0.0.0.0으로 바꿔주거나 앞에 # 을 붙여 주석처리를 해준다.

저장하고 종료.

그리고 mysql 에 접속한다.

접속해서 외부접속 허용 sql을 입력한다.

mysql> create user 'con'@'%' identified by '1111';
mysql> grant all privileges on *.* to 'con'@'%' with grant option;

con부분은 유저이름을 넣어주면 되고 identified by 뒤는 비밀번호다.

생성해주고 접속 권한을 변경해주는 것이다.

많은 포스팅을 본것은 아니지만 보통 이렇게 생성하는거에 대해 적어주신 분은 없다.

보통은

mysql> grant all privilage on *.* to 'root'@'%' identified by '1111';
mysql> flush privileges;

이렇게 많이 알려주셨다.

근데 접속 권한 쿼리부터 잘못된 쿼리라는 오류가 발생해 다른 방법을 찾게된 것이다.

보통 이렇게 써주신 분들 포스팅은 ubuntu 16.04에 mysql 5.7이던데 아마 버전차이가 아닐까 싶다.

현재 ubuntu 20.04에 mysql 8.0.27이기 때문에 차이가 있을 것 같다.

그래서 첫번째 방법으로 시도해서 해결되었다.

그래서 저 방법을 통해 접속 권한을 변경했다면 mysql을 재시작하고 포트를 설정해준다.

sudo service mysql restart
sudo ufw allow out 3306/tcp
sudo ufw allow in 3306/tcp
sudo service mysql restart

ufw allow 는 포트를 설정해주는 것이다. Rules updated 가 나와야 정상적으로 처리가 된것이다.

그리고 EC2 인스턴스에도 보안그룹 인바운드 규칙에 3306을 추가해줘야 한다 꼭!

여기까지 했다면 workbench를 실행해서 연결을 진행하면 된다.

Hostname에는 EC2 퍼블릭 IP 주소 적으면 된다.

username이랑 Password는 아까 설정하면서 생성한 그 계정으로 하면 끝!

EC2 인스턴스 생성 후 해당 서버에 접속하는 방법.

EC2 인스턴스는 가상머신이기 때문에 터미널 툴을 사용해 접근해야 한다.

대체적으로 많이 검색되는 방법이 PuTTY를 사용한 접근이다.

그래서 정리할 내용으로는

1. 윈도우에서 PuTTY를 사용한 접근

2. mac에서 터미널을 사용한 접근

두가지를 정리한다.

그리고 윈도우에서 Window Terminal을 통한 접근도 가능한데 아직 해보지 않아서 포스팅 해주신 분 글을 첨부한다.

https://wookim789.tistory.com/34

1. 윈도우에서 PuTTY를 사용한 EC2 인스턴스 접근

먼저 PuTTY를 설치해야 한다.

https://putty.softonic.kr/

위 페이지에서 PuTTY를 다운받아 설치.

PuTTY gen을 실행시키면 위와 같이 실행된다.

Load를 클릭해 해당 인스턴스의 .pem 키를 찾아 선택한다.

만약 보이지 않는다면 파일 타입에서 All Files로 변경하면 보인다.

그럼 이런 창이 뜨는데 개인키 저장 명령어를 사용해 PuTTY고유 형식으로 저장하라는 안내문 같은 것이다.

확인 클릭.

예 선택.

만약 이게 안뜬다면 

여기서 Save privateKey 버튼을 누르면 된다.

private Key를 생성하는 과정이고 임의의 key 이름을 정해 저장해주면 된다.

그럼 .ppk의 확장자를 가진 private key가 생성된다.

이제 인스턴스의 IP가 필요하다.

aws 인스턴스 페이지에서 해당 인스턴스를 눌러보면 아래에

이렇게 퍼블릭 IPv4주소가 나와있는 부분이 있다.

그럼 이제 PuTTY gen은 종료하고 PuTTY를 실행한다.

이렇게 실행되는데 HostName에 ubuntu@퍼블릭IPv4주소 를 입력해준다.

그리고 SavedSessions에서는 본인이 알아볼 수 있도록 임의로 입력해주면 되고 그 후 Save버튼을 눌러준다.

Save를 눌러주면 이렇게 입력해준 session의 이름대로 저장된것을 확인할 수 있다.

이렇게 저장해두면 PuTTY를 종료했다가 나중에 다시 접근할 때 HostName을 다시 입력할 필요 없이 해당 Session을 선택해서 Load만 해주면 되기 때문에 편하다.

다음은 왼쪽 메뉴들 중 Connection 아래에 있는 SSH 확장 -> Auth를 클릭한다.

그럼 위와 같이 나오는데 Browse를 눌러 방금 PuTTY gen에서 생성한 .ppk파일을 가져온다.

그리고 Open클릭!

그럼 이렇게 실행된다!

참고

https://jiwontip.tistory.com/44?category=367314 

1. mac에서 Terminal을 사용한 EC2 인스턴스 접근

mac에서 접근할 때 역시 .pem 키는 당연히 필요하다.

그래서 기존 데스크탑에 받아놓은 키를 usb를 통해 맥북으로 옮겼다.

경로는 일단 간단하게 Documents/pem/  으로 설정했다.

키를 옮겨두었다면 준비는 끝!

터미널을 먼저 실행시킨다.

그리고 해당 디렉터리로 이동한다.

이렇게 키가 있는 위치로 이동해 접근을 시작한다.

여기서 사전에 알고 있어야 하는 정보가 있다.

퍼블릭 IPv4 DNS를 알아야 한다.

그럼 터미널에서 이제

ssh -i 0000.pem ubuntu@퍼블릭 IPv4DNS 를 입력해주면 인스턴스에 접속할 수 있다.

현재는 ubuntu를 사용하기 때문에 ubuntu@ 로 입력하면 되지만 사용자 이름이 들어가는 위치이기 때문에

인스턴스 종류에 따라 맞게 넣어주면 된다.

  Amazon Linux2 또는 Amazon Linux AMI의 경우 사용자의 이름은 ec2-user

  CentOS AMI의 경우 사용자 이름은 centos

  Debian AMI의 경우 사용자 이름은 admin

  Fedora AMI의 경우 사용자 이름은 ec2-user 또는 fedora

  RHEL AMI의 경우 사용자 이름은 ec2-user 또는 root

  SUSE AMI의 경우 사용자 이름은 ec2-user 또는 root

  Ubuntu AMI의 경우 사용자 이름은 ubuntu이다.

참고

https://soobarkbar.tistory.com/223

그리고 이제 서버에서 처음으로 해야하는게 최신버전으로 맞춰줘야 한다.

진행 중 중간에

이런게 나온다면 y를 입력해 계속 진행해주면 된다.

끝!!

포트폴리오 프로젝트 진행 중 SmartEditor를 사용하려고 했더니

Refused to display 'http://localhost:8080/insert' in a frame because it set 'X-Frame-Options' to 'deny'

이런 오류가 chorme 개발자 도구 console창에서 확인.

기존에 thehouse 프로젝트 진행하면서 분명 이거 어디 정리해놨던 기억이 있는데 블로그 게시글에 전혀 보이질 않아서

다시 작성.

Spring Security에서는 보안상의 이슈로 인해 X-Frame 을 default로 차단하도록 되어있다.

X-Frame-Option을 비활성화 하게 되면 보안 이슈가 발생할 수 있기 때문에 

동일 도메인에서는 iframe 접근이 가능하도록 sameOrigin으로 설정하면 된다

http.headers().frameOptions().sameOrigin();

아예 비활성화하는 방법은

http.headers().frameOptions().disable();

Spring Boot에서는 Properties에 작성할수도 있다.

security.headers.frame = false

xml형태로 작성한 security-config에서는 

<http auto-config="true" use-expressions="true>
  <headers>
    <frame-options policy="SAMEORIGIN"/>
  </headers>

이렇게 작성해주면 된다.

프로젝트 진행 중 415에러 발생.

415는 공부시작하고 나서 매 프로젝트마다 ajax를 사용했음에도 처음봄............

원인을 찾아보니 클라이언트가 서버에 지원되지 않는 요청을 보냈기에 서버에서 거절한 경우 발생하는 것이라고 한다.

<form id="form">
	<div>
    	<input type="text" name="productName">
    </div>
    <div>
    	<input type="text" name="productColor">
    </div>
    <div>
	<input type="file" name="imgFile" value="파일 선택" multiple>
	</div>
</form>
<button type="button" id="formSub">버튼</button>

$(document).ready(function(){
	$("#formSub").on('click', function(){
    	var form = ("#form")[0];
    	var formData = new FormData(form);
    
    	for(var index = 0; index < Object.keys(imgFile).length; index++){
    		formData.append('imgFile', imgFile[index]);
    	}
    
    	$.ajax({
    		url: '/addProduct',
        	enctype: 'multipart/form-data',
        	contentType: false,
        	processData: false,
        	type: 'post',
        	dataType: 'JSON',
        	data: formData,
        	success: function(result){
       			if(result == -1)
            		alert('업로드 실패');
            	else
            		location.href="productList";
        	}
    	});
    });
});

@PostMapping("/addProduct")
@ResponseBody
public void addProduct(ProductVO productVO
                 , @ReqeustParam("imgFile") List<MultipartFile> imgFile) throws Exception{
	log.info(productVO);
    
    for(MultipartFile image : imgFile){
      log.info(image.getOriginalFilename());
    }
}

이렇게 작성했으나 에러가 발생한것. 내가 어디를 빼먹었나 잘못 작성했나 해서 이전에 했던 프로젝트들 뒤져봤지만

문제점을 찾지 못했다.

구글링으로 찾아보니 일반적인 문제로는 컨트롤러에서는 json타입으로 받는데 보내는 데이터 타입이 json이

아닌 경우가 많은 것 같다.

그래서 보통 JSON.stringify()를 사용해 json형태로 바꿔주는것.

그리고 위 ajax부분에 작성한것 처럼 contentType을 false가 아닌 'application/json'형태로 바꿔주는 것이다.

contentType은 default가 application/x-www-form-urlencoded라고 한다.

그래서 만약 json으로 보내겠다고 명시하지 않은 상태에서 form데이터가 json형태가 아니라면 그냥 default형태로

넘어가기 때문에 오류가 발생한다고 볼 수 있다.

단, 이경우는 multipart를 사용하지 않는 경우. 즉, 폼 데이터만을 ajax로 넘겨야할 경우에만 사용하는 방법이고

진행하는 프로젝트처럼 파일을 넘기고자 한다면 type이 'multipart/form-data'형태로 전송해야 하기 때문에

false로 해야 한다.

그리고 컨트롤러에서도 상황에 따라 @ResponseBody와 @RequestBody를 사용해 받아주는 형태로 처리할 수 있다.

https://blog.naver.com/writer0713/221853596497

이분이 정리를 잘 해주셔서 도움이 많이 되었다.

여기서 의문이 'FormData를 사용해 form을 처리해줬으면 문자열로 변환되어 문제가 발생하지 않을텐데

왜 415가 사라지지 않는가' 

내 경우는 문제가 form안에 file부분이 들어가있는것이 문제였다.

이것저것 방법을 다 써봐도 해결이 안되길래 뭐가 문젠가... 하고 있던 와중에 ajax에러에 뭔가 나올것 같아서

에러를 출력하도록 바꿔서 확인해보니 Unexpected end of json input 라는 부분이 추가로 출력되었다.

즉, json타입의 끝이 이상하다는 것이다.

그래서 form을 console로 찍어보니 끝에 length 어쩌구.......

데이터는 하나도 안찍힌다.

length가 왜??? 이러다가 jsp를 다시 확인해보니 form안에 파일 input이 있길래 설마 하면서

form밑으로 빼보니 너무 잘된다 ㅠㅠ

<form id="form">
	<div>
    	<input type="text" name="productName">
    </div>
    <div>
    	<input type="text" name="productColor">
    </div>
</form>

<div>
  <input type="file" name="imgFile" value="파일 선택" multiple>
</div>

<button type="button" id="formSub">버튼</button>

다른 코드는 하나도 안건드리고 이것만 뺐더니 너무 잘된다...ㅎㅎ

내 오류에 대한 원인은 file의 경우는 json에 포함될 수 없는데 form안에 같이 있으면서 한번에 변환하고자 했기 때문에 발생한 문제같다.

그렇다고 한번에 보낼 수 있는 방법이 없는것은 아니다.

https://medium.com/jaehoon-techblog/simpleblog-%EA%B0%9C%EB%B0%9C-%EC%9D%BC%EC%A7%80-4-55a8d2a8604

이분이 한번에 보내는 방법에 대해 잘 포스팅 해주셨다.

다음 프로젝트에서 써먹어봐야지!