반응형

지난 스텝에 이어서, AWS와 Git을 연동해보도록 하겠습니다.

환경

Node : 16.20.0

TypeScript : 5.1.6

Next : 8.19.4

 

ECS 클러스터 생성

 

aws ECS메뉴에서 클러스터 생성을 누른 뒤, demo 로 이름만 지정해준뒤 (나머지 기본값) 클러스터를 생성해줍니다 !

ECS 테스크 정의

 

 

[테스크정의] - [새 테스크 정의 생성] 버튼을 클릭합니다.

 

 

[테스크 정의 패밀리] : 사용할 패밀리 명을 적절히 입력해줍니다.

 

 

컨테이너 영역

[이름] : 컨테이너 이름

[이미지 URI] : ECR 이미지의 URI을 입력합니다. 맨뒤에 :latest를 해야 마지막 버전의 이미지를 사용합니다 ~

[포트] : 사용하는 컨테이너의 포트 입력 

 

그 외 항목은 기본값을 입력합니다

 

 

 

ECS Service 생성

 

화면에서 [생성] 이라는 버튼을 눌러서 ecs 서비스를 생성해주도록 합시다 !

 

  • 패밀리 : 생성한 클러스터명 선택
  • 서비스 이름 : 사용할 서비스 명 입력

- Route를 이용해 로드발란서를 사용하는 경우 로드발란서 설정을 해줍니다.


나머지는 기본값으로 하고 저장을 누르면, 서비스 설정까지 완료되었습니다 !

이제 다시 프로젝트로 돌아와서, Task를 만들어 주도록하죠 !


 

Task Json 복사

 

왼쪽의 [테스크 정의] > 생성한 클러스터 [저는 demo]명 클릭 > 최신 개정판을 클릭하면 위와같은 화면이 나옵니다.

위 화면에서 Json 클릭

 

 

 

요 Json을 복사하여, 프로젝트의  [.ecs] > [prod] > [task.json] 파일을 만들어 붙여넣기 해줍니다.

 

 

마지막으로 ! githib > workflow를 수정해주고 커밋해주면 서비스가정상적으로 배포되는 부분 확인 하실 수 있습니다.

 

name: Staging # 워크플로 Action의 이름
on:
  push:
    branches: [main] #github main 브런치에 푸시 발생 시 실행 ( main 외 다른브런치 이용시 이름변경)
jobs:
  staging: #staging이라는 작업
    name: demo # 작업의 이름
    runs-on: ubuntu-latest # 실행될 작업환경을 말함.
    steps:
      - name: Checkout
        uses: actions/checkout@v3 #체크아웃 받기
      - name: HelloWorld
        uses: actions/hello-world-javascript-action@v1 # 헬로월드 찍어보기
      - name: Configure AWS credentials
        uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }} # Github Secret 이름
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }} # Github Secret 이름
          aws-region: ap-northeast-1 # AWS 리전 선택
      #AWS ECR(Elastic Container Registry)
      - name: Login to Amazon ECR # AWS-ECR 로그인
        id: login-ecr
        uses: aws-actions/amazon-ecr-login@v1
      - name: Build, tag, and push image to Amazon ECR
        id: build-image
        env:
          ECR_REGISTRY: ${{ steps.login-ecr.outputs.registry }}
          ECR_REPOSITORY: demo # ecr이름
          IMAGE_TAG: demo-${{ github.run_number }} # git 커밋넘버를 이미지 이름 구분을 위해 넣어줌
        run: |
          docker build --no-cache --network host -t $ECR_REPOSITORY:$IMAGE_TAG -f dockerfile .
          docker tag $ECR_REPOSITORY:$IMAGE_TAG $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG
          docker push $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG
          echo "::set-output name=image::$ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG"
      - name: Fill in the new image ID in the Amazon ECS task definition
        id: task-def
        uses: aws-actions/amazon-ecs-render-task-definition@v1
        with:
          task-definition: .ecs/prod/task.json # task파일
          container-name: demo #이미지 컨테이너 이름
          image: ${{ steps.build-image.outputs.image }}
      - name: Deploy Amazon ECS task definition
        uses: aws-actions/amazon-ecs-deploy-task-definition@v1
        with:
          task-definition: ${{ steps.task-def.outputs.task-definition }}
          service: demo-prod #클러스터 서비스 명
          cluster: demo # 클러스터 명
          wait-for-service-stability: true

 

 

 


다들 고생 많으셨습니다 !

 

반응형
반응형

지난 스텝에 이어서, AWS와 Git을 연동해보도록 하겠습니다.

환경

Node : 16.20.0

TypeScript : 5.1.6

Next : 8.19.4

 

AWS ECR 생성

AWS ECR을 demo로 생성해주도록 하자 !

 

 

 

Workflow 수정

