Engineering_S/W & H/W

 아래는 작성한 코드이다. for (let i = 0; i < reserve.length; i++) {       reserve[i]['requestProduct'] = [];       for (let j = 0; j < requestItems.length; j++) {         if (requestItems[j].reserveId === reserve[i].id) {           console.log("push requestProduct item : ", reserve[i]);           reserve[i]['requestProduct'].push(reserve[i]);         }       }     } [Nest] 713  - 07/25/2024, 9:37:19 AM   ERROR [ExceptionsHandler] Converting circular structure to JSON     --> starting at object with constructor 'BusinessRequestReserveEntity'     |     property 'requestProduct' -> object with constructor 'Array'     --- index 0 closes the circle 해당 오류( Converting circular structure to JSON )는 객체 내에 순환 참조(circular reference)가 있을 때 JSON으로 변환하려고 하면 발생합니다. NestJS에서 이런 문제가 발생하는 주된 이유는 엔티티(Entity)나 DTO(Data Transfer Object) 간의 관계 설정에서 순환 참조가 존재할 때입니다. 이 문제를 해결하는 방법은 다음과 같습니다: Class Transformer를 사용하여 객체 직렬화 : class-transformer 패키지를 사용하여 응답 객체

 당연히도 영어는 상관이 없지만 한글파일명을 가진 S3 파일은 이름이 변경된채 저장되는 것이였다. portal2.jpg => https://S3-Bucket-URL/portal2.jpg 포탈2.jpg => https://S3-Bucket-URL/%ED%8F%AC%ED%83%882.jpg url주소로 인코딩 하는 과정에서 한글을 변경하는 것이다. 이때 한글이름을 그대로 갖고오기 위해서는 utf-8 디코등을 이용해서 변환해야 한다. 위 사진에서 "인코딩파일"은 S3에서 진행을 하게 되어 있다. S3에서 조회할때는 한글 파일을 동일하게 인코딩 한 다음에 조회를 해야 한다. 따라서 encodeURIComponent 함수를 이용해서 한글 파일을 변환 다음에 S3 버킷 주소에 붙여서 다운을 받아야 한다. 예로 들어 내가 포탈2.jpg파일을 S3에서 받고 싶으면 아래와 같은 URL을 사용해야 한다. (S3-Bucket-URL은 임의의 URL이다. 실제 S3에서 확인해야 한다.) https://S3-Bucket-URL/%ED%8F%AC%ED%83%882.jpg

 I was trying to pull docker image from docker hub. But I got denied. I was using GitAction to deploy but failed. Run docker pull ***/***:latest 2 docker pull ***/***:latest 3 shell: /usr/bin/bash -e {0} 4 env: 5 DOCKER_IMAGE: ***/*** 6 permission denied while trying to connect to the Docker daemon socket at unix:///var/run/docker.sock: Post "http://%2Fvar%2Frun%2Fdocker.sock/v1.46/images/create?fromImage=***%2F***&tag=latest": dial unix /var/run/docker.sock: connect: permission denied 7 Error: Process completed with exit code 1. Connecte to EC2 and write this terminal. sudo chmod 555 /var/run/docker.sock copy Now it works.

 이번 글에서는 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을 이용해서 EC2(AWS)에 자동 배포하기 - React사용' 글에서 추가된 내용입니다.  해당 글에서 run.sh파일을 부팅후 항상 구동하기 위해서 systemd 서비스를 사용하는 것입니다. 1. systmd 서비스 파일을 생성 - vim 에디터로 경로에 파일을 생성합니다. $ sudo vim /etc/systemd/system/github-runner.service copy 2. 아래와 같은 텍스트를 작성 [Unit] Description=GitHub Actions Runner After=network.target [Service] Type=simple User=ubuntu WorkingDirectory=/home/ubuntu/actions-runner ExecStart=/home/ubuntu/actions-runner/run.sh Restart=always [Install] WantedBy=multi-user.target 위의 내용중에서 Service의 항목 설명은 아래와 같다. Type : 서비스 타입. 위에서는 간단으로 선택 User : 해당 서비스를 사용할 유저.  WorkingDirectory : 구동 디렉토리(절대경로를 사용해야 한다.) ExecStart : sh파일을 실행할 경로(절대경로를 사용해야한다.) Restart : 시스텡이 재시작 되면 해당 서비스도 실행 될수 있도록 'always' 셋팅 3. 서비스 적용 및 활성화 이 명령어는 systemd 데몬을 다시 로드하는 데 사용됩니다. 주로 서비스 파일을 수정한 후에 실행해야 합니다. 목적 : 새로운 서비스 파일이나 변경된 서비스 파일을 systemd 데몬이 인식하도록 합니다. 상황 : 서비스 파일을 추가하거나 변경한 후에 실행합니다. 동작 : systemd 데몬은 서비스 파일을 다시 읽고, 변경된 설정을 적용합니다. $ sudo systemctl daemon-relo

이번 글에서는 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&quo

  1. NestJS  1) Dockerfile, docker-compose.yaml을 bash를 이용하여 자동 실행하기( 링크 )   - development_run.sh을 이용하여 자동 실행합니다.  

  1. 수동으로 Component 생성 사진1) manul 폴더및 파일생성 // src/app/manual/manual.component.ts import { Component } from '@angular/core' ; @ Component ({ selector : 'app-manual' , // component명칭을 작성한다. templateUrl : './manual.component.html' , // 해당 component가 사용할 html 템플릿 주소를 입력한다. }) export class ManualComponent {} 코드1) ts파일 작성 <!-- src/app/manual/manual.component.html --> <h1> This component was build by manual! </h1> 코드2) html파일 작성 // src/app/app.module.ts import { NgModule } from '@angular/core' ; import { BrowserModule } from '@angular/platform-browser' ; import { AppComponent } from './app.component' ; import { ManualComponent } from './manual/manual.component' ; @ NgModule ({ declarations : [ AppComponent , ManualComponent ], // declarations에 components class를 추가한다. imports : [ BrowserModule ], providers : [], bootstrap : [ AppComponent ], }) export class AppModule {} 코드3) 앱 모

 설치 필요 버전정보 angular : 16.2.3 node : 18.18.0 1. angular 설치 - terminal을 이용하여 angular를 설치합니다. (node v18.18.0) $ npx @angular/cli@16.2.3 new copy 사진1) angular 셋팅 <!-- src/app/app.component.html --> <h1> Hello World! </h1> code1) html문서 작성 2. angular 실행 - terminal을 이용하여 angular를 실행합니다. (npm) $ npm start copy 사진2) angular서버 실행 사진3) Hello World GitHub Link :  https://github.com/Alex-Choi0/angular_helloWorld.git