Home

0

[Vue 3] - Tailwind 사용하기

1. Vue3 프로젝트 생성npm init vue@latest my-vue3-appcd my-vue3-appnpm install 2. Tailwind Css 설치Tailwind CSS와 관련된 패키지를 설치합니다. npm install -D tailwindcss postcss autoprefixer 그런 다음 Tailwind CSS 초기화를 진행합니다. npx tailwindcss init 이 명령어를 실행하면 프로젝트 루트 디렉토리에 tailwind.config.js 파일이 생성됩니다. 3. Tailwind CSS 구성

0

[Vue 3] - Pinia 사용하기

Pinia 란?Pinia 는 Vue 에서 사용하는 상태 관리를 위한 라이브러리입니다. Vue2 에서는 Vuex 를 사용하다가 Pinia 의 등장으로 점차 Pinia 가 대세를 이루게 됐습니다. Vue 에서는 ref, reactive 와 같은 상태 관리를 할 수 있는 방법들이 있는데 이런 함수들을 이용해 생성된 상태를 다른 페이지로 전달하기 위해서는 props 나 event 혹은 provide 나 inject 를 이용해 전달할 수 있지만, 파일이 많아질수록 추적하기가 복잡해집니다. Pinia 를 사용하는 이유는 상태를 관리하는 로직을 분리할 수 있고 중앙 집중식 으로 관리할 수 있다는 이점 때문에 그렇습니다. 1. Pinia 설치npm install pinia 2. Pinia 모듈 추가하기main.tsimport { createApp } from 'vue';import { createPinia } from 'pinia';import App from './App.vue';const app = createApp(App);const pinia = createPinia();app.use(pinia);app.mount('#app'); 3. Pinia Store 생성

0

[Vue 3] - unplugin-vue-router 사용하기

참고https://github.com/posva/unplugin-vue-router vue 에서는 새로운 페이지를 생성할때마다 vue-router 에 직접 등록해줘야 하는 번거로움이 있습니다. 이런 수고스러움을 좀 덜고자 찾아보니 vue 에서도 next 나 nuxt 처럼 파일 기반으로 라우팅을 할 수 있게 지원해주는 모듈을 찾게 됐습니다. 1. unplugin-vue-router 모듈을 설치npm i -D unplugin-vue-router 2. vite.config.ts 에 다음 내용을 추가해 줍니다.vite.config.tsimport { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import VueRouter from 'unplugin-vue-router/vite';// https://vitejs.dev/config/export default defineConfig({ plugins: [vue(), VueRouter({})],}) 3. tsconfig.json 설정 정보 추가tsconfig.json{ "compilerOptions": { // ... "moduleResolution": "Bundler", // ... "types": ["unplugin-vue-router/client"], } // ... "include": [ // ... "./typed-router.d.ts" ],}

0

[Spring Boot] - Cache

목차 Post not found: spring-boot/spring-framework/springboot-actuator Post not found: spring-boot/spring-framework/springboot-messageresource Post not found: spring-boot/spring-framework/configuration/springboot-WebMvcConfigurer Post not found: spring-boot/spring-framework/configuration/springboot-autoconfiguration 참고 https://docs.spring.io/spring-boot/docs/2.1.6.RELEASE/reference/html/boot-features-caching.html https://www.baeldung.com/spring-cache-tutorial Spring Boot 캐시 추상화Spring Boot 에서는 캐시를 쉽게 사용할 수 있도록 캐싱 기능들을 추상화해 제공합니다. 캐싱 추상화 가능으로 개발자는 특정 캐시 저장소에 종속적이지 않고 일관된 방식으로 캐싱기능을 사용할 수 있습니다. ✅ 의존성 추가implementation 'org.springframework.boot:spring-boot-starter-cache' ✅ Cache 활성화

0

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

