Home

2025
0
DevOpsKeyCloak

[쿠버네티스 DevOps 구축] - Keycloak 설치하기

목차 [쿠버네티스 DevOps 구축] - OpenSearch 설치하기 [쿠버네티스 DevOps 구축] - Prometheus 와 Grafana 설치하기 [쿠버네티스 DevOps 구축] - Keycloak 설치하기 [쿠버네티스 DevOps 구축] - Ingress Nginx Controller 설치하기 [쿠버네티스 DevOps 구축] - Local PC 쿠버네티스 동적 프로비저닝을 위한 StorageClass 설치 [쿠버네티스 DevOps 구축] - Local PC 에 쿠버네티스 설치하기 🔎 SSO 를 위한 Keycloak보통 DevOps 시스템을 구축하게 되면 각 시스템 마다 접근을 위한 계정 관리를 해줘야 합니다. 즉, N 개의 관리 시스템을 설치하게 되면 N 개의 계정이 필요합니다. 계정이 너무 많아지면 사용하는 입장에서도 관리하는 입장에서도 너무 복잡해져서 보통, 한 서비스 가입을 통해 모든 시스템에 접근할 수 있는 SSO 를 많이들 구축합니다. 저는 일반적으로 많이 사용하는 OpenSource 인 KeyCloak 을 이용해 쿠버네티스 위에 올라가는 서비스에 대한 SSO 를 구축하려고 합니다. ✅ Helm 을 이용한 KeyCloak 설치 참고 https://artifacthub.io/packages/helm/bitnami/keycloak # Helm Repo 추가helm repo add keycloak https://charts.bitnami.com/bitnami# Helm Default Chart 내려받기helm show values keycloak/keycloak >> values-keycloak.yaml# Keycloak 설치 helm upgrade --install -f ./values-keycloak.yaml keycloak keycloak/keycloak -n auth --create-namespace

0
Kubernetes

[쿠버네티스 DevOps 구축] - Local PC 쿠버네티스 동적 프로비저닝을 위한 StorageClass 설치

목차 [쿠버네티스 DevOps 구축] - OpenSearch 설치하기 [쿠버네티스 DevOps 구축] - Prometheus 와 Grafana 설치하기 [쿠버네티스 DevOps 구축] - Keycloak 설치하기 [쿠버네티스 DevOps 구축] - Ingress Nginx Controller 설치하기 [쿠버네티스 DevOps 구축] - Local PC 쿠버네티스 동적 프로비저닝을 위한 StorageClass 설치 [쿠버네티스 DevOps 구축] - Local PC 에 쿠버네티스 설치하기 참고 https://github.com/rancher/local-path-provisioner 🔎 로컬 쿠버네티스 동적 프로비저닝로컬 쿠버네티스 환경에서는 기본적으로 동적 PV 프로비저닝을 지원하지 않습니다. 다시 말해, 사용자가 직접 PV 를 생성한 후 PVC 에 수동으로 PV 를 연결해야 합니다. EKS 에서는 CSI 드라이버를 통해 동적 프로비저닝을 제공하는데, 로컬 환경에서 동일한 기능을 제공해주는 플러그인을 찾다가 local-path-provisioner 를 발견했습니다. 1. local-path-provisioner 설치아래 명령어를 사용해 local-path-provisioner를 설치합니다.

0
Kubernetes

[쿠버네티스 DevOps 구축] - Local PC 에 쿠버네티스 설치하기