ECR을 문제없이 수정했다면 Workflow를 수정해준다 !

 

name: Staging # 워크플로 Action의 이름
on:
  push:
    branches: [main] #github main 브런치에 푸시 발생 시 실행 ( main 외 다른브런치 이용시 이름변경)
jobs:
  staging: #staging이라는 작업
    name: demo # 작업의 이름
    runs-on: ubuntu-latest # 실행될 작업환경을 말함.
    steps:
      - name: Checkout
        uses: actions/checkout@v3 #체크아웃 받기
      - name: HelloWorld
        uses: actions/hello-world-javascript-action@v1 # 헬로월드 찍어보기
      - name: Configure AWS credentials
        uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }} # Github Secret 이름
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }} # Github Secret 이름
          aws-region: ap-northeast-1 # AWS 리전 선택
      #AWS ECR(Elastic Container Registry)
      - name: Login to Amazon ECR # AWS-ECR 로그인
        id: login-ecr
        uses: aws-actions/amazon-ecr-login@v1
      - name: Build, tag, and push image to Amazon ECR
        id: build-image
        env:
          ECR_REGISTRY: ${{ steps.login-ecr.outputs.registry }}
          ECR_REPOSITORY: demo # ecr이름
          IMAGE_TAG: demo-${{ github.run_number }} # git 커밋넘버를 이미지 이름 구분을 위해 넣어줌
        run: |
          docker build --no-cache --network host -t $ECR_REPOSITORY:$IMAGE_TAG -f dockerfile .
          docker tag $ECR_REPOSITORY:$IMAGE_TAG $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG
          docker push $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG
          echo "::set-output name=image::$ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG"

 

 

dockerfile 생성

root경로에 docker파일을 생성해준다 ~

 

*** Docker File의 경우 본인의 프로젝트 구조에 맞게 작성 해주셔야 합니다 !
아래 내용은 제 프로젝트 기준입니다 ***

FROM node:16.20 AS build

#/usr/src로 이동
WORKDIR /app

# package 복사
COPY /my-app/package*.json /my-app/yarn.lock ./
RUN yarn install
#파일전체복사
COPY /my-app .
RUN yarn build

FROM node:16.20  AS runner
WORKDIR /app

COPY --from=build /app/package*.json ./
COPY --from=build /app/yarn.lock ./
COPY --from=build /app/public ./public
COPY --from=build  /app/.next/static ./.next/static

# 운영환경 Install
RUN yarn install --production 

EXPOSE 7878
CMD ["yarn", "start"]

 

 

 

 

 

커밋 !

전 스텝과 마찬가지로 커밋 후 ! 정상적으로 Action이 성공하는지, ECR이 생성되었는지 확인 후 마무리 하도록 하자 !

다음 스텝에는 ECR을 기준으로 서비스를 띄워보도록 하자 ~

 

 

 

둘다 정상적으로 동작되었다 !!

다음 스텝에 만나요 ~~

반응형
반응형
환경

Node : 16.20.0

TypeScript : 5.1.6

Next : 8.19.4

 

Next 프로젝트 생성

Git 레파지토리생성을 했다고 생각하고 Next 프로젝트 부터 생성하도록 하겠습니다.

1. Node 설치

Node 설치는 구글에 검색해보면 쉽게 찾을 수 있습니다. 구글 검색하여 노드설치 해주기 !


2. create-next-app 설치

> npm install create-next-app

 

3. Next.js 프로젝트 생성

//노드를 설치했다면, 프로젝트 경로에서 아래 명령어를 입력하여 next.js 프로젝트를 생성한다
> npm create-next-app my-app

 

 

프로젝트 실행

프로젝트 생성을 완료하였다면, 이제 프로젝트를 실행하여 정상적으로 화면이 나오는지 확인합니다.

//프로젝트 경로에서 npm run dev 입력
> npm run dev

프로젝트가 정상적으로 실행된 것을 확인할 수 있습니다.


 

.github > workflows 작성

 

//프로젝트 root 경로에서 아래 폴더와 파일을 생성해준다.

1. .github
2. .gibhub/workflows
3. .gibhub/workflows/workflow.yml

 

 

workflow.yml

 

workflow.yml에 아래 내용 입력

name: Staging # 워크플로 Action의 이름
on:
  push:
    branches: [main] #github main 브런치에 푸시 발생 시 실행 ( main 외 다른브런치 이용시 이름변경)
jobs:
  staging: #staging이라는 작업
    name: demo # 작업의 이름
    runs-on: ubuntu-latest # 실행될 작업환경을 말함.
    steps:
      - name: Checkout
        uses: actions/checkout@v3 #체크아웃 받기
      - name: HelloWorld
        uses: actions/hello-world-javascript-action@v1 # 헬로월드 찍어보기

 

