1. Concept

1. 시작

• 복잡한 어떠한 문제들을 쉽게 만드는 것을 좋아함
• 시스템 엔지니어가 되기 위해 인프라를 공부하고 있는데 구성하는게 사실 어렵고 실수 할 일이 생각보다 많음
• 구성이 복잡해지면 머리로 구성을 생각하기가 힘들어짐

2. 어떻게?

• 구성하고자 하는 인프라의 구조를 그리면, 이것을 사용자 컴퓨터에서 가상으로 인프라를 구성할 수 있도록 해주는 프로그램이 있으면 좋지 않을까?
• no-code 또는 low-code

3. 구체화

• vue.js 를 이용해 웹 UI를 구성하고 사용자가 그려서 구성한 인프라 구성의 데이터를 가공하여 바로 vagrant 코드와 ansbile코드를 생성해 파일로 제공
• 컨테이너? 또는 가상머신? 아니면 둘다?

4. Low code, No code

• apex 101
• Mendix

2. 일단 해보기

• 윈도우에서 개발해본 경험이 거의 없어서 윈도우 cli 환경이 불편함
• 우분투 22.04 LTS 버전으로 가상머신 만들어서 개발 진행

1. UI 구성

1. 뭘로 할까

• 난 일단 웹개발 경험이 별로 없음
• 요즘 vue.js 가 여기저기서 많이 들리고 러닝커브 적고 성능도 준수하다는데,
• 이걸로 선택

2. vue.js 일단 사용해보기

1. vue.js 프로젝트 생성 (chat gpt 참고)

프로젝트 설정 및 의존성 설치:

• 프로젝트를 시작하려면 Vue CLI 또는 Vue CLI UI를 사용하여 Vue.js 프로젝트를 생성합니다. 다음으로 필요한 의존성을 설치합니다. 아래는 명령줄을 통해 Vue CLI를 사용하는 방법입니다:

# Vue CLI 설치
npm install -g @vue/cli

# Vue 프로젝트 생성
vue create infra-provisioning-app

# 필요한 의존성 설치
cd infra-provisioning-app
npm install axios vue-router

# Error: @vitejs/plugin-vue requires vue (>=3.2.13) or @vue/compiler-sfc to be present in the dependency tree.
# 위와 같은 오류 발생시
npm install vue@3.2.13 --save-dev
npm install @vue/complier-sfc --save-dev

• 하려고 했는데 npm 안됨
  npm 설치하기
• 위 방법을 참고헤서 node.js 를 설치하고 아래와 같이 프로젝트를 만들어 보았다.