세계최강용사의 개발일기

** 개인 도메인을 가비아 혹은 카페24 혹은 그외 사이트에서 구매하여 가지고 있어야 합니다 
** 저의 프로젝트 기준이므로 꼭 사전에 Elb를 설정해주세요 !

aws Route 53 메뉴로 이동하여 호스팅영역으로 이동하여, [호스팅 영역 생성] 버튼을 클릭해줍니다.

가지고계신 도메인 이름을 입력 후 [호스팅 영역 생성] 버튼을 클릭합니다.

자, 이제 여러분의 호스트가 등록이 되었습니다.

아래 이미지의 dns정보를, 여러분이 사용하는 호스팅 사이트의 dns에 추가 해주세요 !
(아래 URL의 우선순위를 높여서 등록해주세요 ~)

DNS 정보를 등록하였다면 이제 직접적으로 사용자들이 접근할 서브 도메인을 만들어보죠 ~

서브도메인의 경우 가지고있는 퍼블릭 IP가 있다면, IP로 연결하면 되지만,

저는 Elb로 바로 연결할거기때문에 사전에 아래 내용은 Elb셋팅이 꼭 되어 있어야 합니다 ~

레코드 생성 버튼을 눌러줍니다 !

[레코드 이름] : 사용할 서브도메인 앞의 부분을 입력해주십니다

[별칭] : elb와 연결하기 위해 꼭 활성화 해주세요.

[트래픽 라우팅 대상] : 본인의 리전정보로 사용할 elb를 선택해주시면 됩니다.

위 내용이 전부 입력되었으면 레코드 생성을 눌러줍니다.

자, 이제 레코드가 생성이 된 것이 보일거에요 ~

하지만 이렇게 되었다고 바로 접근이 가능한건 아닙니다 ~

https://www.whatsmydns.net/#A/test.bigtori.store

위 URL에서 본인의 레코드를 입력 후 검색 해봅니다 !

그럼 DNS서버에 본인의 도메인이 얼마나 뿌려졌나 확인 할 수 있습니다

체크상태가 어느정도 나와야 접근이 가능하니 바로 나오지 않는다고 너무 상심하지 마세요 :)

앗차차 그리고 꼭 체크해주셔야 하는 부분이있습니다 !

aws 보안그룹에서 인바운드규칙과 아웃바운드규칙을 확인하셔서 본인 서비스에 맞게 규칙이 설정되어있는지 체크해주세요 ~

본인 포트가 막혀있다면 접근이 안될 수 있습니다 !!

위 내용까지 마무리하면 본인의 도메인이 정상적으로 elb 혹은 IP와 연결되는것을 확인하실 수 있을거에요 !

감사합니다 ~

지난 스텝에 이어서, 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을 기준으로 서비스를 띄워보도록 하자 ~

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

다음 스텝에 만나요 ~~

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

환경

Node : 16.20.0

TypeScript : 5.1.6

Next : 8.19.4

aws Accees Key 생성

Aws Access Key 생성을 위해 Aws 로그인 후 Iam > 사용자 > 보안자격증명에서 Access Key생성을 한다(해당 키는 노출되면안됌 !)

낄낄 어피치 옆에 엑세스 키 만들기 버튼을 이용해서 만들어주면 됩니다요 ~

주의 ! : 발급된 엑세스키는 시크릿키, 엑세스키2개가 발급되는데  별도로 꼭 저장해놓읍시다 !

Github에 엑세스키 저장

아래 이미지의 경로에서 

AWS_SECRET_ACCESS_KEY(시크릿키)와 AWS_ACCESS_KEY_ID(엑세스키)를 각각 입력해준다 !

입력하면 아래와 같이 나온다!

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

지난 스텝에서 작성했던 WorkFlow를 수정해주도록 하자 !

커밋

커밋하여 Action이 정상적으로 성공되었는지 체크한다 !

Action이 성공하였다면 이제 AWS에 인증키로 로그인하는 부분까지 완료하였다  !

다음 스텝에서는 Docker File로 도커이미지 생성하는 부분까지 알아보도록 하자 !

주의사항

AWS와 연동하기위해서는 AWS계정에 권한이 필수적으로 입력되어야 한다 ! 권한을 꼭 전부 주도록 ㅎ ㅏ자 !

필자는 아래의 권한을 주었다

-------------------------------------------------------------------------------------------------------------

정상적으로 Actions가 동작한것을 확인 할 수 있다 !

다음 스텝에서 보자구요 ~~

환경

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와 연동해보도록 하겠습니다.

감사합니다.

환경

