[250909] TIL

Today I Learned (2025-09-09)

• 첫 출근 전후로 정신이 없어서 뒤늦게 적어보는 TIL
• AWS Amplify 를 처음 해보았다.

AWS Amplify 란?

• 프론트엔드 개발자가 빠르게 배포하고 백엔드 기능도 붙일 수 있게 도와주는 AWS 서비스
• React/Next.js 프로젝트를 GitHub 연결해서 클릭 몇 번으로 호스팅 → 자동 배포 가능

IAM

• AWS에서 사용자/권한 관리를 담당하는 서비스
• 루트 계정에는 모든 권한이 있지만 보안상 루트 계정으로 직접 개발/배포하면 위험함
• IAM 사용자를 만들어서 필요한 권한만 부여하고, 그 사용자에게 엑세스 키를 발급해서 사용

실습해보기

AWS Amplify CLI 초기 설정

 npm install -g @aws-amplify/cli

amplify configure

AWS 가입하고 IAM 계정 만들었음

리액트 초기 폴더 생성

npm create vite@latest amplify_text

 amplify init

• 권한 주고 새로 액세스 발급 받아서 했음

그래프 큐엘 API 생성

amplify add api

 amplify push

amplify console api

• 위 명령어 입력하면 리액트 어플리케이션과 연결 가능함

AWS Amplify 설치

• 리액트 파일에 라이브러리로 설치
• aws-amplify 기능들을 사용 할 수 있다.

npm install aws-amplify

Amplify.yml 파일

• 리액트 파일에 넣어서 배포하니, 알아서 yml 파일 읽고 파일에 맞게 빌드해줌
• yml 은 들여쓰기로 계층을 표현함
• 주로 설정값, 환경변수, 워크플로우 정의 같은 걸 간단하게 표현

version: 1
applications:
  - frontend:
      phases:
        preBuild:
          commands:
            - nvm install 22
            - nvm use 22
            - npm ci # lockfile 기반 설치
        build:
          commands:
            - npm run build
      artifacts:
        baseDirectory: dist # Vite → dist, Next.js라면 .next
        files:
          - "**/*"
      cache:
        paths:
          - node_modules/**/*