'적자'생존 - Record it to survive

많은 서비스를 제공하는 AWS라 탈퇴버튼을 찾는게 쉬운일이 아니다.

1. 홈페이지 우측상단의 본인의 계정 아이디를 클릭해서 '계정' 클릭!

2. 바로 보이는 계정정보에서 스크롤로 쭈~욱 내리면 계정해지에 대한 동의 약관과 탈퇴가 있다.

AWS 클라우드 서비스를 통한 최종 배포이후 사용자 정보 탈취문제나 보안을 위해 nginx로 https 를 적용이후에 문제가 발생했다.

https로 적용하려고 했던 또다른 이유는 사용자가 직접 주소를 입력하면 접속이 안되는데 브라우저 기본 프로토콜이 https로 되어있기때문에 '페이지를 찾을 수 없다'는 메시지를 보고 당황할 수 있다. 발생 시점은 https 적용 후 클라우드 터미널에서 원격으로 깃허브에 저장이후였다.

비정상적인 접근 시도 징후

친절하게도 메일에서는 서비스하는 지역(서울) 외에 region을 허용하는 경우 메일을 보내준다. 당시 AWS 서비스에 대해 무지한 상태여서 자동으로 설정되는 것인 줄 알았다. 그리고 비밀번호 바꾸라는 메일이 추가로 오며 비밀번호를 바꾸고 틀린 그림찾기마냥 대시보드에 트래픽이나 실시간 청구금액 확인 시 이상이 없어보여 주말에 갈 여행을 준비하고 있었다.

부주의에 의한 폭탄 요금 청구

비밀번호 변경한지 일주일도 안지났는데 일요일 오후에 해외에서 연락이 왔으며, 보이스 피싱인줄 알고 무시했었다. AWS팀에서 비정상적인 접근 시도와 사용이 있으면 사용자에게 연락을 주기도 한다고 한다. 중국번호처럼 생겨서 대부분 사람들이 오해한다고 한다. 그리고 비밀번호 변경 바로 다음주에 프리티어 사용량을 초과했다는 메일과 함께 엄청난(?) 요금이 청구되었다.

아시아 일본 뿐만아니라 강 건너 캐나다 유럽 미국까지 내 계정이 오픈되어 한번에 프리티어 용량을 소진해버렸다. 다행이도 AWS에서 비정상적인 사용량으로 정지시키고 대신 대시보드나 로그를 보고 싶다면 청구된 금액부터 결제를 진행해야 볼 수 있다고 안내하고 있어 AWS Support 팀으로 문의 메일을 넣었다. 이때부터 조정 요청을 위한 AWS와 기나긴 여정이 시작됐다.

일반적으로 프리티어가 사용기간이 종료되고 EC2만 삭제하고 할당한 탄력 IP를 삭제하지 않은채 계정을 방치해두어서 실제 서비스하지 않았음에도 불구하고 요금이 청구된 사례들이 대부분일 것이다. 하지만 필자의 경우에는 비정상적인 접근시도이고 보안에 대해 여러가지 방법이 있는데 사전에 조치하거나 모니터링하지 않아서 발생한 이슈로 부주의 책임으로 돌릴 것 같았지만 그래도 최대한 정중하게 영문으로 호소(?)를 시작했다.

첫 문의글은 위와 같으며 교육용으로 사용하기 위해 AWS 서비스를 이용했는데 비정상적인 접근으로 프리티어 외에 나온 금액은 충격(?)받았고 지금 청구하기에는 나에게 너무 버거우니 조정해달라는 요청이였다. 비슷한 답변가 지연되는 처리로 1월달 되서는 계속적으로 독촉메일이 오니 불안해서 급한마음에 한글로 다시 보내기도 했다.

1월달 되기전에 등록했던 카드정보로 자동결제 되지 않도록 분실정지 처리했다.

결과적으로 배포했던 사이트는 정지하게 되고 거의 1달 반동안의 AWS Support 팀과 조치에대한 수차례 이메일을 통해 오늘 과금 청구에 대해 보류하겠다는 메일을 받게 되었다.

이번 AWS 이용하면서 큰 교훈을 얻기도 했지만 사용하는데 무서움도 커졌다. 그래서 당분간 배포할 일이 없을 것 같아서 AWS 계정을 탈퇴하기 전에 이력을 남겨 같은 사례가 발생할 때 도움이 되고자 한다.

1. 포트폴리오를 위해서라도 AWS 배포 목적이라면 Github 는 private로 생성하자.

2. 프로젝트 내에 key 를 저장하지 말자.
변수로 친환하는 .env를 사용하더라도 따로 관리하기 귀찮아서 프로제트 내에 넣어 둔 것이 원인일 수도 있다.