목차 [쿠버네티스 DevOps 구축] - OpenSearch 설치하기 [쿠버네티스 DevOps 구축] - Prometheus 와 Grafana 설치하기 [쿠버네티스 DevOps 구축] - Keycloak 설치하기 [쿠버네티스 DevOps 구축] - Ingress Nginx Controller 설치하기 [쿠버네티스 DevOps 구축] - Local PC 쿠버네티스 동적 프로비저닝을 위한 StorageClass 설치 [쿠버네티스 DevOps 구축] - Local PC 에 쿠버네티스 설치하기 참고 https://kubernetes.io/docs/setup/production-environment/tools/kubeadm/install-kubeadm/ https://cocococo.tistory.com/entry/k8s-%EC%BF%A0%EB%B2%84%EB%84%A4%ED%8B%B0%EC%8A%A4-%EC%82%AC%EC%9A%A9%EC%9D%84-%EC%9C%84%ED%95%9C-kubeadm-kubelet-%EB%B0%8F-kubectl-%EC%84%A4%EC%B9%98-%EB%B0%A9%EB%B2%95 https://jongsky.tistory.com/112 https://www.youtube.com/watch?v=Wr6nrBRqYYE 📝 회고Vitality 팀에 있을때 EKS 로 구축된 시스템을 운영했었습니다. 지금은 해당 팀이 해체 되면서 운영하고 있지는 않지만 그때 내부적으로 진행했던 프로젝트들의 기억을 되살리고자 포스트로 남기려고 합니다. 🤔 쿠버네티스 운영환경 선택지속적으로 쿠버네티스 환경을 운영도 하면서 공부도 하고 싶어 여러가지 환경을 검토해봤는데, EKS 는 일단 컨트롤 플레인 자체만으로도 한달에 7만원 정도가 나와 Pass (너무 비싸 😭), 로컬 PC 에 Minikube 를 이용하는 방법은 노트북을 너무 핫하게 만드는 방법이라 Pass 요즘 알리에서 미니 PC 가 싸게 풀리고 있고 시스템 초기 구입 비용 빼면 운용하는데는 매월 전기세만 내면 돼 크게 부담이 안될 것 같아 미니 PC 를 이용한 서버를 구축하기로 했습니다.

2024
0
SpringSpring Boot

[Spring] - M1 맥북에서 Embeded Redis 사용하기

목차 [Spring] - M1 맥북에서 Embeded Redis 사용하기 [Spring] - Embeded Redis 사용하기 참고 https://github.com/ozimov/embedded-redis https://github.com/redis/redis-hashes 🚫 M1 Mac 에서 Embedded Redis 사용시 에러M1 맥북에서 Embedded Redis 를 그냥 사용하려고 하면 다음과 같이 redis server 를 시작할 수 없다는 에러가 발생합니다. Caused by: java.lang.RuntimeException: Can't start redis server. Check logs for details. Redis process log: at redis.embedded.AbstractRedisInstance.awaitRedisServerReady(AbstractRedisInstance.java:70) ~[embedded-redis-0.7.3.jar:na] at redis.embedded.AbstractRedisInstance.start(AbstractRedisInstance.java:42) ~[embedded-redis-0.7.3.jar:na] 🔎 Embedded Redis 라이브러리 확인Embedded Redis 라이브러리에서 제공해주는 Redis 아키택처 정보들을 확인하면 M1 맥북에 해당하는 aarch64 용 Redis 를 지원하지 않습니다. 따라서, M1 에서 Embedded Redis 를 사용하기 위해서는 M1 용 아키택처에 맞게 Redis 를 새롭게 빌드해서 Embedded Redis 라이브러리가 띄울 수 있게 제공해야 합니다.

0
CS운영체제

쓰레드와 메모리구조

목차 Thread Safe 쓰레드와 메모리구조 쓰레드 프로세스 동기화 프로세스 스케줄링 알고리즘 프로세스 상태와 스케줄러 Inter Process Communication(프로세스간의 통신) 프로세스 메모리 영역 Process (프로세스) 참고 https://inpa.tistory.com/entry/%F0%9F%91%A9%E2%80%8D%F0%9F%92%BB-%ED%94%84%EB%A1%9C%EC%84%B8%EC%8A%A4-%E2%9A%94%EF%B8%8F-%EC%93%B0%EB%A0%88%EB%93%9C-%EC%B0%A8%EC%9D%B4 쓰레드 메모리 구조프로세스 안에서 생성되는 쓰레드는 프로세스의 메모리 영역을 사용하게 됩니다. 프로세스내 메모리 영역 중 Code, Data, Heap 영역은 모든 쓰레드가 공유해서 사용하고 각 쓰레드 별로 Stack 영역이 생성됩니다. 프로세스 메모리 구조

0
FrontendVue3

Vue3 - Component 간 통신

