설렌당☺️nextjs+ts! ToDo

공부할때는 ToDo지!

작년 이맘때쯤 리액트를 공부하면서 ToDoList를 만들었던 기억이 있다!
내 성격상 무엇이든 배울때는 직접 해보는 것을 좋아하는 편이라 이것저것 만드는데, ToDo리스트는 항상 만들었었다.

이번에 스터디를 하면서 next.js와 typeScript를 사용하게 되었는데 원리를 알면서 구현을 하려고 하니 진짜 재밌었다.
그동안 배웠던 지식을 정리하지 않았고 왜? 라는 의문점을 가지지 않았던 지난 날들이 후회가 되었다.
어쨌든! 늦었다고 생각할때가 제일 빠를때이니 지금부터 열심히 하면 괜찮을거다!

오늘 하려고 하는 것은 일단 next.js+ts를 기반으로 프로젝트를 만들고
AWS를 이용하여 내 프로젝트에 도메인을 연결해 올리는 것이다.

✒️프로젝트 생성하기

npm create next-app --typescript

프로젝트를 생성한 뒤 npm run dev 를 해보면 정상적으로 프로젝트가 생성된것을 확인할 수 있다.

✒️serverless

npm install serverless

package.json > script에 serverless 추가

root > serverless.yml 추가

# serverless.yml
myNextApplication:
  component: "@sls-next/serverless-component@latest"
  inputs:
    name:
      defaultLambda: DefaultLambda #Default Lambda의 이름 설정
      imageLambda: ImageLambda # Image Lambda의 이름 설정
    bucketRegion: "ap-northeast-2" # S3 Bucket 지역 설정
    cloudfront:
      comment: "todo deploy" # CloudFront 설명 설정

✒️git에 repository 만들기 & 프로젝트 올리기

git init

git add .

git commit -m "commit msg"

git remote add origin '생성한 git 주소'

git push -u origin main

repository를 만들고 만든 프로젝트를 git에 올린다.

✒️ci/cd 자동화 하기

.github 폴더에 workflows 폴더를 만든다
그리고 그 폴더 안에 yml 파일을 만들어 준다.

name: TODO MAIN BUILD
on:
  push:
    branches: main
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout source code.
        uses: actions/checkout@master
        with:
          ref: main

      - name: Install Dependencies
        run: |
          npm install

      - name: Configure AWS Credentials
        uses: aws-actions/configure-aws-credentials@v1
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ap-northeast-2

      - name: Deploy Next.js app
        run: |
          npm run deploy

AWS에 가서 IAM에 접속해서 user을 생성해 준다.