Programming 59

docker compose를 이용해서 한 번에 서버 구축하기 (4) nginx-proxy 와 let's encrypt

nginx-proxy docker에서는 하위 url을 판단해서 분기하는게 불가능 할 듯하다. sub-domain으로 분리해야할 듯 하다 nginx-proxy docker 내부의 /etc/nginx/conf.d/default.conf 파일 다음과 같이 변경했다접속이 된다변경된 /etc/nginx/conf.d/default.confdapadastock.com/api 이런식으로 VIRTUAL_HOST를 설정했지만, host자체를 dapadastock.com/api로 보더라. (url로 api가 들어온 것이 아니라) 따라서 동작하지 않았다. 여기 이 부분의 왼쪽 volume이 뭘 의미하는지 모르겠다. 임의로 알아서 넣으라는 건지, 실제로 저런 공간이 존재하는 건지... 최초에는 이렇게 폴더를 다 만들어서 이어줬..

Programming/Docker 2021.09.08

docker compose를 이용해서 한 번에 서버 구축하기 (3) DRF 및 nginx 설정

DRF는 django에서 restful api를 사용하기 편하게 만들어진 framework이다 DRF 추가 https://velog.io/@yoonkangho/django-rest-framework-시작하기-1#django-app-만들기 (윈도우에서)연결 완료 nginx를 통과한 drf 페이지. css가 불러지지 않는다..! static 파일들을 새로 요청하는 모습을 볼 수 있다. nginx와 django에서 설정을 해줘야 할 듯 하다. https://nachwon.github.io/django-deploy-4-static/ mange.py 의 collectstatic 기능을 통해 static 파일을 .static_root에 모은후 → nginx의 static 파일 전달 기능을 이용해서 /static/ ..

Programming/Docker 2021.09.08

docker compose를 이용해서 한 번에 서버 구축하기 (2) Django-gunicorn, nginx

docker compose를 이용해서 한 번에 서버 구축하기 (1) Nuxt.js(※주의! 본 게시글은 필자의 삽질과정이 모두 기록되어 있습니다. 본 시리즈의 앞 부분은 눈으로 흐름만 읽으시고, 코드는 후반 게시글을 참고하시기 바랍니다.) Django 참고하고있는 포스트: https://testdriven.io/blog/dockerizing-django-with-postgres-gunicorn-and-nginx/#nginx 생각 어차피 django도 requirement.txt로 설치한다 nuxt가 package.json으로 설치되는 것과 동일 그러면 어제 node 이미지 위에 설치한 것과 같이, python 이미지위에 requirement.txt만 실행시키면 되지 않을까? docker-compose 내..

Programming/Docker 2021.09.08

docker compose를 이용해서 한 번에 서버 구축하기 (1) Nuxt.js

docker는 linux의 컨테이너를 만들고 사용할 수 있도록 하는 컨테이너화 기술이다. 각각의 컨테이너는 기본 환경위에 개별 환경을 구축할 수 있다(이해가 힘들다면 가상머신을 생각해도 큰 무리는 없다. 하지만 두 개는 분명히 다르다! https://www.redhat.com/ko/topics/containers/whats-a-linux-container). 따라서 docker를 이용해서 환경을 구축한다면, 사용 환경에 상관없이 늘 동일한 기능을 하는 서비스를 기동할 수 있다. 이러한 장점을 이용해서 최종적으로. [git clone]과 [docker-compose up] 2가지 명령어만으로 https 인증까지 완료되는 Nginx-[Nuxtjs, Django-PostgreSQL] docker를 만들어보자...

Programming/Docker 2021.09.08

[Azure Storage] Vue.js에서 Azure Storage로 blob 업로드 하기

늘 AWS만 쓰다가 이번 기회에 처음으로 Azure를 쓰게 되었다. 현재 우리 사이트 구조가 Vue.js(FE) - Django(BE) - Azure(Storage) 로 넘어가는 구조다. 현재는 대용량 파일을 업로드 할 때 Django를 거치고, Azure로 업로드 하는 방식이어서 트래픽적으로도 손해였고, Django를 굴리는 서버 자체도 스케일 업을 해야할 수도 있는 상황이었다. 따라서 Vue.js에서 Azure Blob Storage로 바로 업로드 하는 방법을 찾게되었다. https://www.npmjs.com/package/vue-azure-blob-upload vue-azure-blob-upload VueJS service for multi-part uploading to MS Azure blob..

Programming/Vue.js 2021.08.20

jupyter notebook ipynb kernel에 anaconda 가상환경 연결하기

ML 과제를 해결할 때, GPU 자원을 다른 사람들과 나누어 써야하는 일이 종종 있다. 보통 jupyter lab(notebook)을 사용해서 협업할 수 있는 환경을 구축하고, anaconda의 가상환경을 만들어 서로의 작업에 영향을 미치지 않도록 한다. 이 때, anaconda의 가상환경을 jupyter notebook의 ipynb kernel에 연결하여야, terminal에서만 접근가능했던 가상환경 세팅이 .ipynb에서 사용가능하다. (*참고* 만약 다른 사람과 협업을 하는 상황이 아니라면, 원하는 가상환경으로 activate한 후에, jupyter notebook(lab)을 실행하고 접근하면 된다) 기본 연결 방법 1. 가상환경 생성 conda create -n {가상환경 이름} python =파..

Programming 2021.06.20

[MariaDB / Node.js] retrieve connection from pool timeout after 에러

MariaDB + Node.js + express.js 를 사용하여 API서버 - DB서버를 사용하고 있었다. 그런데 한 번씩 API 서버에서 DB서버로 query를 전달하지 못하는 현상이 발생했다. conn = await pool.getConnection(); pool.getConnection에서 10초동안 connection을 반환하지 않았고, 이 시간이 설정되어있는 acquireTimeout을 넘어가서 에러를 띄우는 것이었다. pool.on("acquire", (conn) => { console.log(`acquire ${conn.threadId} has been acquire in pool`); console.log("acquire pool.activeConnections()", pool.acti..

Programming 2021.05.30

nuxtjs/auth-next 설치

nuxt.config.js에 다음 코드들을 저장한다. buildModules:{ '@nuxtjs/axios', '@nuxtjs/auth-next' } auth: { strategies: { google: { clientId: configFile.client_id, // client_id는 노출되지 않게 따로 관리하기 위해 configFile에서 가져옴 codeChallengeMethod: '', responseType: ['token', 'id_token'], }, }, redirect: { login: '/login', logout: '/', callback: '/login', home: '/', }, }, 그리고 pages에 login.vue를 추가하여야 한다. (그렇지 않으면 로그인 후 /login..

Programming/Vue.js 2021.05.23

[vuetify] v-rating Custom Icon 사용하기

https://vuetifyjs.com/en/components/ratings/ Rating component The star rating component is a specialized widget for collecting user feedback via ratings. vuetifyjs.com vuetify의 v-rating 컴포넌트는 mdi-icon을 사용하면 아주 편리하지만, custom icon을 사용하기에는 까다롭다. 본 포스팅에서는 v-rating에서 custom-icon을 사용법과 size 조절까지 알아본다. 1. custom icon 적용 위 코드 처럼 평범하게 작성하면 v-rating이 위와 같이같이 나온다(색상은 무시해달라). mdi-heart-outline(mdi-icon)으로 지..

Programming/Vue.js 2021.05.19