3. 프리티어 사용량 알림이나 MFA 등을 설정하자.

https://doing7.tistory.com/29

MFA를 설정하면 아이디 비밀번호 로그인 외 MFA를 설정한 디바이스의 OTP번호까지 인증이되야 로그인이 가능하다.

과금 청구건으로 문의 요청해야한다면 빠른 처리를위해 맨위에 캡처 이미지처럼 여러개 CASE를 생성하지 말자. 동일주제에 답변받을 때마다 새로운 문의 CASE를 열어서 작성하는 경우 다른 담당자가 이전 이력도 확인이 안되서 Support team으로부터 답변이나 대응에 지연될 수있다고 피드백을 받았다. 아래 사진처럼 상세 내역에 응답(Correspondence) 오른쪽 영을 보면 Reply로 요청 사항에 대한 답변이나 추가문의를 진행했다면 1달도 안걸렸을 것이라고 생각한다.

AWS 이용하는 개발자들이 이 글을 보지 않았으면 하지만 과금문제가 발생하면 원만하게 잘 해결하는데 도움이 되었으면 합니다.

ESLint
코드 스타일 통일성

$ eslint --init

Prettier
ESLint와 함께 자주 사용되며 작성된 코드를 들여쓰기나 이쁘게 정렬해주는 포맷터

마켓플레이스나 npm 또는 yarn으로 설치가능

https://www.npmjs.com/package/prettier

둘이 동시에 쓰는 경우 충돌이 날 경우
$ npm i --save-dev eslint-config-prettier eslint-plugin-prettier

자주 사용하는 룰(귝칙)과 설명

.eslintrc.js 파일 내 rules 객체 내 필요한 규칙을 정의

  rules: {
    quotes: ['error', 'single'], // 싱글 쿼터 사용
    '@typescript-eslint/quotes': ['error', 'single'], // 더블 쿼터 사용
    'no-unused-vars': 'off', // 사용안한 변수 경고 중복
    'spaced-comment': 'off', // 주석을 뒤에 쓰지 말라는 경고
    '@typescript-eslint/no-unused-vars': 'warn', // 사용안한 변수는 경고
    'jsx-a11y/control-has-associated-label': 'off', // 상호작용하는 엘리먼트에 label을 넣는다
    'react/no-array-index-key': 'off', // key값으로 index를 사용할수 있다.
    'comma-dangle': 'off', // 마지막에 , 을 넣어주지 않는다.
    'arrow-body-style': 'off', // 화살표 함수 안에 return을 사용 할 수 있다.
    'react/no-unescaped-entities': 'off', // 문자열 내에서 " ' > } 허용
    'react/prop-types': 'off', // proptypes를 사용하지 않는다.
    'object-curly-newline': 'off', // { 다음 줄 바꿈을 강제로 사용하지 않는다.
    'react/jsx-one-expression-per-line': 'off', // 한라인에 여러개의 JSX를 사용 할 수 있다.
    'implicit-arrow-linebreak': 'off', // 화살표 함수 다음에 줄 바꿈을 사용할 수 있다.
    'no-shadow': 'off', // 파일 내에서 중복 이름을 사용 할 수 있다.
    'operator-linebreak': 'off', // 연산자 다음 줄 바꿈을 사용 할 수 있다.
    'react/react-in-jsx-scope': 'off', // jsx를 사용하여도 React를 꼭 import 하지 않아도 된다.
    'react/jsx-props-no-spreading': 'off', // props를 스프래드 할 수 있다.
    'jsx-a11y/anchor-is-valid': 'off', // next js에서는 a에 href없이 사용
    'global-require': 'off', // 함수 내에서 require 사용가능
    'no-use-before-define': 'off', // 선언전에 사용하지 말라,
    'import/prefer-default-export': 'off', // export default 권장
    'no-param-reassign': 'off', // param assign 하지 않기
    'jsx-a11y/label-has-associated-control': 'off',
    'no-invalid-css': 'off',
    'no-confusing-arrow': 'off',
    'react/jsx-curly-newline': 'off',
    indent: 'off',
    'react/jsx-filename-extension': [
      1,
      { extensions: ['.js', '.jsx', '.tsx'] }, // jsx사용가능한 확장자 설정
    ],
    'import/extensions': [
      'error',
      'ignorePackages',
      {
        js: 'never',
        jsx: 'never',
        ts: 'never',
        tsx: 'never',
      }, // import 시 확장자명은 사용하지 않는다.
    ],
  },

그 밖에 룰 또는 규칙은 공식 문서 참조

https://eslint.org/docs/rules/