이제 Git 커밋&푸시를 하게되면 Github Action이 발생한다. 오류가 나지않고 정상적으로 진행되는지 확인하기 !

 

 

작업이 성공적으로 끝났습니다 !

자 이제 Github Workflow를 통해 Action을 사용하도록 설정이 완료되었습니다 

다음 스텝에서는 실질적으로 AWS와 연동해보도록 하겠습니다.

감사합니다.

반응형
반응형
Git의 흐름도

 

 

기존 로컬폴더에서 소스를 Git 저장소에 올리는 방법

1. 올리고자 하는 폴더에서 마우스 우클릭 후 Git Bash Here 클릭한다.

 

2. 현재 폴더를 로컬 저장소로 지정한다

git init

해당 문구를 입력하면 폴더에 .git폴더가 생성된다.
.git 폴더의 역할은 각각의 파일들이 어떤 상태인지를 여러가지로 분류하여 관리한다.


3. 로컬 저장소의 현재 상태를 확인한다.

git status

빨간 글씨체로 보여지는 파일목록은 추적되지 않은 파일들(Untracked files)이다.

추적되지 않는 파일이란, 준비 영역이나 로컬 저장소에 한번이라도 add되거나 commit되지 않은 파일을 말한다.
반대로 Tracked files)은 최소한 한번은 gitt add 명령을 통해 준비영역에 포함되거나 commit을 통해 로컬 저장소에 저장된 파일이다.

 

4. 작업 공간의 파일들을 준비 영역에 추가한다

git add . //현재 디렉토리의 모든 변경내용을 스테이징 영역으로 넘김
git add "파일경로" //특정파일만

git add . 입력 후 만약 에러(warning: LF will be replaced by CRLF in .project.)가 발생한다면 그것은 문서의 개행 문자를 처리하는 OS 차이 때문에 발생하는 것이다.(참고 : 유닉스에서는 한 줄의 끝이 LF(Line Feed)로 이루어지는 반면, 윈도우에서는 줄 하나가 CR(Carriage Return)와 LF(Line Feed)인 CRLF로 이루어진다)

명령어 git config core.autocrlf true 를 입력 후 다시 add 하자.

 

5. 로컬 저장소에 최종 저장하는 단계이다.

git commit -m "메세지"

 

6. 로컬 저장소와 원격 저장소를 연결시킨다.

git remote add origin "Git Repository 주소"

* Origin은 별칭이다, 아무 별칭을 사용해도 무방

Git Repository 주소는 본인 Git 계정 접속 후 Repository 에서 Code를 클릭하면 가져올 수 있다.

 

7. 별칭 내역을 확인한다

git remote -v

 

8. 원격 저장소의 데이터를 동기화한다

git pull origin 브랜치명 --allow-unrelated-histories

브랜치명에는 따로 생성한 브랜치명이 없다면 master를 입력하면 된다. (Git은 기본적으로 master 브랜치가 생성된다)

 

8-1 브랜치 조회

git branch -a

 

9. 로컬 저장소의 파일들을 원격 저장소로 Push한다

git push origin master

 

반응형

'기록' 카테고리의 다른 글

brew node version 변경  (0) 2023.03.18
[Docker] Docker + Nginx + LetsEncrypt SSL 인증서 발급받기  (0) 2023.02.02
[Docker] 도커명령어 정리  (0) 2023.02.02
반응형

안녕하세요. 지난 포스팅에 이어서 Git프로젝트와 Jenkins와 연동하여 빌드&배포하는 방법을 포스팅 하도록하겠습니다.

 

윈도우 Jenkins설치[2]  기억이 안나시면 왼쪽 링크 참조하시기 바랍니다.

 

Github

환경

  • 개발 Window10 / 배포 Window2008 
  • Visual Studio 2019
  • Git
  • IIS
  • Github
  • Jenkins
  • Nuget4.9
  • MSBuilder

설정

먼저, GitHub에 테스트용 프로젝트를 생성하고 진행 하시기 바랍니다.

 

JenKins 메인화면에서 New Item 혹은 새로운 Item 메뉴를 클릭합니다.

 

 

 

아이템명을 입력하고 FreeStyle Project를 선택한 후 OK버튼을 누릅니다.

 

 

GitHub Project에 체크를하고 Project Url에 프로젝트의 URL을 입력합니다.

https://github.com/유저명/프로젝트명

 

 

 

소스 코드 관리 탭에서 Git을 체크 하고 Repository URL에 clone에 쓰이는 url을 입력 합니다. 

 

GitHub 프로젝트에 clone or download 에서 주소를 복사할 수 있습니다.

 

 

Git-Bash를 실행하여 해당 명령어로 키를 생성합니다.

 

passphrase 를 입력하라고 하면 그냥 엔터 누르시면 됩니다.

 

