군붕이의 메모장

우선 현재 서버의 경우 인프라가 아래처럼 구성되어 있다. 만약 서버에서 코드를 몇줄만 수정해도 아래 과정을 거쳐서 다시 배포해야 한다. 1. 코드 수정 후 도커 이미지 빌드 2. 도커 이미지를 ECR에 업로드 3. EC2 SSH 접속하여 업로드된 도커 이미지 다운로드 4. 도커 이미지 실행 변경 작업은 유지보수를 하면서 계속해서 일어나게 되는데 매우 비효율적으로 생각됬다. 그래서 repository에 push될 경우 github actions를 사용하여 위 과정을 자동화해서 배포가 되도록 구성했다. 우선 Github Actions의 경우 이전 클라이언트에서 CI/CD를 구축하면서 적어둔게 있어 URL로 대체했다. https://iamiet.tistory.com/entry/S3%EB%A1%9C-%EB%B0..

지난번 CloudFront를 사용하면서 클라이언트를 배포하면서 HTTPS를 적용했다. https://iamiet.tistory.com/entry/AWS%EC%97%90-React-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0-3-CloudFront-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0 AWS에 React 배포하기 - 3, CloudFront 배포하기 이전글 : https://iamiet.tistory.com/entry/AWS%EC%97%90-React-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0-2-Route53-%EB%8F%84%EB%A9%94%EC%9D%B8-%EC%97%B0%EA%B2%B0-%EB%B0%8F-SSL-%EC%9D%B..

우선 현재 클라이언트의 경우 인프라가 아래처럼 구성되어 있다. 만약 클라이언트에서 코드를 몇줄만 수정해도 아래 과정을 거쳐서 다시 배포해야 한다. 1. 리액트 프로젝트 빌드 2. S3에 업로드 3. CloudFront 캐시 무력화 변경 작업은 유지보수를 하면서 계속해서 일어나게 되는데 매우 비효율적으로 생각됬다. 그래서 repository에 push될 경우 github actions를 사용하여 위 과정을 자동화해서 배포가 되도록 구성했다. ● Github Actions Github Actions의 경우 가장 최상위 개념인 Workflow가 존재한다. Workflow는 특정 로직을 자동화해둔 파일(과정)이라고 생각하면 된다. 프로젝트 루트폴더 안에 ./github/workflows/main.yaml 형식으..

● Docker 빌드환경 설정하기 프로젝트의 루트폴더에 2개의 파일을 생성해야 한다. - Dockerfile 도커 이미지를 위한 설정파일, 즉 이미지가 어떻게 구성되어있는지 확인할 수 있는 파일이다. 도커 이미지를 빌드하면 해당 파일에 적어둔 커맨드를 통해서 이미지가 빌드된다. # docker의 이미지를 정의, 해당 프로젝트에서 node 16 버전을 사용 FROM node:16 # /app 이라는 폴더에서 프로젝트를 실행할 예정이므로 mkdir 명령어로 폴더를 생성 RUN mkdir -p /app # /app 이라는 폴더에서 프로젝트를 실행 WORKDIR /app # Dockerfile이 위치한 폴더의 모든 내용을 /app으로 복사 COPY . . # 프로젝트에서 사용한 패키지를 package.json ..

이전글 : https://iamiet.tistory.com/entry/AWS%EC%97%90-React-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0-3-CloudFront-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0 AWS에 React 배포하기 - 3, CloudFront 배포하기 이전글 : https://iamiet.tistory.com/entry/AWS%EC%97%90-React-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0-2-Route53-%EB%8F%84%EB%A9%94%EC%9D%B8-%EC%97%B0%EA%B2%B0-%EB%B0%8F-SSL-%EC%9D%B8%EC%A6%9D%EC%84%9C-%EB%B0%9C%EA%B8%89 AWS..

이전글 : https://iamiet.tistory.com/entry/AWS%EC%97%90-React-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0-2-Route53-%EB%8F%84%EB%A9%94%EC%9D%B8-%EC%97%B0%EA%B2%B0-%EB%B0%8F-SSL-%EC%9D%B8%EC%A6%9D%EC%84%9C-%EB%B0%9C%EA%B8%89 AWS에 React 배포하기 - 2, Route53 도메인 연결 및 SSL 인증서 발급 이전글 : https://iamiet.tistory.com/entry/AWS%EC%97%90-React-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0-1-S3-%EC%9B%B9%ED%98%B8%EC%8A%A4%ED%8C%85..

이전글 : https://iamiet.tistory.com/entry/AWS%EC%97%90-React-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B0-1-S3-%EC%9B%B9%ED%98%B8%EC%8A%A4%ED%8C%85-%EC%84%A4%EC%A0%95 AWS에 React 배포하기 - 1, S3 웹호스팅 설정 리액트 클라이언트를 배포하는 방법은 다양하게 있다. AWS EC2에 직접 배포하거나 다른 PaaS 플랫폼을 활용하여 배포할수도 있다. 많은 방법중에서 AWS S3 정적 웹 호스팅을 활용하여 배포한 이유는 iamiet.tistory.com CloudFront로 S3에서 호스팅한 웹사이트를 배포하기전에 우선 구매한 사설도메인을 Route53에 연결해줘야 한다. 사설 도메인을 연..

리액트 클라이언트를 배포하는 방법은 다양하게 있다. AWS EC2에 직접 배포하거나 다른 PaaS 플랫폼을 활용하여 배포할수도 있다. 많은 방법중에서 AWS S3 정적 웹 호스팅을 활용하여 배포한 이유는 아래와 같다. 간편하다 : 설정이 매우 단순하고 간편해서 쉽게 배포가 가능하다 확장성이 좋다 : CDN을 통해서 다른 국가에서도 빠른 속도로 접근이 가능하다 비용 : S3 자체의 비용이 매우 저렴한편이고 웹호스팅을 위한 S3 비용이 매우 저렴했다 ● AWS IAM 사용자 권한부여 우선 IAM 사용자에게 S3 서비스에 대한 사용권한(AmazonS3FullAccess)을 부여해준다. 해당 방법은 이전에 S3 이미지업로드 구현하는 글에서 적어뒀으니 링크로 대체한다. https://iamiet.tistory.c..

해당 게시물은 Instance 생성 및 네트워크 설정은 끝났다는 가정하에 진행했다. OS : Ubuntu Linux 20.04 ( Not Minimal ) Open Port : 80, 443, 8080 1. code-server 설치하기 code-server github : github.com/cdr/code-server cdr/code-server VS Code in the browser. Contribute to cdr/code-server development by creating an account on GitHub. github.com 원작자분께서 친절히 작성하신대로 따라해보았다. 1. curl -fsSL https://code-server.dev/install.sh | sh 로 code-ser..