vue cli7 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. 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. 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. vue v-router 통해 타 페이지 호출 방법 및 데이터 전달 방법 #15 v-router로 타 페이지 호출하고, 데이터를 전달하는 방법은국회도서관 자료검색 화면을 개발하면서 적용한다.vue cli 로 화면을 개발하기 위해 먼저 개발 순서를 정하고, 이후 하나씩 개발하면서 v-router를 적용한다. ☞ vue router 설치는 이전 글 참고https://yuneenelife.tistory.com/entry/vue-router-vuetify-설치하기-13 vue router, vuetify 설치하기 #13vue router ?페이지간 이동을 위해 필요한 vue router 설치.Vue.js의 공식 라우터로 Vue.js 코어와 긴밀히 통합되어 Vue.js로 단일 페이지 애플리케이션을 쉽게 구축할 수 있게 해 준다.☞ 공식 사이트https://yuneenelife.tistory... 2024. 8. 20. vue router, vuetify 설치하기 #13 vue router ?페이지간 이동을 위해 필요한 vue router 설치.Vue.js의 공식 라우터로 Vue.js 코어와 긴밀히 통합되어 Vue.js로 단일 페이지 애플리케이션을 쉽게 구축할 수 있게 해 준다.☞ 공식 사이트https://router.vuejs.org/installation.htmlvuetify ?자바스크립트 프레임워크로 개발자들에게 필요한 기능들을 제공하는 개발 프레임워크이다.☞ 공식 사이트https://v15.vuetifyjs.com/ko/getting-started/quick-startvue router 설치vue 설치 디렉터리로 이동한다.npm install vue-router@3 로 설치vue2 버전을 설치했기 때문에 vue router 도 3으로 설치한다.vue3 인 경우에.. 2024. 8. 14. vue, vue cli 설치하고 버전 확인 #12 국회도서관 자료검색 서비스를 위한 프런트엔드 웹 환경 구성작업 환경작업폴더명public_data/pubd_web프로젝트 명pubdwebOSmacOS sonoma v 14.5☞ vue cli 의 가이드는 아래 URL에서 자세히 다루고 있다.https://cli.vuejs.org/ vue cli 는 vue.js 프레임워크를 포함하고 있어, 별도 vue.js 설치를 안 해도 된다.vue.js 프로젝트 생성 시 vue version 선택가능vue cli 설치pubd_web 폴더로 이동하여 설치npm install -g @vue/clivue cli 는 전역으로 설치되기 때문에 이전에 설치한 이력이 있으면 vue project로 바로 진행하면 된다.pubd_web % npm install -g @vue/cliVue.. 2024. 8. 13. 이전 1 다음
