AWS CodeCommit/Amplify를 통한 NextJS 배포

안녕하세요 여러분 👋, AWS CodeCommit 리포지토리에 NextJS 시작 코드를 추가하고 AWS Amplify로 배포하는 방법을 살펴보겠습니다. 저는 이 연습을 위해 IDE ☁️를 사용하고 있습니다. 그러나 모든 Linux/Unix 기반 시스템에서 다음 단계를 따를 수 있습니다.

aws cli v2을 사용하고 있습니다. 필요한 경우 버전을 업그레이드할 수 있습니다. 또한 필수 인증 구성으로 CLI를 설정했는지 확인하십시오.

$ aws --version
aws-cli/2.4.27 Python/3.8.8 Linux/4.14.262-200.489.amzn2.x86_64 exe/x86_64.amzn.2 prompt/off

내가 사용하고 있는 사용자 ID에는 관리자 권한 🔥이 있으므로 저장소를 만드는 동안 문제가 없어야 합니다. 관리자가 아닌 경우 IAM 사용자는 CodeCommit policies으로 설정되어야 합니다.

계속해서 저장소를 만들어 보겠습니다.

$ aws codecommit create-repository --repository-name next-js-boilerplate --repository-description "Boilerplate code for NextJS" --tag "code=JavaScript,framework=NextJS"
{
    "repositoryMetadata": {
        "accountId": "<account-id>",
        "repositoryId": "<repository-id>",
        "repositoryName": "next-js-boilerplate",
        "repositoryDescription": "Boilerplate code for NextJS",
        "lastModifiedDate": "2022-03-19T08:17:28.327000+00:00",
        "creationDate": "2022-03-19T08:17:28.327000+00:00",
        "cloneUrlHttp": "https://git-codecommit.us-east-2.amazonaws.com/v1/repos/next-js-boilerplate",
        "cloneUrlSsh": "ssh://git-codecommit.us-east-2.amazonaws.com/v1/repos/next-js-boilerplate",
        "Arn": "arn:aws:codecommit:us-east-2:<account-id>:next-js-boilerplate"
    }
}

저장소 📁이 생성되고 저장소 목록에 나타나야 합니다.

$ aws codecommit list-repositories --output text
REPOSITORIES    <repository-id>    next-js-boilerplate

브라우저의 AWS 콘솔에서도 확인할 수 있습니다.


SSH 공개 키를 AWS 사용자 계정에 업로드해야 하는 SSH를 통해 리포지토리에 연결할 것입니다. 그러나 그 전에 SSH 키가 이미 생성되었는지 확인해야 합니다. SSH 키 쌍을 생성하는 방법을 알고 싶다면 이 문서link를 참조하십시오. 내 시스템의 공개 키는 ~/.ssh/id_rsa.pub와 같은 표준 위치에 있습니다.

이 키 🔑를 업로드하고 공개 키 ID를 검색해 봅시다.

$ SSHPublicKeyId=$(aws iam upload-ssh-public-key --user-name nc --ssh-public-key-body file://~/.ssh/id_rsa.pub --output text --query SSHPublicKey.SSHPublicKeyId)

SSH config를 설정하고 파일의 소유자(현재 사용자)만 접근(읽기 + 쓰기)할 수 있도록 권한을 수정합니다.

$ cat > ~/.ssh/config <<EOF
Host git-codecommit.*.amazonaws.com
 User $SSHPublicKeyId
 EOF

$ chmod 600 ~/.ssh/config

GIT SSH URL을 가져온 다음 복제해 보겠습니다.

$  gitUrl=$(aws codecommit get-repository --repository-name next-js-boilerplate --query repositoryMetadata.cloneUrlSsh --output text)                                            

$ git clone $gitUrl
Cloning into 'next-js-boilerplate'...
warning: You appear to have cloned an empty repository.

리포지토리를 성공적으로 복제했습니다. 여기에 코드를 추가해 보겠습니다. NextJS 프로젝트를 부트스트랩하기 위해 npx를 사용할 수 있습니다. install nodejs/npm ) 시스템에 아직 존재하지 않는 경우

$ cd next-js-boilerplate/

$ npx create-next-app@latest
✔ What is your project named? … next-js-boilerpate

이렇게 하면 NextJS 프로젝트가 설치되고, 같은 이름의 하위 디렉터리도 생성되므로 하위 디렉터리의 콘텐츠를 기본 디렉터리로 이동해 보겠습니다.

$ mv next-js-boilerplate/.* .
$ mv next-js-boilerplate/* .

$ rmdir next-js-boilerplate/

$ ls -a
.   .eslintrc.json  .gitignore      node_modules  package-lock.json  public     styles
..  .git            next.config.js  package.json  pages              README.md

이제 코드를 저장소로 푸시할 수 있습니다.

$ git status
On branch master

No commits yet

Untracked files:
  (use "git add <file>..." to include in what will be committed)
        .eslintrc.json
        .gitignore
        README.md
        next.config.js
        package-lock.json
        package.json
        pages/
        public/
        styles/

$ git add .
$ git commit -m 'adding nextjs boiler plate code'

$ git push

AWS 콘솔에서 이를 확인할 수 있습니다.


🆒 이제 AWS Amplify를 통해 이 코드를 배포할 수 있습니다. 이를 위해 GUI를 사용하겠습니다.

Amplify를 검색하고 새 앱을 생성한 다음 CodeCommit을 선택합니다.


다음 단계는 올바른 저장소와 분기를 선택하는 것입니다.


Jus는 변경 사항 없이 마지막 단계를 계속 진행하고 배포합니다.


몇 분 ⏱️ 안에 앱이 배포됩니다. 4단계(프로비저닝, 빌드, 배포 및 검증)가 성공해야 합니다. 테스트가 작성되지 않았기 때문에 여기에서 사용하지 않은 테스트 단계도 있어야 합니다.


이제 위에 제공된 https 링크를 클릭하여 ▶️ 지원서를 볼 수 있습니다.


따라서 CodeCommit 및 Amplify의 일부를 살펴보았습니다. CLI는 AWS CLI의 성능을 확인하기 위해 CodeCommit과 함께 사용했으며 이를 통해 많은 클라우드 작업이 가능하다고 생각합니다. 환경 변수, 빌드 명령 수정 등을 사용하여 Amplify 배포를 사용자 지정할 수 있습니다.

그게 다야, 🙂 읽어줘서 고마워...