Portainer 사용해보기

Portainer는 “Docker Desktop의 웹 버전”처럼, 브라우저에서 컨테이너, 이미지, 볼륨 등을 클릭으로 관리할 수 있게 해주는 툴이다. 1. 이미지 다운로드docker pull portainer/portainer-ce 2. portainer_data를 공유하는 volume 생성docker volume create portainer_dataPortainer의 영구 데이터 저장소(설정, 사용자 정보 등)를 저장할 Docker 볼륨을 생성한다. 이 볼륨은 컨테이너가 삭제되어도 데이터를 유지할 수 있게 해준다.3. 컨테이너 실행하기docker run -d -p 9000:9000 -v /var/run/docker.sock:/var/run/docker.sock -v portainer_data:/dat..

• format_list_bulleted 개발환경/Docker
• · 2025. 5. 11.
• textsms

컨테이너 가상화란

컨테이너 기술이란?컨테이너는 애플리케이션을 실행하는 데 필요한 모든 요소(소스코드, 구성 파일, 라이브러리, 종속성 등)를 하나의 단위로 패키징한 논리적 실행 환경입니다. 이를 통해 어떤 환경에서도 일관되게 애플리케이션을 실행할 수 있으며, 배포와 운영이 용이해집니다. 컨테이너 실행 환경을 구성하는 단위를 이미지(Image)라고 부릅니다. 이미지는 도커에서는 Dockerfile을 통해 정의하며, 애플리케이션의 실행에 필요한 설정과 명령어들이 코드 형태로 담겨 있습니다. Dockerfile을 기반으로 이미지를 빌드하는 과정은 인프라 구성을 코드로 관리하는 Infrastructure as Code (IaC)에 해당합니다. 컨테이너는 호스트 운영체제의 커널을 공유하면서 실행되는 격리된 프로세스입니다. VM처럼..

• format_list_bulleted 개발환경/Docker
• · 2025. 5. 7.
• textsms

마이크로 프론트엔드 - 다른 서버의 React 컴포넌트를 동적으로 지정하기

이번에는 지난 포스팅 글에서 React 컴포넌트를 동적으로 사용하는 것에 이어서 동적으로 지정하는 부분을 이어서 진행해보고자 한다. main-app에서 다른 서버의 컴포넌트 동적으로 지정하기먼저 App.tsx에서 dynamic 경로로 Button을 import하는 코드를 작성해보도록 하자.// @ts-ignoreconst Button = React.lazy(() => import("dynamic/Button"));const App = () => { const [button, setButton] = useState({}); function setButtonFromComponentApp1() { setButton({ // url: "http://localhost:3001/remoteEntr..

• format_list_bulleted 프론트엔드 개발
• · 2025. 5. 4.
• textsms

마이크로 프론트엔드 - 다른 서버의 React 컴포넌트를 동적으로 사용하기

main-app에서 특정 조건에 따라 다른 서버에의 컴포넌트를 동적으로 사용하는 프로젝트를 만들어보도록 하자.루트 프로젝트 세팅pnpm initcorepack use pnpm@8.10.0 pnpm-workspace.yaml 생성packages: - "apps/*" 마이크로 앱 세팅apps 디렉토리에서 다음 명령어를 통해 마이크로 앱을 설치해주도록 하자.pnpm create mf-app 각 마이크로 앱의 이름을 main-app, component-app1, component-app2으로 짓도록 하자. component-app1, component-app2 세팅먼저 components 디렉토리에 Button.tsx를 생성하고 App.tsx에서 이 버튼을 사용하도록 하자..// components/Butto..

• format_list_bulleted 프론트엔드 개발
• · 2025. 5. 3.
• textsms

마이크로 프론트엔드 - 전역 Redux 사용 시, 다른 서버의 React 컴포넌트를 가져오면서 리듀서를 추가하기

main-app에서 redux store를 생성하고, remote app이 로드될 때 동적으로 리듀서를 추가하는 방식으로 진행해보도록 하자. 루트 프로젝트 세팅pnpm initcorepack use pnpm@8.10.0 pnpm-workspace.yaml 생성packages: - "apps/*" 마이크로 앱 세팅apps 디렉토리에서 다음 명령어를 통해 마이크로 앱을 설치해주도록 하자.pnpm create mf-app 각 마이크로 앱의 이름을 main-app, remote-app으로 짓도록 하자. main-app과 remote-app에 redux, react-redux를 설치해주도록 하자.pnpm --filter main-app add @reduxjs/toolkit react-reduxpnpm --fil..

• format_list_bulleted 프론트엔드 개발
• · 2025. 5. 3.
• textsms

마이크로 프론트엔드 - 여러 페이지가 있는 두 개의 앱을 하나로 통합하기

이번에는 라우터가 있는 마이크로 앱을 통합시키는 프로젝트를 진행해보도록 하자. 루트 프로젝트 세팅pnpm initcorepack use pnpm@8.10.0 pnpm-workspace.yaml 생성packages: - "apps/*" 마이크로 앱 세팅apps 디렉토리에서 다음 명령어를 통해 마이크로 앱을 설치해주도록 하자.pnpm create mf-app 각 마이크로 앱의 이름을 app-shell, app-jobs, app-network으로 짓도록 하자. app-shell은 router를 갖고 있는 마이크로 앱을 통합(연결)해주는 역할을 하는 마이크로 앱이다. 그 다음 각각의 마이크로 앱에 react-router-dom을 설치해주도록 하자.pnpm --filter app-shell add react-r..

• format_list_bulleted 프론트엔드 개발
• · 2025. 5. 2.
• textsms