로고 이미지

고정 헤더 영역

글 제목

메뉴 레이어

로고 이미지

메뉴 리스트

  • 홈
  • 태그
  • 분류 전체보기
    • TECH

검색 레이어

로고 이미지

검색 영역

컨텐츠 검색

AWS

  • Amplify Console의 Preview URL을 Custom Domain으로 사용하는 방법

    2022.10.25 by walkinpcm

  • Amplify Console에서 환경(브랜치) 제거를 막자

    2022.10.25 by walkinpcm

  • AWS S3에 파일을 업로드 하기 위한 Pre-signed URL과 Pre-signed POST

    2021.09.08 by walkinpcm

  • AWS CloudFront의 Origin으로 S3를 사용할 때, REST API 엔드포인트를 입력하는 것과 웹사이트 엔드포인트를 입력하는 것의 차이

    2021.06.23 by walkinpcm

  • AWS Amplify Console에서 monorepo를 연결해서 사용할 때의 주의사항

    2021.05.12 by walkinpcm

  • AWS CloudFront에서만 S3 Bucket에서 파일을 가져갈 수 있도록 Bucket policy 작성하기

    2020.04.17 by walkinpcm

  • AWS Amplify Console을 이용한 프론트엔드 배포자동화 시스템 구축하기

    2020.04.17 by walkinpcm

  • AWS CodeBuild를 이용해서 프로젝트 빌드하기

    2020.04.16 by walkinpcm

Amplify Console의 Preview URL을 Custom Domain으로 사용하는 방법

Amplify Console을 통해서 웹 어플리케이션의 Hosting을 한지 어언 2년 반이 지났습니다. 아주 만족하면서 사용하고 있는데, 그 중에서 Amplify의 가장 큰 장점을 말해보라고하면 저는 Preview 기능을 선택할 것입니다. Preview 기능은 PR 단위로 환경을 만들어주기 때문에, 여러 작업을 동시에 진행하여 PR을 각각 올렸을 때 모든 작업을 분리된 환경에서 개별적으로 테스트 할 수 있게 합니다. 처음 Amplify Console을 도입할 때 제 상황이 딱 여러 작업의 테스트를 동시에 하면 좋은 상황이었기에 너무 만족스럽게 Preview 기능을 활용하고 있었습니다. 그런데, Preview 기능으로 만들어진 환경은 기본적으로 amplify 도메인으로 호스팅 됩니다. Preview는 보..

TECH 2022. 10. 25. 19:03

Amplify Console에서 환경(브랜치) 제거를 막자

저는 Amplify Console에서 웹 호스팅을 하고 있고, 약 2년 동안 대체로 아주 만족하면서 사용하고 있습니다. Amplify Console에서 웹 호스팅을 하는 방법은 아래 링크에서 볼 수 있습니다. https://walkinpcm.tistory.com/11 그런데, 2년이나 사용하면서 간과하고 있던 것이 하나 있습니다. 그건 바로 '권한'입니다. 구체적으로는 Production Branch를 삭제하지 못하게 하는 권한입니다. Amplify Console에서는 Git의 Branch 연결만으로 손 쉽게 배포환경이 만들어지고, Branch의 연결 해제만으로 손 쉽게 배포환경이 제거됩니다. 여기서 '손 쉽게 배포환경이 제거'되는 것은 큰 위험요인입니다. 사람은 언제든지 실수를 할 수 있기 때문에 언제..

TECH 2022. 10. 25. 19:02

AWS S3에 파일을 업로드 하기 위한 Pre-signed URL과 Pre-signed POST

요즘은 흔히 파일서버로 AWS S3를 이용합니다. 그래서 파일 업로드 기능을 만들때 S3에 어떻게 파일을 업로드 할지 고민하게 되는데요. Front-end 입장에서는 S3에 파일을 업로드 하는 방법으로 크게 2가지를 생각할 수 있습니다. - Front-end에서 AWS SDK를 이용해서 직접 업로드 - API 서버에 파일을 전달하고 API 서버에서 S3에 업로드 첫번째 방법은 AWS SDK를 써서 S3이용이 가능해야하기 때문에 Front-end 코드에서 AWS Access Key와 Secret Key를 알고 있어야합니다. 코드에 하드코딩 하지 않더라도 브라우저에서 AWS SDK를 이용하는 시점에는 결국 자바스크립트에서 Key 정보를 가지고 있어야합니다. 즉, Front-end에서 AWS SDK를 이용하는..

TECH 2021. 9. 8. 21:18

AWS CloudFront의 Origin으로 S3를 사용할 때, REST API 엔드포인트를 입력하는 것과 웹사이트 엔드포인트를 입력하는 것의 차이

AWS S3와 CloudFront를 이용해서 정적 웹사이트를 호스팅하는 구성은 이제 무척 보편화 되었다고 생각합니다. 저도 Vue.js나 React.js 기반의 CSR(Client-side Rendering) 프로젝트를 배포하는 경우에 S3, CloudFront 조합을 많이 사용합니다. (최근에는 Amplify Console을 더 사용하고 있긴 합니다 ㅎㅎㅎ) 처음에는 S3의 웹호스팅 기능을 활성화하고 CloudFront 배포를 생성할 때 Origin에 S3의 웹사이트 엔드포인트를 직접 입력하였습니다. 그런데, 나중에는 CloudFront의 Origin에 S3의 Rest API 엔드포인트를 넣고 OAI(Origin Access Identity)를 이용해서 S3에 CloudFront만 접근가능하도록 제한할..

