네이버 클라우드 캠프/Spring Boot & React 10

[Spring boot & React] 게시판 앱 배포하기(2)

도커 허브 레포지토리 생성 및 업데이트 도커 허브 사이트로 가서, 로그인 후, 레포지토리를 생성해주겠습니다. 이렇게 myapp이라는 이름으로 도커 허브에 레포지토리를 만들고, 젠킨스로 가서 Build Steps > Execute shell를 추가해줍니다. 거기서 Command에 다음과 같이 입력합니다. Apply & Save를 통해 저장해줍니다. docker build -t statsdev/reactboard:2.0 . docker login -u '도커허브 이메일' -p '도커허브 비밀번호' docker.io docker push statsdev/reactboard:2.0 권한 오류를 방지하고자 jenkins서버에 접속해서, docker.sock 파일의 권한을 조정해줍니다. chmod 666 /var/..

[Spring Boot & React] 게시판 앱 배포하기(1)

게시판 앱을 배포하겠습니다. 게시판 앱을 github에 올린 분들이 이제 Jenkins를 통해 빌드를 해보는 작업을 수행하겠습니다. Github 사이트에 로그인 후, 프로필에 나오는 Settings > 왼쪽 메뉴 최하단 Developer settings를 누릅니다. 그 다음, Personal access tokens > Tokens(classic) > Generate new token(classic)으로 접근하여, 토큰을 생성하겠습니다. 그 다음 repo를 누르고, 필요한 이름은 Note, 만료일(Expiration)을 원하는 대로 선택하고 Generate tokens를 눌러서 발급합니다. 중요한 점은, 다음에 나오는 생성된 token은 한번 창을 끄면 다시 확인이 안됩니다. 반드시 메모해두거나 아니면 ..

[Spring Boot & React] DB서버를 Object Storage로 변경하기

Object Storage 네이버 클라우드에는 object storage라는 서비스가 있습니다. 홈페이지에서 다음과 같이 정의합니다. 모든 종류의 데이터를 인터넷상에 저장하고 검색할 수 있는 객체 스토리지 해당 서비스에 대해서는 다른 글에서 자세히 정리해보겠습니다. 자세한 내용은 아래 네이버 클라우드 홈페이지를 참고해주세요. https://www.ncloud.com/product/storage/objectStorage NAVER CLOUD PLATFORM cloud computing services for corporations, IaaS, PaaS, SaaS, with Global region and Security Technology Certification www.ncloud.com 로컬 DB에서 ..

[Jenkins] 젠킨스 설정하기(2)

젠킨스 실습 이전 글을 기초로, 실습을 진행해보겠습니다. 서버를 생성하고, 다시 접속하여 도커 설치를 끝낸 뒤라고 가정하겠습니다. 자세한 내용은 아래 글을 참고해서 진행하신 뒤에 실습 진행하시면 됩니다. https://graph-dev.tistory.com/74 [Docker] 도커로 앱 배포하기 (1) with Ncloud 리눅스 서버 생성 이번에는 설치부터 배포까지 실습해보겠습니다. 먼저 리눅스 서버(ubuntu)를 생성해두고 시작하시면 됩니다. 필요한 경우, 제가 작성한 글을 참고하셔서 서버를 생성하는 것부 graph-dev.tistory.com 젠킨스와 게시판 서버 연동을 위한 시나리오를 다시 한번 확인해보고 진행하겠습니다. 먼저 서버를 두 개 생성합니다. 저는 네이버 클라우드 플랫폼을 사용해서 ..

[Jenkins] 젠킨스 설정하기(1)

Jenkins 젠킨스 젠킨스는 CI(Continuous Integration) / CD (Continuous Delivery)를 지원하는 미들웨어 입니다. 즉, 지속적인 통합과 배포를 지원하는데 사용합니다. 개발자가 git, svn 등에 변경사항을 커밋하면 jenkins(젠킨스) 설정에 따라서 테스트, 빌드, 배포 자동화가 가능합니다. 대략적인 젠킨스 연동 시나리오를 간단히 표현하면 아래와 같습니다. Docker에 Jenkins 컨테이너 설치 후 실행 1. 네트워크 브릿지를 생성합니다. docker network create jenkins docker network ls 2. 젠킨스 이미지를 가져옵니다. docker image pull jenkins/jenkins:lts-jdk17 docker image..

