[CI & CD - AWS] 2 - Deploy Client

2023. 4. 16. 00:37·⚙️ Ops/CI & CD

💡 클라이언트 배포


준비사항

  • 3 버킷 생성
  • (로컬) npm install

S3 버킷 생성

  • Public Access 차단 해제 & ACL비활성화 -> 생성

npm 설치 (로컬환경)

  • 가지고있는 nvm스크립트 실행

NVM 설치 스크립트 받아서 설치

img


nvm install -lts  or  nvm install 15  -> nodejs 설치

img


npm install -> 의존성 모듈 설치

img


환경변수 설정

  • mv .env.example .env
  • 인스턴스 ip + port 작성
  • nvm run build

.env.example -> .env로 변경

img


.env 파일 내에 환경변수 설정

img


nvm run build 실행

img


빌드가 완료되면 build 디렉토리가 생긴다

img


S3 설정 변경

  • 정적 웹 사이트 호스팅 On
  • 버킷에 파일 업로드
  • Public Access 차단 해제
  • 버킷 정책 생성 ARN = arn:aws:s3:::[Bucket_name]/* 후 생성된 json 형태의 정책 삽입

S3 Bucket 설정 - 정적 웹호스팅 설정에 index.html 추가

img


WSL을 사용 안하므로 SCP or SFTP를 이용하여 S3 Bucket에 Build 내의 파일들 업로드

img


Bucket에 데이터 업로드 성공

img


Bucket의 Public Access를 허용해주자

img


Bucket 정책 생성 ARN = arn:aws:s3:::[Bucket_name]/* 후 생성된 json 형태의 정책 삽입

img


Bucket의 정적 웹사이트 접속

img

저작자표시 (새창열림)

'⚙️ Ops > CI & CD' 카테고리의 다른 글

[CI & CD - AWS] 5 - Automated Deployment  (0) 2023.04.16
[CI & CD - AWS] 4 - ELB & Cert & Route53  (0) 2023.04.16
[CI & CD - AWS] 3 - Connect RDS  (0) 2023.04.16
[CI & CD - AWS] 1 - Deploy Server  (0) 2023.04.16
[CI & CD - Github Actions] with AWS Code Deploy  (0) 2023.04.09
'⚙️ Ops/CI & CD' 카테고리의 다른 글
  • [CI & CD - AWS] 4 - ELB & Cert & Route53
  • [CI & CD - AWS] 3 - Connect RDS
  • [CI & CD - AWS] 1 - Deploy Server
  • [CI & CD - Github Actions] with AWS Code Deploy
신건우
신건우
조용한 개발자
  • 신건우
    우주먼지
    신건우
  • 전체
    오늘
    어제
    • 분류 전체보기 (422)
      • 📘 Frontend (71)
        • Markup (1)
        • Style Sheet (2)
        • Dart (8)
        • Javascript (12)
        • TypeScript (1)
        • Vue (36)
        • React (2)
        • Flutter (9)
      • 📘 Backend (143)
        • Java (34)
        • Concurrency (19)
        • Reflection (1)
        • Kotlin (29)
        • Python (1)
        • Spring (42)
        • Spring Cloud (5)
        • Message Broker (5)
        • Streaming (2)
        • 기능 개발 (5)
      • 💻 Server (6)
        • Linux (6)
      • ❌ Error Handling (11)
      • 📦 Database (62)
        • SQL (31)
        • NoSQL (2)
        • JPQL (9)
        • QueryDSL (12)
        • Basic (4)
        • Firebase (4)
      • ⚙️ Ops (57)
        • CS (6)
        • AWS (9)
        • Docker (8)
        • Kubernetes (13)
        • MSA (1)
        • CI & CD (20)
      • 📚 Data Architect (48)
        • Data Structure (10)
        • Algorithm (8)
        • Programmers (17)
        • BaekJoon (5)
        • CodeUp (4)
        • Design Pattern (4)
        • AI (0)
      • ⚒️ Management & Tool (8)
        • Git (7)
        • IntelliJ (1)
      • 📄 Document (10)
        • Project 설계 (6)
        • Server Migration (3)
      • 📄 책읽기 (2)
        • 시작하세요! 도커 & 쿠버네티스 (2)
      • 🎮 Game (4)
        • Stardew Vally (1)
        • Path of Exile (3)
  • 블로그 메뉴

    • 링크

      • Github
    • 공지사항

    • 인기 글

    • 태그

      Lock #Thread #Concurrency
      React #Markdown
      GStreamer #Pipeline
    • 최근 댓글

    • 최근 글

    • hELLO· Designed By정상우.v4.10.0
    신건우
    [CI & CD - AWS] 2 - Deploy Client
    상단으로

    티스토리툴바