목차 [쿠버네티스 DevOps 구축] - OpenSearch 설치하기 [쿠버네티스 DevOps 구축] - Prometheus 와 Grafana 설치하기 [쿠버네티스 DevOps 구축] - Keycloak 설치하기 [쿠버네티스 DevOps 구축] - Ingress Nginx Controller 설치하기 [쿠버네티스 DevOps 구축] - Local PC 쿠버네티스 동적 프로비저닝을 위한 StorageClass 설치 [쿠버네티스 DevOps 구축] - Local PC 에 쿠버네티스 설치하기 참고 https://blog.pages.kr/2844 https://opendistro.github.io/for-elasticsearch-docs/docs/security/access-control/api/#reserved-and-hidden-resources https://forum.opensearch.org/t/default-password-reset/102/10 Admin Password 변경 https://github.com/opendistro-for-elasticsearch/opendistro-build/issues/558 https://opendistro.github.io/for-elasticsearch-docs/docs/security/configuration/yaml/#internal_usersyml https://github.com/opensearch-project/helm-charts/issues/161 ✅ OpenSearch 설치# Helm Repo 추가helm repo add opensearch https://opensearch-project.github.io/helm-charts/# OpenSearch 설치helm upgrade --install opensearch \ -f ./values-opensearch.yaml opensearch/opensearch \ -n logging --create-namespace Release "opensearch" has been upgraded. Happy Helming!NAME: opensearchLAST DEPLOYED: Thu Jan 18 15:55:28 2024NAMESPACE: loggingSTATUS: deployedREVISION: 2TEST SUITE: NoneNOTES:Watch all cluster members come up. $ kubectl get pods --namespace=logging -l app.kubernetes.io/component=opensearch-cluster-master -w ✅ OpenSearch Dashboard 설치helm upgrade --install opensearch-dashboard \ -f ./values-opensearch-dashboards.yaml opensearch/opensearch-dashboards \ -n logging --create-namespace

0

[쿠버네티스 DevOps 구축] - Prometheus 와 Grafana 설치하기

목차 [쿠버네티스 DevOps 구축] - OpenSearch 설치하기 [쿠버네티스 DevOps 구축] - Prometheus 와 Grafana 설치하기 [쿠버네티스 DevOps 구축] - Keycloak 설치하기 [쿠버네티스 DevOps 구축] - Ingress Nginx Controller 설치하기 [쿠버네티스 DevOps 구축] - Local PC 쿠버네티스 동적 프로비저닝을 위한 StorageClass 설치 [쿠버네티스 DevOps 구축] - Local PC 에 쿠버네티스 설치하기 ✅ 메트릭 수집을 위한 Prometheus서비스를 올렸다고 해서 끝이 아니다! 서비스를 운용하는 입장에서는 시스템이 안정적인지 지속적으로 확인을 해야 하는데, 운영하는 서비스의 CPU 사용률, 메모리 사용률과 같은 메트릭 정보를 지속적으로 수집하는 시스템을 구축해야 합니다. 저는 대중적으로 많이 알려진 Prometheus 를 이용해 쿠버네티스에서 운영중인 서비스에 대한 메트릭 정보를 수집하려고 합니다. Helm 을 이용한 Prometheus 설치# helm repo 추가helm repo add prometheus-community https://prometheus-community.github.io/helm-charts# prometheus 설치helm upgrade --install -f ./values-prometheus.yaml prometheus prometheus-community/prometheus -n monitoring --create-namespace Release "prometheus" does not exist. Installing it now.NAME: prometheusLAST DEPLOYED: Fri Nov 15 10:11:47 2024NAMESPACE: monitoringSTATUS: deployedREVISION: 1TEST SUITE: NoneNOTES:The Prometheus server can be accessed via port 80 on the following DNS name from within your cluster:prometheus-server.monitoring.svc.cluster.localGet the Prometheus server URL by running these commands in the same shell: export POD_NAME=$(kubectl get pods --namespace monitoring -l "app.kubernetes.io/name=prometheus,app.kubernetes.io/instance=prometheus" -o jsonpath="{.items[0].metadata.name}") kubectl --namespace monitoring port-forward $POD_NAME 9090####################################################################################### WARNING: Persistence is disabled!!! You will lose your data when ########### the Server pod is terminated. ######################################################################################The Prometheus alertmanager can be accessed via port 9093 on the following DNS name from within your cluster:prometheus-alertmanager.monitoring.svc.cluster.localGet the Alertmanager URL by running these commands in the same shell: export POD_NAME=$(kubectl get pods --namespace monitoring -l "app.kubernetes.io/name=alertmanager,app.kubernetes.io/instance=prometheus" -o jsonpath="{.items[0].metadata.name}") kubectl --namespace monitoring port-forward $POD_NAME 9093####################################################################################### WARNING: Persistence is disabled!!! You will lose your data when ########### the AlertManager pod is terminated. ############################################################################################################################################################################# WARNING: Pod Security Policy has been disabled by default since ########### it deprecated after k8s 1.25+. use ########### (index .Values "prometheus-node-exporter" "rbac" ########### . "pspEnabled") with (index .Values ########### "prometheus-node-exporter" "rbac" "pspAnnotations") ########### in case you still need it. ######################################################################################The Prometheus PushGateway can be accessed via port 9091 on the following DNS name from within your cluster:prometheus-prometheus-pushgateway.monitoring.svc.cluster.localGet the PushGateway URL by running these commands in the same shell: export POD_NAME=$(kubectl get pods --namespace monitoring -l "app=prometheus-pushgateway,component=pushgateway" -o jsonpath="{.items[0].metadata.name}") kubectl --namespace monitoring port-forward $POD_NAME 9091For more information on running Prometheus, visit:https://prometheus.io/ ✅ 모니터링을 위한 Grafana메트릭 수집을 위한 Prometheus 를 설치 했는데! 단순 메트릭 정보만 있으면 운영하는 입장에서 가시적으로 와 닿지 않습니다.

