전체 글26 [Nginx] SSL, 리버스 프록시 설정하기 개요 현재 프론트엔드 애플리케이션의 경우 Cloudflare Pages를 이용하여 배포해 사용중입니다. 프론트엔드에서 리버스 프록시 서버를 통해 백엔드 API에 접근할 수 있도록 하려고 합니다. 리버스프록시 서버에는 SSL을 적용하고 하위서버들은 SSL을 적용하지 않은 상태로 통신할 수 있습니다. 환경 Azure VM Ubuntu 20.04.4 LTS nginx/1.18.0 (Ubuntu) Cloudflare에 설정된 도메인 Nginx 설치 sudo apt update sudo apt-get install nginx /etc/nginx/경로에 nginx 관련 파일들이 설치됩니다. nginx -v 명령어를 사용해 버전을 확인할 수 있습니다. Certbot 이용하여 인증서 발급 certbot 홈페이지에 들어.. 2022. 8. 8. [Linux] Swap 메모리 설정 개요 토이 프로젝트를 할 때 AWS나 Azure 같은 클라우드 서비스를 사용할 때가 많습니다. 무료로 제공하는 인스턴스의 경우 메모리 용량도 작고, 그렇다고 사양을 올리려고 하면 가격이 부담되는 경우가 많습니다. 이 때 느리긴 하지만 부족한 메모리를 Swap 메모리 설정을 통해 RAM이 부족한 상황을 해결할 수 있습니다. Swap 메모리 하드디스크 공간의 일부분을 메모리로 사용하는 방법입니다. 하드디스크를 사용하는 만큼 기존 메모리보다 속도가 현저히 떨어집니다. 환경 Azure VM Ubuntu 20.04.4 LTS Swap 메모리 설정 보통 Swap 파일의 용량은 기존 메모리의 1.5~2배 정도의 용량을 권장하고 있습니다. fallocate나 dd 명령어를 이용하여 스왑 파일을 생성할 수 있습니다. #.. 2022. 8. 8. [Nuxt] Nuxt3에서 pinia-plugin-persistedstate 사용하여 Pinia 상태 유지하기 pinia-plugin-persistedstate pinia로 상태 관리를 하는 경우 화면을 새로고침 할 때 store 안에 존재하는 값들이 초기화 된다. 이 때 로컬 스토리지를 이용하여 상태를 유지할 수 있는데 이를 간편하게 해주는 플러그인이다. vuex의 vuex-persistedstate와 유사하다. 설치 및 설정 방법 yarn add pinia-plugin-persistedstate 로컬 스토리지를 사용하도록 설정 // plugins/persistedstate.client.ts import { createPersistedState } from "pinia-plugin-persistedstate"; export default defineNuxtPlugin((nuxtApp) => { nuxtApp.$.. 2022. 8. 2. [TypeORM] Azure MySQL DB와 암호화 통신하기 MySQL TLS 통신 데이터베이스와 통신을 하는 경우 기본적으로 암호화 보안 프로토콜인 SSL/TLS이 권장된다. SSL/TLS로 통신을 하는 경우 전달하는 데이터의 기밀성, 데이터 무결성, 인증을 제공한다. 따라서 중간자 공격(MITM)으로부터 보호할 수 있다. MySQL은 설정을 통해 SSL 통신을 유무를 설정할 수 있고, 버전에 따라 지원하는 SSL/TLS 통신이 다르다. 만약 직접 데이터베이스를 구축하고, SSL/TLS 구성을 해야한다면 다음을 참고하여 설정을 할 수 있다. Creating SSL and RSA Certificates and Keys using MySQL Database에서 지원하는 SSL/TLS 설정 현재 토이프로젝트에선 Azure Database for MySQL을 사용하고 .. 2022. 7. 17. [Nuxt] Nuxt3에서 Windi CSS + Iconify 사용하기 Windi CSS Windy CSS는 CSS 프레임워크로 Tailwind CSS의 대안으로 소개되었다. 클래스 그루핑과 공통 클래스 선언을 할 수 있고 Tailwind보다 빌드 타임이 빠르다고 한다. 아래 설정한 내용은 Github에서 확인할 수 있다. Windi CSS 설치 nuxt-windicss와 animation을 위해 플러그인도 같이 설치했다. yarn add nuxt-windicss @windicss/plugin-animations nuxt.config 설정 buildModules에 nuxt-windicss를 추가해주면 된다. import { defineNuxtConfig } from 'nuxt3' export default defineNuxtConfig({ buildModule.. 2022. 7. 7. [Nuxt] Nuxt3에서 Vuetify + mdi 사용하기 Vuetify Vue.js 기반의 UI 프레임워크다. Material Design Spec에 따라 개발되었다. 현재 2.x.x 버전은 Vue3를 지원하지 않기 때문에 Nuxt3에서는 Vuetify 3버전 이상을 사용해야 한다. 아래 설정한 내용은 Github에서 확인할 수 있다. Vuetify 설치 sass와 vuetify 최신 버전을 설치해야 한다. yarn add vuetify@next sass 설치를 하고 나면 package.json파일이 아래와 유사한 형태가 될 것이다. { "private": true, "scripts": { "build": "nuxt build", "dev": "nuxt dev", "generate": "nuxt generate", "preview": "nuxt preview".. 2022. 7. 7. 이전 1 2 3 4 5 다음
