Engineering_S/W & H/W

 AWS의 S3에 정적 웹사이트(React)를 Build해서 올리는 방법입니다. 해당 블로그 글을 작성시 아래 글들을 참고하였습니다. https://s0ojin.tistory.com/48 참고링크 :  AWS S3에 CloudFront를 이용해서 HTTPS(SSL) 적용하기 GitAction을 이용해서 업로드 합니다. 해당 블로그 글에는 React를 이용해서 CI/CD작업을 작성하겠습니다. 1. yaml파일 작성 루트 경로에서 .github/workflows 폴더 안에 하나의 yaml(front-build.yaml)파일 하나를 생성한다. name : Front Deployment # trigger가 되길 바라는 action을 입력합니다. push / pull_request가 있습니다. # GitHub에서 직접 실행할려면 workflow_dispatch를 사용한다. # 저는 develop 브랜치에 push가 되면 actions을 실행하도록 설정했습니다. # S3에 배포하기 위해서 아래와 같은 Secreat이 설정되어야 합니다. # secrets.AWS_S3_ACCESS_KEY_ID : IAM AWS Access Key # secrets.AWS_S3_SECRET_ACCESS_KEY_ID : IAM AWS Secret ACCESS Key # secrets.AWS_S3_BUCKET_NAME : S3 Bucket Name on : workflow_dispatch # 위의 이벤트가 트리거되면 실행할 목록입니다. jobs : build : name : react build & deploy # runner가 실행될 환경을 지정합니다. runs-on : ubuntu-latest # name은 단계별로 실행되는 액션들의 설명을 담은 것으로, 나중에 github action에서 workflow에 표시됩니다. # uses 키워드로 Action을 불러올 수 있습니다. steps : # 레포지토리에 접근하...

 이번 글에서는 Docker와 GitHub Action을 이용해서 CI/CD를 구현하도록 하겠습니다. AWS의 EC2에 자동 배포하도록 블로그 글을 작성하겠습니다. 1. 우선사항 1) Push를 할 GitHub 저장소 생성( 링크 ) - private 2) GitHub Token 생성 - classic 방법으로 생성 - repo, workflow, write:packages, delete:packages가 선택 되어 있어야 한다. 3) AWS 계정 4) 개발 PC에 Docker가 설치 되어 있어야 한다.( Linux Link ,  Window Link ) 5) docker hub 계정(DOCKER_USERNAME) 및 비밀번호(DOCKER_PASSWORD) 대용으로 사용할 token - 만약 다수의 private repository를 운영할려면 해당 링크 를 통해 유료 결제를 해야한다. 위 우선사항이 모두 되었으면 아래는 나의 로컬 환경이다. OS : macOS Ventura 13.6.1 Docker Version : 24.0.7 Node Version : 20.10.0 1. React Project를 생성한다. ( 링크 ) 2. GitHub Repository와 연동 git init git add . git commit -m "first commit" git branch -M master git remote add origin https://github.com/Alex-Choi0/CICD-EC2-Docker.git git push -u origin master 3. Dockerfile 생성 및 테스트 1) Dockerfile 생성 FROM node:20.10.0 # 경로 설정하기 WORKDIR /app # package.json 워킹 디렉토리에 복사 (.은 설정한 워킹 디렉토리를 뜻함) COPY package.json . # 명령어 실행 (의존성 설치) RUN npm install # 현재 디렉토리의 모든 파일을 도커 컨테이너의 디렉토리에 ...

