국회도서관자료검색25 AWS EC2에 포트 별 docker run 하고 웹에서 확인하기 #25 이전까지 국회도서관 자료검색을 위해 만들었던Front-End의 vue cli 프로젝트와 Back-End의 django 프로젝트를 docker로 만들어서 AWS EC2에 옮겨놨다. 이제는 이 docker 를 실행해 보도록 한다. 참고로 docker compose 는 이번에 작업하지 않았다.실제로도 front-end 와 back-end는 동시에 배포될 일도 적어서 각각 docker file을 배포하고 실행하는 것으로 진행한다. 몇 가지 docker 주요 명령어를 소개한다.docker psdocker 컨테이너의 상태를 모니터링하기 위한 기본 명령어.컨테이너의 현재 상태, 이미지, 포트 정보 등을 확인할 수 있다.docker stop {container id}선택한 docker container 중지docker.. 2024. 9. 6. AWS EC2 생성하고 docker hub 의 tag URL 로 pull 하기 #24 이번에는 AWS EC2에서 docker hub에 올려놓은 docker를 가져오는 것을 해본다. AWS EC2 인스턴스 생성AWS 에 접속한 후 EC2 대시보드로 이동한다.EC2 대시보드에서 인스턴스 시작 버튼을 클릭한다.여기에서 나는 Amazon Linux 2023 AMI 프리티어 사용가능으로 신청한다.신청 후 해당 인스턴스의 콘솔에 접속한다.콘솔화면이로써 AWS EC2 서버를 Amazon Linux 2023 AMI로 생성했고, 해당 서버에 접근했다.앞으로 해당 서버에 필요한 것들을 설치한다.방금 만든 EC2 는 깡통이니, docker를 설치한다.sudo apt-get updateapt-get은 Debian 및 Ubuntu 계열의 리눅스 배포판에서 패키지 관리를 담당하는 도구update는 패키지 목록을 .. 2024. 9. 5. docker 파일 빌드하고 태그달고 docker hub 로 push 하기 #23 django 프로젝트에 작성했던 Dockerfile 빌드Dockerfile 있는 디렉터리로 이동한다.아래 명령어로 docker build 한다.docker build --platform linux/amd64 -t pubdapi-image-aws:pa0.1 .--platform linux/amd64 부분은 맥북에서 테스트할 때는 뺀다. aws ec2를 linux로 생성하는 경우 맞추기 위한 옵션이다.[+] Building 20.0s (13/13) FINISHED 가 나오면 성공이다.해당 이미지는 docker desktop에서 확인 가능하다.▶ docker desktop 에서 조회되는 이미지 : pubdapi-image-aws:pa0.1vue cli 프로젝트에 작성했던 Dockerfile 빌드Dockerfi.. 2024. 9. 4. docker desktop 설치하고 docker hub repository 생성하기 #22 Dockerfile을 생성했다면, 이제 docker desktop을 설치한다. ☞ Dockerfile 생성은 이전 글 참고https://yuneenelife.tistory.com/entry/vue-cli-프로젝트-Dockerfile-생성하기-20 vue cli 프로젝트 Dockerfile 생성하기 #20vue cli 프로젝트의 Dockerfile 생성하기vue cli는 기본적인 웹서버 기능도 있기 때문에 로컬 개발 시에는 웹서버가 필요 없었다.하지만 배포를 할 때에는 웹서버를 설치하고 vue 배포 파일들인 dist 폴yuneenelife.tistory.comdocker 사이트 접속☞ https://docker.com/각자 환경에 맞는 버전으로 다운로드 받는다.docker desktop 설치docker d.. 2024. 9. 3. python django 프로젝트 Dockerfile 생성하기 #21 python django 프로젝트의 Dockerfile 생성하기django framework의 프로젝트를 컨테이너 화하기 위한 설정을 정의한다.이 Dockerfile은 Python 3.12 기반의 컨테이너에서 django 앱을 실행하기 위한 환경을 설정한다.개발환경과 같이 Python 가상환경을 사용해 의존성을 관리하며, Nginx와 같은 외부 웹 서버 없이 django 개발 서버를 사용해 컨테이너 내부에서 애플리케이션을 직접 실행한다.개발환경과 같이 4000 포트를 통해 외부에서 접근 가능하게 하고, 컨테이너가 시작되면 django 서버가 자동으로 시작되게 한다.django requirements.txt 생성dockerfile 을 생성하기 전에 먼저 django 프로젝트에서 개발하면서 설치된 패키지들을.. 2024. 9. 2. vue cli 프로젝트 Dockerfile 생성하기 #20 vue cli 프로젝트의 Dockerfile 생성하기vue cli는 기본적인 웹서버 기능도 있기 때문에 로컬 개발 시에는 웹서버가 필요 없었다.하지만 배포를 할 때에는 웹서버를 설치하고 vue 배포 파일들인 dist 폴더를 압축해서 업로드해야 하는데,이를 docker 를 이용하여 배포해 본다. vue cli Dockerfile 생성파일명과 대소문자 그대로 Dockerfile을 루트 디렉터리에 신규 생성한다.package.json 있는 곳과 동일한 위치파일명은 DockerfileFROM node:lts-alpine AS build-stageWORKDIR /pubdwebCOPY package*.json ./RUN npm install --productionCOPY . .RUN npm run buildFROM.. 2024. 8. 29. vue js 배포 파일 dist 생성하기 #19 공공데이터 포털 국회도서관 자료검색 만든 결과물을 docker 파일로 빌드하여 AWS EC2 에 배포하는 것까지 진행한다. 전체 진행 흐름은 아래와 같이 진행한다.vue cli 프로젝트의 배포파일 dist 를 생성한다.vue 프로젝트에 Dockerfile 생성한다.python django 프로젝트에 Dockerfile 생성한다.docker desktop 설치하고 docker hub 계정 생성한다.docker 파일 빌드하고 docker hub 의 repository 로 push 한다.AWS EC2 에 docker hub 에 push 한 docker file 을 pull 한다.AWS EC2 에서 docker 실행(run) 한다.이번 장에는 1번 vue cli 프로젝트의 배포파일 dist 를 생성한다.vue.. 2024. 8. 28. django, vue cli 이용해서 개발한 국회도서관 자료 검색 화면 및 적용 기술 #18 지금까지 적용된 국회도서관 자료검색 화면과 적용된 기술에 대해 정리한다.국회도서관 자료검색 흐름도 스케치는 어떻게?https://yuneenelife.tistory.com/entry/국회도서관-자료-검색-vuejs-화면-스케치-14 국회도서관 자료 검색 vue.js 화면 스케치 #14국회도서관 도서검색은 5개의 흐름으로 진행한다.검색어 입력검색어로 국회도서관 도서검색 API 호출도서검색된 결과 리스트 노출특정 도서 클릭클릭된 도서의 상세정보 노출5개의 흐름을 3개yuneenelife.tistory.com공공데이터 포털 API 사용은 어떻게?https://yuneenelife.tistory.com/entry/공공데이터-포털-에서-원하는-서비스-API-신청하기-4 공공데이터 포털 에서 원하는 서비스 API .. 2024. 8. 23. vuetify v-data-table 적용하기, vue modal 모달 화면 구성하기 #17 국회도서관 자료검색 마지막 페이지인 상세페이지는 모달화면으로 작성한다.이 페이지에서는 parent 화면에서 넘어온 파라미터로 v-data-table을 적용해 본다. ☞ 소스 개발순서는 이전 글 참고https://yuneenelife.tistory.com/entry/vue-v-router-통해-타-페이지-호출-방법-및-데이터-전달-방법-15 vue v-router 통해 타 페이지 호출 방법 및 데이터 전달 방법 #15v-router로 타 페이지 호출하고, 데이터를 전달하는 방법은국회도서관 자료검색 화면을 개발하면서 적용한다.vue cli 로 화면을 개발하기 위해 먼저 개발 순서를 정하고, 이후 하나씩 개발하면서 v-ryuneenelife.tistory.comvuetify v-data-tablev-data-.. 2024. 8. 22. vue axios 로 외부 API 호출 응답 받기, vue cli 환경변수 env 세팅 #16 Axios 란node.js 와 브라우저를 위한 Promise 기반 HTTP 클라이언트 라이브러리☞ 보다 자세한 정보는 아래 링크 참고https://axios-http.com/kr/docs/intro 이번에는 국회도서관 자료검색 리스트 페이지를 개발하면서이전에 개발했던 django API 서버와 HTTP 통신하는 로직을 개발해 본다. Axios 설치외부 연계를 위한 HTTP 클라이언트 라이브러리 설치pubdweb 디렉터리로 이동한다.npm install axios으로 설치한다.pubdweb % npm install axiospubdweb % ☞ 소스 개발순서는 이전 글 참고https://yuneenelife.tistory.com/entry/vue-v-router-통해-타-페이지-호출-방법-및-데이터-전달-.. 2024. 8. 21. 이전 1 2 3 다음