TECH 2021. 6. 23. 23:08

AWS Amplify Console에서 monorepo를 연결해서 사용할 때의 주의사항

예전에 AWS Amplify Console을 이용해서 Frontend 프로젝트를 웹호스팅 하는 방법을 정리한 적이 있습니다. (링크: walkinpcm.tistory.com/11) 비교적 최근에는 Amplify Console에서 Git Repository를 연결할 때 monorepo 임을 선택할 수 있는 설정이 생겼습니다. 저도 최근에 monorepo라고 설정하여 Amplify Console을 사용해 봤는데, 몇가지 인지해야하는 주의사항이 발견되어서 정리해봅니다. (1) 스크립트의 실행 위치는 package directory 입니다. Amplify Console에 monorepo의 git repo 자체를 연결하기 때문에 빌드를 실행할 때의 directory 위치가 repo의 root directory라고..

TECH 2021. 5. 12. 20:56

AWS CloudFront에서만 S3 Bucket에서 파일을 가져갈 수 있도록 Bucket policy 작성하기

AWS S3를 Origin으로 사용하는 CloudFront 배포를 만드는 경우가 있습니다. 예를 들면, S3에 저장된 파일들을 CDN으로 배포하려는 경우와 S3에서 정적 웹호스팅 기능을 사용하면서 SSL을 적용하기 위해서 CloudFront를 이용하는 경우가 있습니다. 위의 두 경우 모두 S3 Bucket에 저장한 파일을 Public Internet에 제공하기 위한 것이기 때문에, S3 Bucket의 정책을 퍼블릭하게 설정하게 됩니다. 하지만 CloudFront를 이용해서 S3 Bucket의 파일들을 Public Internet에 공개한다면 Bucket의 정책을 퍼블릭하게 설정하지 않고, CloudFront 배포에서만 접근하도록 설정하면 됩니다. 방법은 아주 간단합니다. S3 Bucket 정책의 Pric..

TECH 2020. 4. 17. 00:27

AWS Amplify Console을 이용한 프론트엔드 배포자동화 시스템 구축하기

이번 포스팅에서는 AWS의 Amplify Console 서비스에 대해서 정리해보려 합니다. Amplify는 사실 3가지로 나눠집니다. (1) Amplify 라이브러리: 클라우드 기능을 편리하게 사용할 수 있는 Javascript 라이브러리 (2) Amplify CLI: CLI 환경에서 클라우드 서비스를 생성, 관리 할 수 있는 tool (3) Amplify Console: 정적 웹 호스팅을 위한 서버리스 지속적 배포 서비스 이 중에서 최근에 저는 Amplify Console에 대해서 알아보고 매력을 느껴서 블로그로 정리해두려합니다. Amplify Console이란? AWS Amplify Console에서는 Git 기반 워크플로를 통해 풀 스택 서버리스 웹 애플리케이션을 배포 및 호스팅합니다. 풀 스택 서..

TECH 2020. 4. 17. 00:03

AWS CodeBuild를 이용해서 프로젝트 빌드하기

AWS CodeBuild 란? AWS CodeBuild는 소스 코드를 컴파일하고 테스트를 실행하며 배포 준비가 완료된 소프트웨어 패키지를 생성하는 완전 관리형 지속 통합 서비스입니다. ㅡ 'AWS CodeBuild 웹사이트' 내용 중, 설명에서도 알 수 있듯이 CodeBuild는 CD(Continuous Deployment, 지속적 통합)에 사용되는 서비스입니다. 일반적으로, 빌드를 로컬에서 수행하고 직접 서버에 배포할 수 있습니다. 하지만 이런 시간을 단축하기 위해서 단순히 프로젝트를 git에 push하는 것만으로 자동으로 빌드를 수행하도록 CodeBuild와 같은 Tool을 이용합니다. CodeBuild 요금은 실제로 빌드한 시간 만큼만 지불하면 됩니다. CodeBuild 작동 개요 CodeBuild..

TECH 2020. 4. 16. 23:54

추가 정보

인기글

  1. -
    -
    정규표현식(Regular Expression, regex)

    2021.04.14 20:13

  2. -
    -
    Jira 보드에 Story 이슈 기준으로 스웜레인 만드는 방법

    2021.07.14 21:32

  3. -
    -
    emotion을 이용해서 MUI(Material-UI)의 Tooltip 컴포넌트에 커스텀 스타일 적용하는 방법

    2021.11.10 22:04

  4. -
    -
    AWS S3에 파일을 업로드 하기 위한 Pre-signed URL과 Pre-signed POST

    2021.09.08 21:18

최신글

  1. -
    -
    Amplify Console의 Preview URL을 Custom Domain으로 사용하는 방법

    TECH

  2. -
    -
    Amplify Console에서 환경(브랜치) 제거를 막자

    TECH

  3. -
    -
    MSW를 이용해서 쉽고 깔끔하게 API Mocking 하자

    TECH

  4. -
    -
    MUI의 Datepicker에 사용하는 Input을 커스텀 해보자

    TECH

페이징

이전
1
다음
푸터 로고 © walkinpcm

티스토리툴바