Development Artist

사전 설치 사항 node -v # ex) v18.16.0 npm -v # ex) 9.5.1 만약에 Node가 설치가 되어 있지 않다면, (https://nodejs.org) 을 방문해서 설치하도록 하자. 프로젝트 만들기 npx create-next-app -typescript 위의 명령어를 치면, 몇 가지 선택사항을 물어본다. - "What is your project named?" [프로젝트 이름] - "Would you like to use ESLint with this project?" Yes - "Would you like to use 'src/' directory with this project?" No - "Would you like to use experimental 'app/' direct..

들어가기 Spring과 Spring Boot는 다르다. 이번 글에서는 Spring Boot를 시작하는 방법에 대해 기술 하도록 하겠다. 버전 정하기 Spring 버전 : 2.7.14 JDK 버전 : 17 IntelliJ IDEA : Community 설치하기 편하게 설치를 도와주는 툴을 사용해서 설치하도록 하겠다. Mac에서는 추가적인 조치없이 바로 사용 가능하다. sdkman 이다. (https://sdkman.io/) 설치 후 iterm을 켜서 java 리스트를 확인한다. sdk list java 이런식으로 현재 설치가능한, 설치된 자바 리스트를 확인할 수 있다. Status를 보면 설치 여부를 확인할 수 있다. 그리고 Use 칼럼을 통해 현재 사용하고 있는 자바 버전을 확인할 수 있다. 원하는 버전..

이번 시간에는 AWS ALB를 사용해보고, 웹 페이지에서 백엔드로 API 요청을 해보도록 하겠습니다. ALB는 Application Load Balancer의 약자로, L7 단에서 로드 밸런싱을 하는 녀석이기 때문에 HTTP, HTTPS와 같은 웹 어플리케이션에서 분산 처리를 할 수 있습니다. VPC 밖에서 Private 서브넷에 있는 백엔드 서버에 요청을 보내기 위해 사용하려고 합니다. AWS EC2 서비스에서 메뉴 아래 쪽을 보시면 ‘로드밸런서’ 라고 보이실 겁니다. Create Load Balancer를 누르시고 좌측의 ALB Create을 누릅니다. 그리고 아래와 같이 설정을 하겠습니다. 보안 그룹은 ‘Create new security group’을 통해 하나 만들어 주고 아래와 같이 세팅을 해..

이제 백엔드 장고 서버를 배포할 시간입니다. 장고의 경우 Docker를 사용해 컨테이너 환경으로 배포를 하도록 하겠습니다. https://medium.com/swlh/what-exactly-is-docker-1dd62e1fde38 해당 링크는 Docker에 대한 글로써, 컨테이너 환경에 대한 전반적인 지식을 얻을 수 있을 것입니다. https://jmcunst.tistory.com/292 해당 링크를 참고하셔서 Docker를 설치하시면 됩니다. 다시 한번 확인하지만, Centos 7 환경입니다. Docker 설치가 완료되면, 명령어를 사용해보겠습니다. 위와 같이 뜬다면 정상적으로 동작하고 있는 것입니다. Django 배포를 위한 Docker image를 만들겠습니다. 도커 이미지를 만들기 위해서는 ‘Do..

Django를 배포하기 전, DB 설치를 먼저 해주겠습니다. 우리는 Django와 잘 어울리는 Postgresql을 사용하겠습니다. Django 서버가 배포 될 EC2(’jmcunst-depl-django’)에서 진행하겠습니다. 아래 링크를 통해 Centos 7 환경에서 Postgresql을 설치해주도록 하겠습니다. https://jmcunst.tistory.com/300 [Centos 7, Postgresql 15] 설치. ( version 11 or later ) Docker 컨테이너 환경에서 Postgresql을 올리려고 하면 버전 11 이상을 쓰라고 권고를 하고 있다. 그도 그럴게, Postgresql 버전 정책을 찾아보면, 아래와 같이 Version 11 이상을 지원하는 것을 확인할 수 jmcu..

지난 시간에는 ‘jmcunst-depl-ws’ 웹 서버에 Vue 프로젝트를 원격 저장소로부터 가져와 실행을 시켜보았습니다. 하지만, CLI를 닫게 되면 Vue 서버도 같이 닫히기 때문에 지속적으로 서비스를 할 수가 없습니다. 오늘 시간에는 이 부분에 대해 Web Server의 한 종류, Nginx를 사용하여 웹 서비스를 지속적으로 제공해보도록 하겠습니다. 먼저 Web Server가 무엇인지 알아야 할텐데요, https://shevonkrishmal1998.medium.com/web-server-vs-application-server-725cfa578629 이 글을 통해 Web Server 뿐만 아니라, Web Application Server에 대한 지식, 그리고 차이에 대해 습득하실 수 있을 것입니다...

지난 시간까지 Web Server 용(jmcunst-depl-ws), Django Server 용(jmcunst-depl-django), DB Server 용(jmcunst-depl-db) 인스턴스를 만들었습니다. 이번 시간에는 Vuejs를 어떻게 배포하는지 알아보도록 하겠습니다. 일단 Vuejs는 ‘jmcunst-depl-ws’ 인스턴스에 배포할 예정입니다. Vue 프로젝트의 package.json의 scripts를 보시면 serve와 build가 보일 것입니다. serve의 경우 컴퓨터의 nodejs 엔진에 내장된 Web Server를 통해 웹 서비스를 합니다. build 의 경우 node-modules의 소스들을 하나로 합쳐 하나의 정적 웹소스를 만들게 됩니다. 이것이 dist/ 폴더로 만들어지고 ..

각각의 배포 과정을 진행하기 전, 여태까지 만들었던 Vuejs, Django 프로젝트를 Github에 올려봅시다. 2개의 레포지토리를 만들겠습니다. https://github.com/JMcunst/test_portal_web_server https://github.com/JMcunst/test_portal_django 그리고 현재 진행했던 프로젝트에서 위의 레포지토리로 연결해주겠습니다. Git이 설치되어 있다고 가정하겠습니다. 없다면, Git을 설치해주세요. https://git-scm.com/book/ko/v2/시작하기-Git-설치 먼저 Vuejs 입니다. VSC 터미널에서 진행하겠습니다. .git 이 있는지 확인합니다. ls -lart 없다면, initialize를 해줍니다. git init 원격 저..

이번 배포를 위해 먼저 아키텍처를 설계해야합니다. 가장 중요한 작업으로 볼 수 있습니다. 인프라를 구축할 때 설계를 저는 가장 중요한 부분이라고 늘 생각하는데요, 설계에 허점이 있으면 장애 발생의 가능성을 높히고 장애 발생 시 복구에도 지장을 줄 수 있기 때문입니다. 이번 배포는 설계시 기본적인 부분들만 챙겨가보도록 하겠습니다. 아키텍처입니다. 사용자는 Internet Gateway를 통해 WAS에 접근합니다. WAS에 Vuejs의 build 결과물인 dist/ 를 배포하구요, WAS에서 사용자에게 /dist 안의 웹 페이지(index.html, etc)를 뿌려줍니다. 사용자는 웹 페이지에서 ALB->NAT Gateway를 통해 Private Subnet에 있는 Django Server로 API 요청을 ..

지난 번에는 컴포넌트간 데이터 전달에 대해서 다뤄보았습니다. 이번 시간에는 백엔드 서버와 연동하여 API를 요청하고 데이터를 받아오는 테스트를 진행하도록 하겠습니다. 일단 Django 시리즈 5번째, 서버 API를 만들고 CORS 처리를 한 ‘CORS’까지 진행한 것으로 가정하고 시작해보도록 하겠습니다. 이번에 테스트할 API는 access-test/ 입니다. API Call을 할 수 있는 다양한 라이브러리가 있습니다. 이번에는 axios 라이브러리를 이용하여 API Call을 해보도록 하겠습니다. axios 란, Javascript를 위한 promised 기반 HTTP 클라이언트 입니다. 브라우저에서 HTTP 요청을 하고 요청 및 응답 데이터의 변환을 처리할 수 있습니다. Axios is a promi..