0

[쿠버네티스 DevOps 구축] - Ingress Nginx Controller 설치하기

목차 [쿠버네티스 DevOps 구축] - OpenSearch 설치하기 [쿠버네티스 DevOps 구축] - Prometheus 와 Grafana 설치하기 [쿠버네티스 DevOps 구축] - Keycloak 설치하기 [쿠버네티스 DevOps 구축] - Ingress Nginx Controller 설치하기 [쿠버네티스 DevOps 구축] - Local PC 쿠버네티스 동적 프로비저닝을 위한 StorageClass 설치 [쿠버네티스 DevOps 구축] - Local PC 에 쿠버네티스 설치하기 참고 https://kubernetes.github.io/ingress-nginx/ https://github.com/nginxinc/kubernetes-ingress https://artifacthub.io/packages/helm/ingress-nginx/ingress-nginx https://www.nginx.com/blog/guide-to-choosing-ingress-controller-part-4-nginx-ingress-controller-options/ https://kubernetes.github.io/ingress-nginx/deploy/#bare-metal-clusters Ingress Controller 설치현재 설치된 쿠버네티스에서는 Ingress 를 생성 하더라도 외부 요청을 Ingress 설정에 맞게 외부 요청을 내부 서비스로 전달해주는 Controller 가 따로 없습니다. 다시 말해, 규칙을 생성하더라도 규칙을 읽어서 적용시켜주는 모듈이 없는 상태입니다. 보통, 클라우스 서비스에서는 ALB 나 NLB 와 같은 서비스를 이용해 Ingress 정책을 읽어 Load Balancing 규칙을 적용해주는데, 개인 쿠버네티스 서비스에서는 저런 시스템을 기대하기 힘듦으로 저는 Nginx 에서 제공해주는 Ingress Controller 를 이용하려고 합니다. Helm 설치helm upgrade --install ingress-nginx ingress-nginx \ --repo https://kubernetes.github.io/ingress-nginx \ --namespace ingress-nginx --create-namespace

0

[쿠버네티스 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

[쿠버네티스 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

[쿠버네티스 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 를 이용한 서버를 구축하기로 했습니다.