당연히 React 와 같은 프론트엔드 프로젝트를 배포하는 방법에는 여러가지가 있습니다. 그 중에서 AWS Amplify 로 쉽고 간편하게 배포하는 방법을 정리해보겠습니다. Amplify 배포를 사용하면 좋은 점 EC2 서버로 배포하는 방법보다 간단하여 시간소요가 압도적으로 적다. 자동 배포가 가능하다. https까지 한번에 적용 가능하다. 배포 이전에 준비되야할 내용 Route53 도메인 존재 (도메인이 아직 없다면 https://jindevelopetravel0919.tistory.com/191 에 AWS DNS를 구매하는 방법을 정리해두었습니다.) 배포할 프로젝트의 git repository (git repository로 amplify와 연동하여 배포할 것이기 때문에 git repository가 필요..

HTML 에서 태그로 생성한 구조들은 기본적으로 왼쪽에서 오른쪽으로 채워지는 순서를 가지고 있습니다. 이처럼 flex box 에도 구성물들을 넣게 되면 왼쪽에서 오른쪽으로 기본적으로 채워집니다. 이는 flex-direction 이라는 방향 속성에 행 (row)이 기본값으로 설정되어 있으며 왼쪽에서 오른쪽으로 행 방향으로 채워집니다. 열 (column)으로 설정하면 모든 내용들이 위에서 아래로 이동하게 됩니다. flex-basis CSS를 적용하면 flex로 배치된 각 내용들이 flex-basis에서 정한 크기만큼 넓혀지거나 좁혀집니다. 만약 flex-direction 이 row 이면 주축 방향인 가로로 크기가 정해지고 column이면 주축 방향을 따라 세로로 길이가 정해집니다. 예시 코드 Red Oran..

Deployment 로 배포를 하고 있는 상태에서 관리할 수 있도록 하는 명령어들에 대해서 알아보겠습니다. rollout status kubectl rollout status deployment {Deployment 시스템 명} 명령어를 입력하여 현재 실행 중인 Deployment의 현재 상태를 확인할 수 있습니다. 그 전에 rollout 명령어를 적용하기 이전에 yml 설정을 변경해줘야하는 부분이 있습니다. Deployment 내용이 들어있는 Pod yml 파일에 들어가주도록 합니다. 거기서 우선 버전을 초기 버전인 release0 버전으로 바꿔주겠습니다. 그리고 minReadySeconds 설정값도 주석 처리 해주었습니다. 변경 사항을 적용해줍니다. 이제 다시 kubectl rollout status..

Deployment 는 Replica Set 중 하나 입니다. Replica Set에 기능 하나만 추가된 형태라고 보면 됩니다. Deployment 를 이용하면 가동 중지 시간 없이 자동으로 롤링 업데이트를 할 수 있습니다. 이전에 가동 중지 시간없이 Pod의 Label을 이용해서 수동으로 새로운 버전을 배포했었습니다. 이번에는 자동으로 가동 중지 시간없이 업데이트를 할 수 있는 Deployment 를 알아보겠습니다. https://kubernetes.io/docs/reference/generated/kubernetes-api/v1.27/#deployment-v1-apps Kubernetes API Reference Docs kubernetes.io Deployment의 yml 형식은 이렇습니다. 형식을..

Replica Set 작성이 완료되었으면 적용시켜야겠죠? 적용시켜보는 과정을 알아보겠습니다. 우선 kubectl delete pod --all 명령어를 사용하여 기존에 생성해서 실행중이던 pod들을 종료시켜줍니다. kubectl apply -f {yml 파일명} 명령어를 사용하여 작성했던 Replica Set 을 생성하고 적용시켜줍니다. 현재 Pod yml 에는 Replica Set 으로 변경하여 구성되어있습니다. kubectl get all 명령어를 입력했을 때 추가적으로 ReplicaSet 시스템이 실행중인 것을 확인할 수 있습니다. current 부분에 현재 실행중인 Replicas 의 수, 즉, 컨테이너 수를 알 수 있습니다. ready 부분은 요청에 응답하는 컨테이너의 수입니다. 이제 minik..

레이아웃을 설정하는 방법에는 여러가지가 있습니다. flex, grid, 외부 라이브러리, 부트스트랩, media query 등... 그 중에서 flex 는 유연하게 원하는 레이아웃을 설정해줄 수 있습니다. Flexbox Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus eveniet minus dolor qui laudantium molestias repudiandae reprehenderit impedit aliquid, fugit eligendi placeat, unde praesentium, vel veritatis voluptate ex corporis magni deleniti. Ipsum id at ad quo neque ..