세계최강용사의 개발일기

지난 스텝에 이어서, 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가 동작한것을 확인 할 수 있다 !

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

What React Router ?

리엑트 url path경로에 맞는 화면은 렌더링 해줍니다.

How Install ?

npm install react-router-dom

How use React Router?

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/Second" element={<Second />}></Route>
        <Route path="/" element={<Login />}></Route>
      </Routes>
    </Router>
  )
}

샘플 사용방법입니다.

감사합니다 :)