[Docker] 도커로 앱 배포하기 (2)

도커 네트워크 이전 글에서 도커에는 네트워크라는 것도 있다고 했습니다. 이 네트워크를 사용해서, 간단히 글을 작성할 수 있는 웹사이트, 블로그 앱 등으로 유명한 워드프레스(wordpress)라는 무료 오픈소스 소프트웨어를 실행해보겠습니다. https://ko.wordpress.org Blog Tool, Publishing Platform, and CMS - WordPress.org 한국어 아름다운 웹사이트, 블로그, 또는 앱을 쉽게 만드는 데 사용할 수 있는 오픈 소스 소프트웨어 ko.wordpress.org 다시 서버에 접속합니다. ssh root@[공인아이피주소] 접속 후 도커 네트워크를 생성하겠습니다. 이름은 wordpress000net1 으로 설정했습니다. docker network create ..

[Docker] 도커로 앱 배포하기 (1) with Ncloud

리눅스 서버 생성 이번에는 설치부터 배포까지 실습해보겠습니다. 먼저 리눅스 서버(ubuntu)를 생성해두고 시작하시면 됩니다. 필요한 경우, 제가 작성한 글을 참고하셔서 서버를 생성하는 것부터 진행하시면 됩니다. https://graph-dev.tistory.com/41 [Ncloud] 나만의 리눅스 서버 만들기 네이버 클라우드로 Linux 서버를 만들어보겠습니다. 리눅스에 대해 먼저 살펴봐야겠죠? Linux: "Just For Fun!" 재미로 시작한 리눅스 리눅스는 헬싱키 대학 리누스 토발즈가 만들었습니다. 당시 자율 graph-dev.tistory.com 다만 위 글은 Classic 기준으로 이번에 작성하는 글은 VPC(Virtual Private Cloud)를 기반으로한 서버를 생성하여 수행합니다..

[Docker] 도커 시작하기

도커(Docker) 도커는 컨테이너 기반의 가상화 플랫폼입니다. 클라우드 서버의 관리, CI/CD, DevOps 등의 기술을 편하게 사용하도록 해줍니다. 도커에는 컨테이너(Container)라는 개념이 있습니다. 이는 설정 파일이나 개발환경, 특정 프로그램, 툴이 설치된 상태를 그대로 실행하는 일종의 상자라고 할 수 있습니다. 도커에서 설정파일, 개발환경, 프로그램, 툴 등을 하나의 이미지(image)로 저장하거나 불러와서 바로 컨테이너화할 수도 있습니다. 도커를 설치해보겠습니다. 참고로 리눅스 환경에서 진행합니다. 아래 사이트를 참고하여 작성했습니다. https://docs.docker.com/engine/install/ubuntu/ Install Docker Engine on Ubuntu docs.d..

[SpringBoot & React] 회원가입과 로그인(2)

이번에는 로그인을 해보겠습니다. 로그인 로그인과 관련된 메서드를 Service 인터페이스에 먼저 정의합니다. 아이디와 비밀번호가 필요하겠죠? SpringBoot Service public interface MemberService { Member login(String username, String password); } ServiceImplement 그리고 이 login 메서드에 대한 구현부를 정의합니다. 이 RequiredArgsConstructor를 사용하면 레포지토리와 인코더 등의 객체를 별도로 의존성 주입 없이 final로 선언해서 사용할 수 있다고 합니다. 유용합니다. @Service @RequiredArgsConstructor public class MemberServiceImpl imple..

[SpringBoot & React] 회원가입과 로그인(1)

로그인과 회원가입은 일상에서 자주 보는 화면이자 기능입니다. SpringBoot와 React 어플리케이션으로 간단히 구현해보겠습니다. 완성할 화면은 아래와 같습니다. 사전 작업 먼저 JWT에 대해 정리한 글을 잠시 보고 오겠습니다. https://graph-dev.tistory.com/64 [React] JWT와 CORS JWT JWT는 JSON Web Token(JSON 웹 토큰) 의 약자로, 정보를 JSON 형식으로 안전하게 전송하는 방법입니다. 이 정보는 토큰 자체에 포함된 플레임 기반의 토큰이며, 일반적으로 인증과 권한 처리에서 주로 graph-dev.tistory.com 회원가입 Controller Boot에서 사용할 api를 활용한 회원 컨트롤러(controller)를 만들겠습니다. 회원을 대..