이번 글에서는 Docker와 GitHub Action을 이용해서 CI/CD를 구현하도록 하겠습니다. AWS의 EC2에 자동 배포하도록 블로그 글을 작성하겠습니다. 1. 우선사항 1) Push를 할 GitHub 저장소 생성( 링크 ) - private 2) GitHub Token 생성 - classic 방법으로 생성 - repo, workflow, write:packages, delete:packages가 선택 되어 있어야 한다. 3) AWS 계정 4) 개발 PC에 Docker가 설치 되어 있어야 한다.( Linux Link , Window Link ) 위 우선사항이 모두 되었으면 아래는 나의 로컬 환경이다. OS : macOS Ventura 13.6.1 Docker Version : 24.0.7 Node Version : 20.10.0 1. React Project를 생성한다. ( 링크 ) 2. GitHub Repository와 연동 git init git add . git commit -m "first commit" git branch -M master git remote add origin https://github.com/Alex-Choi0/CICD-EC2-Docker.git git push -u origin master 3. Dockerfile 생성 및 테스트 1) Dockerfile 생성 FROM node:20.10.0 # 경로 설정하기 WORKDIR /app # package.json 워킹 디렉토리에 복사 (.은 설정한 워킹 디렉토리를 뜻함) COPY package.json . # 명령어 실행 (의존성 설치) RUN npm install # 현재 디렉토리의 모든 파일을 도커 컨테이너의 디렉토리에 복사한다. COPY . . # 3000번 포트 노출. 실제로는 표시만 해준다. EXPOSE 3000 # npm start 스크립트 실행 CMD ["npm", "start...

 해당 글은 NestJS(NodeJS)을 이용하여 작성되었다. 프로젝트 루트 경로에 ".github/workflows"폴더를 만든다.  "workflows" 폴더 안에 git action에서 실행할 yaml파일을 만든다. 여기서는 test_workflow.yaml파일이다. # 워크플로우의 이름을 정의합니다. GitHub Actions 로그와 UI에서 이 이름이 표시됩니다. name : NestJS application test # 이 워크플로우가 어떤 GitHub 이벤트에 의해 트리거될지 정의합니다. # 여기서는 'push' 이벤트와 'pull_request' 이벤트에 대해 워크플로우가 실행됩니다. on : [ push , pull_request ] # 워크플로우에서 실행할 작업을 정의합니다. jobs : build : # 워크플로우가 실행될 가상 환경을 지정합니다. 여기서는 Ubuntu 22.04를 사용합니다. runs-on : ubuntu-22.04 # 워크플로우에서 실행할 단계들을 정의합니다. steps : - uses : actions/checkout@v2 # 첫 번째 단계: GitHub 리포지토리를 체크아웃합니다. # 이는 워크플로우가 리포지토리의 코드에 접근할 수 있게 해줍니다. - name : Set up Node.js uses : actions/setup-node@v2 # 두 번째 단계: Node.js 환경을 설정합니다. with : node-version : '20.10.0' # Node.js의 버전을 지정합니다. # 이 예시에서는 '20.10.0' 버전을 사용합니다. - name : Install dependencies run : | ...

  이전에 작성한 글들은 동기화 action입니다. action이 되면 바로 state에 반영되어서 적용이 되었습니다. 하지만 비동기인 상황에서는 대기시간이 걸립니다. 예로들어 API를 이용하여 데이터를 fetch하는 경우 입니다. 통신 상태에 따라 시간이 불규칙적으로 걸릴수 있기 때문입니다.  이번에는 axios 또는 fetch을 이용하여 코드를 짜보도록 하겠습니다. 일단 fetch을 하여 최종적으로 redux storage에 저장하는 것이 목적입니다. 그러기 위해서는 가장먼저 state를 설계해야 합니다. 내용과 구조는 아래와 같습니다. loading : API를 통해서 데이터를 다운로드 받고 있는 중일때 true, 완료 혹은 error는 false data : fetch(혹은 axios)를 통해 받은 데이터를 저장(여기서는 유저정보) error: fetch도중 에러가 발생시 error메세지 저장 State = {      loading : true,       data : [ ],      error: '' } 이제 action.type을 결정해야 합니다. 여기서 설정할수있는 action은 3가지 입니다. 내용은 아래와 같습니다. FETCH_USERS_REQUEST : users 리스트를 fetch합니다. FETCH_USERS_SUCCESS : fetch가 성공적으로 마무리 됬습니다. FETCH_USERS_FAILURE : fetch도중 error가 발생. 이제 reducer를 설정해야 하는데 위의 action을 이용하여 설정할수 있습니다. action.type FETCH_USERS_REQUEST   - loading : true FETCH_USERS_SUCCESS - loading : false - users : data (해당 API를 통해 다운) FETCH_USERS_FAILURE - loading : false - err : ...