본문 바로가기

배포6

[AWS]Devops(데브옵스)란? devops가 뭘까 ? 필요한 이유 ? - 소프트웨어 개발은 아래와 같은 라이프사이클, 생애주기를 갖고 있습니다. 데브옵스는 개발과 운영을 통합하여 제품 출시 및 조직의 효율성을 끄렁올리기 위한 문화입니다. 2009년에 시작된 기업의 소프트웨어 개발 방법을 개선하기 위한 움직임입니다. 데브옵스는 조직, 고객, 회사 모두에 이점을 가져다 줄 수 있습니다. 큰 규모의 조직에서는 아래와 같은 역할로 나누어집니다. 과연 데브옵스라는 건 어떻게 하는 것인가? 데브옵스는 개발과 운영의 벽을 허물어 더 빨리 자주 배포하자는 게 목적입니다. AWS가 제안한 데브옵스 실천방법 - 지속적 통합(Continuous Integration) : 개발자가 만든 변경 사항에 대해서 빌드 및 테스트를 진행해본 후 중앙 코드로 통합... 2022. 2. 18.
[Webpack]webpack-bundle-analyzer 배포 준비 안녕하세요! 이번에는 TypeScript Proejct를 배포를 위한 준비를 해보겠습니다! 먼저 간단하게 webpack-bundle-analyzer(웹팩 번들 에널라이저)에 대해 알아보겠습니다! Webpack을 사용하여 번들링되는 모듈을 분석해서 시각적으로 표현해주는 모듈입니다. 모듈이 차지하는 용량에 따라서 눈에 보이는 영역도 커지기 때문에 어떤 모듈이 얼만큼 용량을 차지하는지 쉡게 파악할 수 있습니다 밑에 그림 처럼요 ! Webpack 특성상 수십개들의 파일들을 단 하나의 js 파일로 압축해주는 역할을 맡고 있습니다. 이럴 때 용량 문제가 큰 이슈 사항인데요. 합쳤을 때 용량이 너무 크면 문제가 되겠죠? 지금은 app.js는무려 총 크기가 1.5MB를 차지하고 있습니다. (사실상 한국은 별 문제 없는.. 2021. 8. 27.
[AWS]리액트 개인 프로젝트 배포하기(nextjs,nestjs)[6]-Front 배포 & 탄력적 IP고정 back server에서 npm install pm2를 설치한 것 처럼 기존 프로젝트 front 경로도 pm2를 설치 후 pull해주자 ! | 알고 가야하는 점 ! 첫 번째, 지금 프로젝트는 nextjs 로 진행했기 때문에 getServerSideProps와 같은 backend에서 먼저 data를 받아와야 하는 함수가 들어있다 따라서 backend 가 무조건 켜져있어야지만 front를 켤 때 오류를 방지할 수 있다 ! 두 번째, 현재 나는 saga 로 상태관리를 하고 있는데, saga 폴더의 index.js에서 나는 axios의 defaults 값으로 baseURL을 지금까지는 axios.defaults.baseURL = 'localhost:3001'; 이렇게 적어주고 사용해왔었다. 하지만 지금 우리가 .. 2021. 5. 28.
[AWS]리액트 개인 프로젝트 배포하기(nextjs,nestjs)[4]-mysql 설정 거의 다 왔다 조금만 힘내자 !! 이제는 인터넷으로 접속을 할 차례이다 ! 잘 보면, 퍼블릭 IPv4 에서 back server 인 3.37.52.147 가 있다 ! 저 아이피에 내가 백단에서 쓰고 있는 포트번호(:3000)를 붙여보자 ! 나는 : 3.37.52.147:3000 이니깐 back 서버에 접속해볼까 ? (*여기서 3065는 본인의 프로젝트 back 서버에서 돌아가는 port 를 입력해줍니다.) 결과는 무한 로딩중 ... 어디가 문제지 하고 생각해봤는데 당연한 결과다 왜 ? 접속 가능한 포트는 ssh 포트랑 , 80 , 443 포트만 접속이 가능하게끔 초창기에 설정 했기 때문에 ! 그럼 이 이슈를 또 해결해보자 바로 우분투내의 vim 에디터로 port를 변경 ! 먼저 port를 명시해준 코드 .. 2021. 5. 27.
[AWS]리액트 개인 프로젝트 배포하기(nextjs,nestjs)[3]-우분투 npm start 이제 MySQL도 설치 했겠다. 우분투에서 npm start 날려볼까 ? 했지만 내 프로젝트에 server 폴더에는 현재 npm start 가 없는 상황 추가해주자. server 폴더 -> package.json -> script 부븐에서 "start" 추가 ( 여기서 저는 backend를 nest로 진행했기 때문에 "start":"nest start"로 입력합니다 nodejs라면 "node app" 입니다 ! ) 변경사항을 git commit & push 후 aws의 우툰투에서 git pull 받아주고 ! 다시 npm start ! 또 에러... 이유는 git에서는 .env 즉 환경설정 파일이 안 올라가기 때문에 오류가 났다 나는 .env 파일을 gitignore 추가해서 패스워드 같은 부분을 올라가지.. 2021. 5. 27.
[AWS]리액트 개인 프로젝트 배포하기(nextjs,nestjs)[1]-aws 회원가입 프로젝트를 진행하면서 어느정도 마무리 됐을 때, 리액프 프로젝트를 aws를 연동해서 배포하고 싶다는 생각이 문득 들었다. 그래서 무작정 시작한 아마존 웹 서비스 배포 진행! 시작해보자!! 1.aws 회원 가입 EC2생성 생성 시작 ! 저기 보이는 2번째 우분투 Server를 선택해서 사용할 것임 ! 검토 및 시작을 누르면 아래와 같이 해당 페이지로 와지는데 여기서 3번인 인스턴스 구성에 가보자 ! 여기에서 보면 세부 모니터링 활성화라는 게 있는데 체크해주자 ! 다만 조심할 점은 사용량이 많아지면 요금이 부과될 수 있다 ! 보통은 모니터링 하기 때문에 체크 하고 사용한다 해서 나도 체크 ! 다음은 6번 보안 그룹 구성 해당 단계에서는 기본으로 SSH만 등록되어 있는데 추가로 HTTP & HTTPS 를 등록.. 2021. 5. 27.