와 요즘 일 많나보다
글 자주 쓰는거 보니

오늘의 목표

💬 AWS 에 내 웹 앱 올리기 (백엔드 없음)

---

AWS에 내 웹 앱 올리기 (백엔드 없음)

우선 AWS Console 에 계정을 만들어야 한다.
귀찮으니 가입 과정은 적지 않겠음.
개인 프로젝트 정도는 프리티어(무료 회원)로 충분히 가능하니까 겁먹지 말고 조인.

AWS 콘솔에서 Amplify 를 검색해서 AWS Amplify 서비스로 진입한다.

시작하기를 누르면 자동으로 스크롤이 스르륵 되면서

이런 화면이 나오는데, Amplify Hosting 을 선택한다.

github 으로 하겠슴다. 계속.

이미 git hub 로그인 연동 하신 분은 약간의 딜레이가 있고 다음 페이지로 자동으로 이동되므로 여러번 클릭하지 말기.
(AWS 의 모든 페이지가 이런 식이다... UX 𝙒̲̅𝙝̲̅𝙮̲̅𝙧̲̅𝙖̲̅𝙣̲̅𝙤̲̅ .̲̅.̲̅.̲̅ )

로그인 하고 권한을 나눠 가지면 여기로 온다.
리포지토리 선택 에서 진행할 프로젝트를 선택하자.

🐅 여기서 선택 가능하려면 해당 리포에 <관리자 권한>이 있어야 한다.

권한 변경 후에는 옆에 있는 새로고침 버튼으로 리로드 하면 변경사항이 반영된다.

repo 선택하면 아래에 브랜치 선택 화면이 뜬다.
골라주고 다음.

앱 이름을 써준 다음, 서비스 역할을 생성하라고 나온다.
하단의 새 역할 생성 버튼을 클릭해서 새 창으로 IAM 관리자 화면을 띄운다.

AWS 서비스 -> 사용 사례는 다른 AWS 서비스의 사용 사례 에서 Amplify를 검색해서 선택한다.
그러면 아래에 Amplify - Backend Deployment 라고 뜨는데 이걸 선택해서 다음 버튼을 눌러 진행한다.

자동으로 Amplify 권한이 선택되어 있을것이다.
다른 권한은 필요 없으므로 다음.

역할의 이름을 알맞게 지어주고 생성을 완료하자.
기존의 Amplify 탭으로 돌아와서 새로고침 버튼을 누르면

방금 만든 역할이 보인다.
선택하고 아래로 내려 (혹은 다음으로 진행) 빌드 설정을 하자.

이 화면에서 빌드 스크립트가 자동으로 채워지는 프로젝트도 있고, 비어있는 것들도 있다. 위 캡쳐 화면은 비어있을 때 경고가 뜬 모습이다.

만약 본인 프로젝트의 ampllify.yml 파일이 이상하다면 아래 내용을 복사해서 적용하면 된다. (npm 기준)

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm install
    build:
      commands: 
        - npm run build
  artifacts:
    baseDirectory: .
    files:
      - '**/*'
  cache:
    paths: 
      - node_modules/**/*

완료하고 다음 단계로 넘어가자.

지금까지의 설정을 확인하고 배포를 시작하는 페이지이다.
하단의 저장 및 배포 버튼을 누르면 바로 최초 배포가 시작된다.

이런 화면에서 프로비저닝(배포 준비), 빌드(npm run build), 배포(deploy) 를 포함해서 총 4단계가 진행된다.

에러 확인 방법

보통 빌드 단계에서 에러가 발생한다.
로그만 잘 봐도 뭐가 문제인지 알 수 있다.

빌드 에러난 페이지에서

빌드 탭을 눌러 해당하는 모듈의 로그를 확인할 수 있다.

(여기요🖐) 여러가지 빌드 에러 해결 FAQ

내가 앱을 배포하면서 겪은 몇가지 빌드 에러와 해결법을 정리한다.

1. (Next.js) SSR Lambda error

2022-02-23T06:43:32.602Z [ERROR]: Error encountered importing modules into your SSR Lambda functions. Check out our FAQ for suggestions on how to resolve the issue: https://github.com/aws-amplify/amplify-console/blob/main/FAQ.md#webpack-modulenotfound-errors
Terminating logging...

Next.js 로 만든 프로젝트를 올렸는데
SSR Lambda 어쩌구 에러가 나는 경우엔 환경 변수를 추가하면 해결할 수 있다.

현재 앱의 환경 변수 메뉴로 진입한다.

변수 관리 메뉴 클릭

하단의 변수 추가 버튼을 클릭한 다음
변수는 AMPLIFY_NEXTJS_EXPERIMENTAL_TRACE, 값은 true 를 입력한다.

이렇게영.
그 다음 다시 배포하면 해결된다.

2. npm ERR! spawn ENOENT

                                 # Starting phase: build
                                 # Executing command: npm run build
                            npm ERR! spawn ENOENT
                                    npm ERR!
                                    npm ERR! Failed at the keycloakify-sample@0.1.0 build script.
                                    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2022-02-26T09:03:19.083Z [WARNING]: npm
2022-02-26T09:03:19.083Z [WARNING]: WARN Local package.json exists, but node_modules missing, did you mean to install?
2022-02-26T09:03:19.083Z [WARNING]: npm ERR! A complete log of this run can be found in:
                                    npm ERR!
2022-02-26T09:03:19.083Z [WARNING]: /root/.npm/_logs/2022-02-26T09_03_19_078Z-debug.log
2022-02-26T09:03:19.086Z [ERROR]: !!! Build failed
2022-02-26T09:03:19.088Z [ERROR]: !!! Non-Zero Exit Code detected
2022-02-26T09:03:19.088Z [INFO]: # Starting environment caching...
2022-02-26T09:03:19.088Z [INFO]: # Environment caching completed
Terminating logging...

중간에 WARN 로그를 보면 Local package.json exists, but node_modules missing, did you mean to install? 라고 묻는다.

이건 amplyfi.yml 에서 당신이 작성한 빌드 명령어가 뭔가 이상하다는 뜻이다.
이럴 때에는 빌드 명령어를 다시 확인하자.

내 경우는 비슷한 에러를 총 3번 만났다.

1) preBuild 가 prebuild 로 CamelCase 가 잘못 적혀 있었음
2) 남의 거 복사 하다가 npm 대신 yarn을 썼음 🤗
3) buildDirectory 에 애매하게 build 이런거 썼음. (. 이면 된다.)

---

끝

이렇게 갖가지 빌드로 고생을 하다가 전부 성공하고 나면
도메인에 보이는 링크로 내 웹 앱에 접근할 수 있다.

PR 미리보기도 쓰고 싶었는데 조금 지쳤다.
내일 써야지

끝