Old Branch 102

[Docker 위의 웹서버] 프로젝트 세팅 (5) - vue 도커라이징

GITHUB paullee714/Flask-Vue-ELK-Mongo-Docker Structure 아래와 같은 구조로 진행하고 있다. 오늘 작업 할 내용은 docker-compose.yml의 수정과 web/front/front.Dockerfile을 만들어 줄 것이고 동작 확인을 위해 back-front연동을 해 보려고 한다. ├── ELK │ ├── elasticsearch │ │ ├── config │ │ ├── data │ │ └── elastic.Dockerfile │ ├── kibana │ │ ├── config │ │ └── kibana.Dockerfile │ └── logstash │ ├── config │ ├── logstash.Dockerfile │ └── pipeline ├── READM..

Old Branch 2020.08.28

[Docker 위의 웹서버] 프로젝트 세팅 (4) - vue 세팅 및 연동

GITHUB paullee714/Flask-Vue-ELK-Mongo-Docker Vue 설정 및 초기화 yarn 나는 npm보다는 yarn을 선호한다. (npm으로 진행하면 뭔가 좀 더 설치하는 느낌....) 로컬에 yarn이 설치 되어 있는지 확인한 후에 없다면 설치 해준다. 확인 방법은 아래의 방법으로 진행하면 된다. $ yarn --version Vue - yarn global add Vue CLI Vue CLI 3.0 사용하기 yarn으로 vue를 설치 해 준다 $ yarn global add @vue/cli Vue Project init PROJECT ROOT ├── ELK │ ├── elasticsearch │ ├── kibana │ └── logstash ├── README.md ├── do..

Old Branch 2020.08.27

[Docker 위의 웹서버] 프로젝트 세팅 (3) - Flask 세팅

GITHUB paullee714/Flask-Vue-ELK-Mongo-Docker 프로젝트 세팅.. 이전 글에서는 ELK 스택을 docker화 하기 위한 confg, Dockerfile 들을 작성하였다. 이번 글에서는 ELK스택으로 분석할 로그가 있는 flask서버를 작성하고, docker-compose에 추가 해 줄 것이다 Flask-Vue-ELK-Mongo-Docker ├── ELK │ ├── elasticsearch │ ├── kibana │ └── logstash ├── README.md ├── docker-compose.yml └── web └── back 6 directories, 2 files web - 플라스크 서버 web 구조 front / back을 나누어서 작업하려고 한다. 현재는 fr..

Old Branch 2020.08.26

[Docker 위의 웹서버] 프로젝트 세팅 (2) - ELK 세팅

GITHUB paullee714/Flask-Vue-ELK-Mongo-Docker 프로젝트 세팅 이전 글에서 프로젝트 세팅을 해 줄 도구들을 보았다. ELK (ElasticSearch, Logstash, Kibana) Docker, docker-compose 위의 도구들을 이용해서 프로젝트를 세팅 해 보도록 하려고 한다. Docker Build를 위한 구상 Docker와 docker-compose를 사용해서 Build하려고 한다. Dockerfile은 총 4개로 구성 할 것이다. ElasticSearch Logstash Kibana Flask(python3) 각각의 Dockerfile을 Build하고, Build한 Docker를 하나의 network로 묶어 주려고 한다. 이번 글에서는 ELK 세팅을 하려고..

Old Branch 2020.08.25

[Docker 위의 웹서버] 프로젝트 세팅 (1) - ELK-Flask 패키지 준비

ELK ELK는 ElasticSearch, Logstach, Kibana로 묶은 하나의 플랫폼이라고 생각하면 된다. 각각의 특징을 우선 살펴보려고 한다. Elasticsearch란? ElasticSearch ElasticSearch의 공식 페이지에 나와있는 내용이다. 아래와 같은 서비스들에 사용 할 수 있다. 애플리케이션 검색 웹사이트 검색 엔터프라이즈 검색 로깅과 로그 분석 인프라 메트릭과 컨테이너 모니터링 애플리케이션 성능 모니터링 위치 기반 정보 데이터 분석 및 시각화 보안 분석 비즈니스 분석 Kibana ElasticSearch의 데이터를 시각화 해주는 관리 도구이다. 실시간으로 반영되는 시각화 도구로 데이터의 흐름을 분석 할 수 있다. Logstash Logstash는 데이터를 집계하고 처리해서..