AWS t2.micro CentOS (x86_64

필수 명령어들 요약

• ls - 현재 위치의 파일 목록 조회
• cd - 디렉터리 이동
• touch - 0바이트 파일 생성, 파일의 날짜와 시간을 수정
• mkdir - 디렉터리 생성
• cp - 파일 복사
• mv - 파일 이동
• rm -  파일 삭제
• cat - 파일의 내용을 화면에 출력, 리다이렉션 기호("<")를 사용하여 새로운 파일 생성
• redirection - 화면의 출력 결과를 파일로 저장
• alias - 자주 사용하는 명령어들을 별명으로 정의하여 쉽게 사용할 수 있도록 설정

명령어 옵션과 설명

1. ls -  현재 위치의 파일 목록 조회
   • ls -l : 파일의 상세정보
   • ls -a : 숨김 파일 표시
   • ls -t : 파일들을 생선시간순(제일 최신것부터)으로 표시
   • ls -rt : 파일들을 생성시간순(제일 오래된 것부터)으로 표시
   • ls -f : 파일 표시 시 마지막 유형에 나타내는 파일명을 끝에 표시("/" : 디렉터리, "*": 실행파일, "@": 링크 등등)
2. cd - 디렉터리 이동
   • cd ~  : 홈 디렉터리로 이동
   • cd / : 최상위 디렉터리로 이동
   • cd . : 현재 디렉터리
   • cd .. : 상위 디렉터리로 이동
   • cd - : 이전 디렉터리로 이동
3. touch - 0바이트 파일 생성, 파일의 날짜와 시간을 수정
   • touch filename  : filename의 파일을 생성
   • touch -c filename : filename의 시간을 현재시간으로 갱신
   • touch -t 202110291608 filename : filename의 시간을 날짜정보(YYYYMMDDhhmm)로 갱신
   • touch -r oldfile newfile : newfile의 날짜 정보를 oldfile의 날짜 정보와 동일하게 변경
4. mkdir - 디렉터리 생성
   • mkdir dirname : dirname이라는 디렉터리 생성
   • mkdir dir1 dir2 : 한 번에 여러 개의 디렉터리 생성
   • mkdir -p dirname/sub_dirname : dirname이라는 디렉터리 생성, sub_dirname이라는 하위 디렉터리도 생성
   • mkdir -m 700 dirname : 특정 퍼미션(권한)을 갖는 디렉터리 생성
   <파일의 퍼미션>

   8진수	2진수	권한	의미
   0	000	---	아무 권한 없음
   1	001	--x	실행 권한만 있음
   2	010	-w-	쓰기 권한만 있음
   3	011	-wx	쓰기, 실행 권한 있음
   4	100	r--	읽기 권한만 있음
   5	101	r-x	읽기, 실행 권한 있음
   6	110	rw-	읽끼, 쓰기 권한 있음
   7	111	rwx	모든 권한 있음

5. cp - 파일 복사
   • cp file1 file2 : file1 파일을 file2 이라는 파일로 복사
   • cp -f file1 file2 : 강제 복사(file2라는 파일이 이미 있을 경우 강제로 기존 file2를 지우고 복사 진행)
   • cp -r dir1 dir2 : 디렉터리 복사, 폴더 안의 모든 하위 경로와 파일들을 복사
6. mv - 파일 이동
   • mv file1 file2 : file1 파일을 file2 이라는 파일로 변경
   • mv file1 /dir : file1 파일을 dir 디렉터리로 이동
   • mv file1 file2 /dir : 여러 개의 파일을 dir 디렉터리로 이동
   • mv /dir1 /dir2 : dir1 디렉터리를 dir2 디렉터리로 이름 변경
7. rm - 파일 삭제
   • rm file1 : file1을 삭제
   • rm -f file1 : file1을 강제 삭제
   • rm -r dir : 디렉터리 삭제 (디렉터리는 -r 옵션 없이 삭제 불가)
8. cat - 파일의 내용을 화면에 출력, 리다이렉션 기호 ('>)를 사용하여 새로운 파일 생성 
   • cat file1 : file1의 내용을 출력
   • cat file1 file2 : file1과 file2의 내용을 출력
   • cat file1 file2 | more : file1과 file2의 내용을 페이지별로 출력
   • cat file1 file2 | head : file1과 file2의 내용을 처음부터 10번째 줄까지만 출력
   • cat file1 file2 | tail : file1과 file2의 내용을 끝에서부터 10번째 줄까지만 출력
9. redirection ('>','>>') : 화면의 출력 결과를 파일로 저장
   • '>' : 기존에 있는 파일 내용을 지우고 저장
   • '>>' : 기존 파일 내용 뒤에 덧붙여서 저장
   • '<' : 파일의 데이터를 명령에 입력
   • cat file1 file2 > file3 : file1, file2의 명령 결과를 합쳐서 file3라는 파일에 저장
   • cat file4 >> file3 : file3에 file4의 내용을 추가
   • cat < file1 : file1의 결과를 출력
   • cat < file1 > file2 : file1의 출력결과를 file2에 저장
10. alias - 자주 사용하는 명령어들을 별명으로 정의하여 쉽게 사용할 수 있도록 설정
    • alias 별명 = '명령어 정의'  (ex) alias lsa = 'ls -a' : lsa를 실행하면 -a의 옵션을 갖는 ls를 실행합니다.
    • unalias lsa : lsa라는 alias를 해제
11. find - 파일 찾기
    • find [찾고자 하는 디렉터리] -name "[키워드"] : 이름으로 찾기
    • find [찾고자 하는 디렉터리] -user "[키워드"] : 유저로 찾기
    • find [찾고자 하는 디렉터리] -size "[키워드]" : 사이즈로 찾기
    • (find /home -name ".conf") -exec 명령어{}\;

<find 예시>

## /etc 내 .conf로 끝나는 모든것 찾기
find /etc -name "*.conf"

## /home 디렉터리에서 특정 유저의 파일들 보기 (user 이름이 centos 가정)
find /home -user centos

## usr/bin 디렉터리에서 사이즈가 10k byte이상, 100k byte 이하인 파일 찾기
find /usr/bin -size +10K -size -100K

## usr/bin 디렉터리에서 사이즈가 10k byte이상, 100k byte 이하인 파일 찾고 ls -l 실행
find /usr/bin -size +10K -size -100K -exec ls -l {} \;

출처

https://cocoon1787.tistory.com/717 

https://ansan-survivor.tistory.com/429 

감사합니다.