그럼  확장자없는 파일 하나, .pub 확장자를 가진 파일 하나가 생성됩니다.

 

확장자없는 파일에는 개인키가 들어있고 .pub 파일에는 공개키가 들어있습니다

ssh-keygen -t rsa -f 파일명

 

Repository URL 아래 Credentials에 Add를 누릅니다.

 

 

Kind를 SSH Username with private key 로 설정하시고 아래에 개인키를 메모장으로 열어서 begin -end 사이를  복사하여 붙여넣으세요.

 

개인키가 등록되었으면 github 프로젝트로 들어가 프로젝트의 Settings - Deploy Keys 에서 Add deploy key 를 선택합니다.

 

제목을 입력하고, Key 부분에는 아까 생성한 공개키 (.pub 파일) 을 메모장으로 열어 내용을 복붙합니다.

 

Allow write access 체크는 푸시고, Add key 하세요. 

 

저장이 되었으면, 이제 jenkins로 github 프로젝트 코드를 가져오고 빌드를 진행할 수 있습니다

 

 

Webhook 설정

 

새창을 여시고, 젠킨스 메인에서Jenkins 관리 - 시스템 설정으로 가Jenkins Location을 수정해주세요.

 

루프백 외에 외부에서 접근할 수 있는 도메인이나 ip/(설정한포트)를 입력하셔야 합니다. 

 

 

깃허브 프로젝트 설정으로 돌아가, Webhook 메뉴로 이동해 add webhook 버튼을 누릅니다.

 

Payload URL에는 Jenkins 주소/github-webhook/ 을 입력합니다.

마지막에 / 는 꼭 입력되어야 합니다

나머지는 기본값으로 두고 Add webhook 으로 완료합니다.

 

다시 젠킨스의 Item 생성 하던 곳으로 돌아갑시다.

 

빌드 유발 탭에서 GitHub hook trigger for GITScm polling을 선택합니다. 

 

이것으로 github에 push 이벤트가 발생하면 자동으로 빌드가 이루어질텐데,

 

서버에 따로 Visual Studio가 설치되어 있지 않으면 Build시 에러가 발생 할 수 있어 

 

Build전에 프로그램을 몇개 더 설치 해야합니다.

 

1.

https://www.nuget.org/downloads 에서 Nuget.exe를 다운로드하여 설치합니다

 

NuGet Gallery | Downloads

 

www.nuget.org

2.

Visual Studio Installer를 설치하여 MSbuiler만 설치합니다.

 

3.Jenkins 메인 > Jenkins 관리 > Global Tool Configuration 을 클릭합니다.

 

MSBuild탭 Add MSBuild버튼을 누르고

 

Name: 구분명

 

Path to MSBuild : 설치된 MSBuild 경로를 입력 한 후 저장을 누릅니다. 

 

 

 

다시 젠킨스의 Item 생성 하던 곳으로 돌아갑시다.

 

다시 Jeknins로 돌아와 [Build] 탭으로 옵니다.

 

Add Build Step을 눌러 [Execute Windows batch command] 를 추가하고, 

 

[Nuget 설치경로/실행파일] restore [.net 프로젝트]을 입력합니다

 

※ Build전 패키지 복구

C:\nuget\nuget.exe restore "C:\Program Files (x86)\Jenkins\workspace\bimp\jenkins.sln"

 

※ Build

다시 Add Build Step을 눌러 [Build a Visual Studio project or solution using MSBuild] 를 추가하고, 

 

MSBuild Version에는 아까 생성한 버전을 선택하고

 

MSBuild Build File은 .net프로젝트위치를 .sln을 포함하여 입력합니다

 

 

Command Line Arguments는 /p:Configuration=Release를 입력 하고 그외 설정은 직접 찾아보시면 됩니다.

 

 

※ Build 후 서비스되는 폴더로 옮기기

마지막으로 Add Build Step을 눌러 [Execute Windows batch command] 를 추가하고, 

 

xcopy ".net프로젝트폴더" "서비스되는폴더"  /s /h /e /d /y 를 입력합니다

 

xcopy "C:\Program Files (x86)\Jenkins\workspace\bimp\jenkins" "C:\test\" /s /h /e /d /y

 

 

이것으로 이제 Git에 소스를 푸쉬하면 자동 빌드 & 배포가 되도록 셋팅이 끝났습니다.

 

감사합니다.

 

반응형

'라이브러리' 카테고리의 다른 글

RabbitMQ 클러스터 설정하기  (0) 2022.01.15
윈도우 Jenkins 설치 [2]  (0) 2020.06.14
윈도우 Jenkins 설치  (0) 2020.06.11
[RabbitMQ] 사용자 추가  (0) 2018.09.06
RabbitMQ설치  (0) 2018.09.06

+ Recent posts