Old Branch 2020.08.24

Vue.js & Flask 로그인/로그아웃 (4) - Vue.js Component 연동하기

이전 글 첨부 [Master_branch/develop_branch] - Vue.js & Flask - 개발환경구축하기 [Master_branch/develop_branch] - Vue.js & Flask - 컴포넌트와 api 연동(1) - backend [Master_branch/develop_branch] - Vue.js & Flask - 컴포넌트와 api 연동(2) - frontend [Master_branch/develop_branch] - Vue.js & Flask - 데이터 주고받기 (axios) [Master_branch/develop_branch] - Vue.js & Flask - 데이터 주고받기 axios(2) button binding [Master_branch/develop_branc..

Old Branch 2020.08.23

Vue.js & Flask 로그인/로그아웃 (3) - Flask Auth Token 적용하기

이전 글 첨부 [Master_branch/develop_branch] - Vue.js & Flask - 개발환경구축하기 [Master_branch/develop_branch] - Vue.js & Flask - 컴포넌트와 api 연동(1) - backend [Master_branch/develop_branch] - Vue.js & Flask - 컴포넌트와 api 연동(2) - frontend [Master_branch/develop_branch] - Vue.js & Flask - 데이터 주고받기 (axios) [Master_branch/develop_branch] - Vue.js & Flask - 데이터 주고받기 axios(2) button binding [Master_branch/develop_branc..

Old Branch 2020.08.22

Vue.js & Flask 로그인/로그아웃 (2) - Flask Auth API 만들기

이전 글 첨부 [Master_branch/develop_branch] - Vue.js & Flask - 개발환경구축하기 [Master_branch/develop_branch] - Vue.js & Flask - 컴포넌트와 api 연동(1) - backend [Master_branch/develop_branch] - Vue.js & Flask - 컴포넌트와 api 연동(2) - frontend [Master_branch/develop_branch] - Vue.js & Flask - 데이터 주고받기 (axios) [Master_branch/develop_branch] - Vue.js & Flask - 데이터 주고받기 axios(2) button binding [Master_branch/develop_branc..

Old Branch 2020.08.21

Vue.js & Flask 로그인/로그아웃 (1) - Docker DB 세팅하기

이전 글 첨부 [Master_branch/develop_branch] - Vue.js & Flask - 개발환경구축하기 [Master_branch/develop_branch] - Vue.js & Flask - 컴포넌트와 api 연동(1) - backend [Master_branch/develop_branch] - Vue.js & Flask - 컴포넌트와 api 연동(2) - frontend [Master_branch/develop_branch] - Vue.js & Flask - 데이터 주고받기 (axios) [Master_branch/develop_branch] - Vue.js & Flask - 데이터 주고받기 axios(2) button binding Vue.js & Flask를 docker-compo..

Old Branch 2020.08.20

Vue.js & Flask - 데이터 주고받기 axios(2) button binding

이전 글 첨부 [Master_branch/develop_branch] - Vue.js & Flask - 개발환경구축하기 [Master_branch/develop_branch] - Vue.js & Flask - 컴포넌트와 api 연동(1) - backend [Master_branch/develop_branch] - Vue.js & Flask - 컴포넌트와 api 연동(2) - frontend [Master_branch/develop_branch] - Vue.js & Flask - 데이터 주고받기 (axios) Vue에서 생성한 button과 function을 바인딩 해 보도록 하려고 한다 깃허브 소스는 링크로 첨부한다 → 링크 Vue-Flask Data Binding 이전의 글에서 axios로 front와..

Old Branch 2020.08.19
반응형