세계최강용사의 개발일기

환경

Node : 16.20.0

TypeScript : 5.1.6

Next : 8.19.4

Next 프로젝트 생성

Git 레파지토리생성을 했다고 생각하고 Next 프로젝트 부터 생성하도록 하겠습니다.

1. Node 설치

Node 설치는 구글에 검색해보면 쉽게 찾을 수 있습니다. 구글 검색하여 노드설치 해주기 !

2. create-next-app 설치

> npm install create-next-app

3. Next.js 프로젝트 생성

//노드를 설치했다면, 프로젝트 경로에서 아래 명령어를 입력하여 next.js 프로젝트를 생성한다
> npm create-next-app my-app

프로젝트 실행

프로젝트 생성을 완료하였다면, 이제 프로젝트를 실행하여 정상적으로 화면이 나오는지 확인합니다.

//프로젝트 경로에서 npm run dev 입력
> npm run dev

프로젝트가 정상적으로 실행된 것을 확인할 수 있습니다.

.github > workflows 작성

//프로젝트 root 경로에서 아래 폴더와 파일을 생성해준다.

1. .github
2. .gibhub/workflows
3. .gibhub/workflows/workflow.yml

workflow.yml

workflow.yml에 아래 내용 입력

name: Staging # 워크플로 Action의 이름
on:
  push:
    branches: [main] #github main 브런치에 푸시 발생 시 실행 ( main 외 다른브런치 이용시 이름변경)
jobs:
  staging: #staging이라는 작업
    name: demo # 작업의 이름
    runs-on: ubuntu-latest # 실행될 작업환경을 말함.
    steps:
      - name: Checkout
        uses: actions/checkout@v3 #체크아웃 받기
      - name: HelloWorld
        uses: actions/hello-world-javascript-action@v1 # 헬로월드 찍어보기

이제 Git 커밋&푸시를 하게되면 Github Action이 발생한다. 오류가 나지않고 정상적으로 진행되는지 확인하기 !

작업이 성공적으로 끝났습니다 !

자 이제 Github Workflow를 통해 Action을 사용하도록 설정이 완료되었습니다 

다음 스텝에서는 실질적으로 AWS와 연동해보도록 하겠습니다.

감사합니다.

Next.js 배포 후 운영서버에서 확인해보면 이미지를 정상적으로 다운받지 못하는 이슈가 발생한다.

이때 basePath를 설정해주어야한다.

next.config.js에서 basePath를 설정해준다.

이후 이미지 등 정적파일의 경로에 basePath를 추가한다.

ex) 
/images/logo.png 였다면, /app/images/logo.png 로 수정해준다.

* basePath 설정 시 배포 후 URL 도메인 뒤에 basePath가 붙는다 주의하자

FROM node:14.21 AS build
#/usr/src로 이동
WORKDIR /app
# package 복사
COPY package*.json yarn.lock ./
RUN yarn install
#파일전체복사
COPY . .
RUN yarn build

FROM node:14.21  AS runner
WORKDIR /app
ENV NODE_ENV production


COPY .env ./
COPY next-env.d.ts ./
COPY next.config.js ./

COPY --from=build /app/package*.json ./
COPY --from=build /app/yarn.lock ./
COPY --from=build /app/public ./public
COPY --from=build  /app/.next/standalone ./
COPY --from=build  /app/.next/static ./.next/static
RUN yarn install --production
EXPOSE 30000
CMD ["yarn", "start"]

추가로 내가 작업한 dockerfile도 기록용으로 업로드 :)