목차 Vue3 - Component 간 통신 Vue3 - Component Vue3 - Composition API Vue3 - Instance [Vue3] - Reactivity (반응형) Vue3 - 시작하기 Component 간 통신 - Props Props 는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전송할때 사용합니다. Vue 에서는 상위 컴포넌트에서 하위 컴포넌트로 통신하기 위한 방법으로 Props 를 제공합니다. Props 를 통해 상위 컴포넌트에서 하위 컴포넌트로 데이터를 내려줍니다. 하위 컴포넌트에서 전달 받은 Props 를 사용하기 위해v-bind 를 이용해 Props 이름=”상위컴포넌트의 데이터이름“ 형식으로 Props 를 매팽해 줍니다. <div id="app"> <app-header v-bind:title="appTitle"></app-header></div><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><script> Vue.createApp({ data() { return { appTitle: '프롭스 넘기기' } }, components: { // '컴포넌트 이름': 컴포넌트 내용 'app-header': { template: '<h1>{{title}}</h1>', props: ['title'] } } }).mount('#app')</script> Component 간 통신 - Event Event 는 하위 컴포넌트에서 상위 컴포넌트로

0
FrontendVue3

Vue3 - Component

목차 Vue3 - Component 간 통신 Vue3 - Component Vue3 - Composition API Vue3 - Instance [Vue3] - Reactivity (반응형) Vue3 - 시작하기 ComponentComponent 란 하나의 화면을 여러개의 블록으로 나눌 수 있는 단위입니다. Component 를 통해 빠르게 화면을 구조화할 수 있고 코드 재사용성이 늘어납니다. Vue 에서는 Component 를 이용한 개발을 지원합니다. 한 페이지에서 하위 컴포넌트 생성components 내 template 을 이용하면 상위 컴포넌트에서 바로 하위 컴포넌트 내용을 정의할 수 있습니다. Vue.createApp({ components: { // '컴포넌트 이름': 컴포넌트 내용 'app-header': { template: '<h1>컴포넌트 이름</h1>' } }}).mount('#app') 정의된 하위 컴포넌트는 컴포넌트 이름을 통해 상위 컴포넌트에서 사용할 수 있습니다. <div id="app"> <app-header></app-header></div>

0
FrontendVue3

Vue3 - Instance

목차 Vue3 - Component 간 통신 Vue3 - Component Vue3 - Composition API Vue3 - Instance [Vue3] - Reactivity (반응형) Vue3 - 시작하기 Vue 3 Instance 와 속성Vue.createApp({ template: , data: , methods: , created: , watch: ,}); methods<div id="app"> <p>{{count}}</p> <button v-on:click="addCount">+</button></div><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><script> Vue.createApp({ data() { return { count: 0 } }, methods: { addCount() { this.count++; } } }).mount('#app')</script> Vue Directivev-for<div id="app"> <ul> <li v-for="item in items">{{item}}</li> </ul></div><script src="https://unpkg.com/vue@3/dist/vue.global.js"></script><script> Vue.createApp({ data() { return { items: ['삼성', '네이버', '인프런'] } } }).mount('#app')</script>

0
FrontendVue3

Vue3 - Composition API

목차 Vue3 - Component 간 통신 Vue3 - Component Vue3 - Composition API Vue3 - Instance [Vue3] - Reactivity (반응형) Vue3 - 시작하기 Composition API 로 리펙토링Composition API 적용 전export default { methods: { logText() { this.pas } } data() { return { username: '', password: '', } }, methods: { submitForm() { // event.preventDefault(); const data = { username: this.username, password: this.password, } axios.post('https://jsonplaceholder.typicode.com/users/', data) .then(response => { console.log(response) }); // console.log('제출됨') } }} Composition API 적용 후export default { setup() { // data var username = ref(''); var password = ref(''); // methods var submitForm = () => { axios.post('https://jsonplaceholder.typicode.com/users/', { username: username.value, password: password.value }).then(response => { console.log(response); }) } return { username, password, submitForm } },}

0
FrontendVue3

[Vue3] - Reactivity (반응형)

목차 Vue3 - Component 간 통신 Vue3 - Component Vue3 - Composition API Vue3 - Instance [Vue3] - Reactivity (반응형) Vue3 - 시작하기 ✅ Vue3 에서의 반응형 참고: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Proxy Vue3 에서는 데이터의 변경을 감지하고 자동으로 UI 를 업데이트 해주기 위해 Javascript 의 Proxy 개념을 도입 했습니다. 객체생성시 Proxy 객체로 만듦으로써 Vue 에서는 해당 객체의 접근 및 변경을 감지하고 변경된 내용을 UI 에 반영해줄 수 있게 됐습니다. Proxy 객체 생성 예제<div id="app"></div><!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> --><script> var data = { message: 10 } function render(sth) { var div = document.querySelector('#app'); div.innerHTML = sth; } var app = new Proxy(data, { get() { console.log('값 접근') }, // target: 객체, property: 객체내 속성, value: 전달 받는 값 set(target, prop, value) { console.log('값 갱신') target[prop] = value render(value) } })</script> Proxy 객체로 생성된 app 의 내용을 변경하게 되면 콘솔에서 “값 갱신” 이라는 로그가 뜨게 됩니다.