Engineering_S/W & H/W

 NextJS 또는 React를 배포할때 Build 또는 "npm run dev"를 이용해서 배포를 한다. 그런데 "npm run dev"시점에서 환경변수가 적용이 되지만 Build에서는 Build때 환경변수가 적용되어야 한다. 그래야 실제 배포때 env파일이 적용이 되기 때문이다. 아래 글은 Dockerfile에서 Build시 환경변수를 적용하는 방법이다. VITE를 이용해서 빌드를 할려고 하는데 필요한 환경변수는 아래 2개이다. VITE_API_URL VITE_FILE_UPLOAD_API_URL 먼저 Dockerfile에 해당 ENV파일이 저장될수 있도록 build전 단계에서 작성. 사진1) Dockerfile - ARG, ENV셋팅 GitHub의 Secreat를 사용하기 위해서는 ARG셋팅이 필요하다. Git Action의 yml파일에서 환경변수값을 Docker에 전달하기 위해서 해당 셋팅을 Dockerfile에 작성해야 합니다. ARG를 선언하지 않으면 build시 Dockerfile내부에 접근할수 없습니다. 이후 ENV로 해당 값을 지정 합니다. 이때 "$VITE_API_URL", "$VITE_FILE_UPLOAD_API_URL" 부분은 GitHub에서 갖고옵니다. 사진2) .yml파일의 build부분 수정 사진2의 84 ~ 86번째 줄이 build과정중에 ENV파일을 추가하기 위한 부분입니다.  사진3) Repository secrets 설정 옵션 사진4) Repository secrets 설정 옵션을 지정 마지막으로 사진3, 4와 같이 build시 저장할 Repository secrets를 설정한다. 위 설정이 다 된후에 CI/CD가 진행되는 branch에 푸시할시 build과정에서 Repository secrets를 이용해서 build를 진행한다.

1. ssh key 생성 $ ssh-keygen -t ed25519 -C "이메일 주소" 사진1) ssh key 생성 기본 경로값은 "~/.ssh/id_ed25519"를 사용한다. 2. ssh 에이전트 실행 및 키 등록 $ eval "$(ssh-agent -s)" $ ssh-add ~/.ssh/id_ed25519 사진2) 공개키 조회 위 2개의 터미널을 "~/.bashrc" 또는 "~/.zshrc"에 추가해서 재부팅 후에도 키가 등록되게 할수 있다. 3. 공개키를 GitHub에 등록 $ cat ~/.ssh/id_ed25519.pub 사진3) public key GitHub에 들어가서 Setting을 클릭한다. 사진4) Access 설정에서 "SSH and GPG keys"을 클릭한다. 사진5) SSH and GPG keys 선택 "New SSH Key"를 선택해서 터미널에서 복사한(사진3) public key를 추가한다. 사진6) public key를 넣기 생성이 정상적으로 됬으면 아래와 같이 "Authentication keys"가 추가된 것을 확인할수 있다. 다만 한번도 사용이 안되어 있어서 "Never used - Read/write"로 되어있다. 사진7) Authentication key 추가 모습 4. ssh config 설정 .ssh 폴더안에 config파일을 생성해서 아래와 같은 내용을 추가한다. Host github.com   HostName github.com   User git   IdentityFile ~/.ssh/id_ed25519   IdentitiesOnly yes 사진8) config 저장모습 이후에 권한을 위해서 아래 터미널을 실행 $ chmod 600 ~/.ssh/config 제대로 설정됬는지 아래 터미널을 실행할수 있다. $ ssh ...

 기존의 github의 Repository를 새로운 Repository에 올려야 하는 경우가 있다. 위 사진에서 기존(Repository1) 레파지토리의 코드를 새로운(Repository2) 레파지토리에 옮길 것이다. 먼저 dev-test을 master로 변경 이제 새로만든 레파지토리(test_new)의 URL을 복사한다. 해당 레파지토리 URL에 해로운 remote를 생성한다. 새로운 리모트를 위 사진처럼(origin_new) 추가한다. 다음에 해당 리모트(origin_new)로 푸시 한다. 이제 다른 Repository에서 작업을 할수 있다.

 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 : # 레포지토리에 접근하...

 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을 이용해서 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...