inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

비전공자도 이해할 수 있는 Docker 입문/실전

[실습] 웹 프론트엔드 프로젝트(Next.js)를 Docker로 배포하기

45번강의와 46번 강의가 헷갈립니다.

73

CodeKimbap

작성한 질문수 22

0

45강의와 46강의 둘다 Next 프로젝트를 만드는데

이전에는

$ nest new my-server를 이용해 프로젝트를 생성했고

 

46강의에서는
$ npx create-next-app@latest
만드는 방식이 다른데 어떤 차이인지 궁금합니다.

docker docker-compose docker-volume docker-image container ecr

답변 2

1

JSCODE 박재성

안녕하세요! 강의 잘 들어주셔서 감사합니다 ~

질문해주신 내용에 답변 드려볼게요 !!

두 강의에서 사용하는 프로젝트가 다른 프레임워크이기 때문에 프로젝트 생성 방식이 다른거에요 !

 

45강 - 백엔드 프로젝트(Nest.js)를 Docker로 실행 시키기에서는

$ nest new my-server 명령어 사용을 통해

Nest.js 프레임워크로 백엔드 API 서버를 실행 시켰어요 ~

 

46강 - 웹 프론트엔드 프로젝트(Next.js)를 Docker로 배포하기에서는

$ npx create-next-app@latest 명령어 사용을 사용해서

Next.js 프레임워크로 프론트엔드 웹 애플리케이션 배포했었어요 ~

즉, 같은 Node.js 생태계이지만 용도가

완전히 다른 프레임워크라서 프로젝트 생성 명령어도 다른 거예요!

 

간단히 핵심만 정리하자면 아래와 같아요 :)

Nest.js: 백엔드 API 서버 개발용 (Spring Boot와 비슷한 역할)

Next.js: 프론트엔드 웹 애플리케이션 개발용 (React 기반)

 

추가로 궁금하신 점 있으시면 또 질문 남겨주세요~~

0

CodeKimbap

아~ 다른 프레임워크였네요. 감사합니다.
하나 질문이 있는데요.
웹서비스를 하기 위해서는

웹페이지 서버, 백엔드서버, 디비서버

이렇게 구성하는건가요?

이쪽 지식이 없어.. 간단히 그냥 서버가 하나만 있다고 생각했어가지고요..

 

그리고 한 프레임워크에서 백엔드와 프론트 엔드를 다 해주는 프레임워크도 있나요?

1

JSCODE 박재성

웹서비스 구성에 대해 답변 드려볼게요!!

 

"웹서비스를 하기 위해서는 웹페이지 서버, 백엔드서버, 디비서버 이렇게 구성하는건가요?"

-> 네 맞습니다! 일반적인 웹서비스는 아래와 같이 구성되요 ~

 

프론트엔드 서버 (웹페이지 서버)

- 사용자가 보는 화면(UI)을 담당

- HTML, CSS, JavaScript 등의 파일을 제공

- Next.js, React, Vue.js 등으로 개발

 

백엔드 서버 (API 서버)

- 비즈니스 로직 처리 및 데이터 처리를 담당

- 프론트엔드와 데이터베이스 사이의 중간 역할

- Spring Boot, Nest.js, Express.js 등으로 개발

 

데이터베이스 서버

- 데이터를 저장하고 관리

- MySQL, PostgreSQL, MongoDB 등

 

처음에는 서버가 하나만 있다고 생각하기 쉬운데,

역할을 분리해서 각각 다른 서버에서 처리하는 게 일반적이에요!

 

"한 프레임워크에서 백엔드와 프론트 엔드를 다 해주는 프레임워크도 있나요?"

-> 네 ! 대표적으로 아래와 같은 프레임워크들이 있어요 ~

- Next.js: 프론트엔드 + 백엔드 API 모두 개발 가능

- Nuxt.js: Vue.js 기반 풀스택 프레임워크

- SvelteKit: Svelte 기반 풀스택 프레임워크

- Django: Python 기반으로 풀스택 개발 가능

다만 실무에서는 역할 분리, 확장성, 유지보수 등의 이유로

프론트엔드와 백엔드를 분리해서 개발하는 경우가 많아요~!

 

추가로 궁금하신 점 있으시면 언제든 질문 남겨주세요~~

0

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. hantrust87님.

질문해주신 내용은 두 가지 다른 프레임워크와 명령어에 관련된 부분입니다. 다음과 같이 차이점을 설명드리겠습니다.

NestJS와 Next.js의 차이점

  1. NestJS:

    • nest new my-server는 NestJS 프로젝트를 생성할 때 사용하는 명령어입니다.
    • NestJS는 Node.js 환경 위에서 작동하며, 서버 사이드 앱 개발을 위한 프레임워크입니다. 모듈화된 구조와 강력한 타입스크립트 지원을 통해 생산적인 서버 사이드 애플리케이션 개발을 돕습니다.
  2. Next.js:

    • npx create-next-app@latest는 Next.js 프로젝트를 생성하는 명령어입니다.
    • Next.js는 React 기반의 프레임워크로, 서버 사이드 렌더링(SSR) 및 정적 사이트 생성(SSG)을 지원하여 성능 최적화 및 SEO 향상을 가능하게 합니다. 프론트엔드 개발에 포커스가 맞춰져 있습니다.

결론

  • 이 두 프레임워크는 각각의 용도와 강점이 다르며, 사용하는 목적에 맞게 선택하여 사용하시면 됩니다. NestJS는 주로 백엔드 개발 용도에, Next.js는 프론트엔드 개발에 적합합니다.
  • 같은 ‘명령어로 프로젝트를 만드는 과정’을 나타내지만, 생성되는 프로젝트의 목적과 구조가 크게 다르다는 점을 이해하시면 혼동을 줄일 수 있을 것입니다.

질문에 대한 답변으로 더 많은 정보가 필요하시다면 아래 유사한 질문의 답변을 참고해보세요:

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

EC2 터미널에서 docker pull

0

66

2

AWS ECR

0

61

2

FROM openjdk:17-jdk 현재 기준 dockerhub에 없습니다

1

112

2

Redis 볼륨 설정?

0

124

2

컨테이너의 IP

0

88

2

도커 이미지를 만들 때 application.yml

0

110

2

compose.yml 관리

0

97

2

ECR 리포지토리에 이미지가 3개가 보입니다.

0

83

2

액세스 키 등록하는 시점 관련 질문이 있습니다.

0

89

1

depends_on에 따른 컨테이너 실행 순서

0

81

2

실제 웹 서비스 배포 시 질문

0

86

2

도커 volume 질문

0

69

3

HTTPS로도 받고 싶으면 docker compose에 443도 쓰면 될까요?

0

79

2

sql 볼륨 폴더 지우면 데이터베이스 데이터 날라가는거 아닌가요?

0

78

2

39강 도커파일 빌드 경로 질문이 있습니다.

0

76

2

도커파일 copy

0

77

2

실무에서 docker compose up --build를 할 때

0

227

2

mysql_data 폴더 내부에 다른 파일이 있는데도 잘 되는 경우

0

93

2

도커 허브에서 postgres 버전 확인하는 법

0

143

2

보충 자료와도 관련된 추가 내용

1

85

1

현업에서 MySQL은 RDS와 도커 볼륨 중 어떤 걸 사용하나요?

0

117

2

노션 자료에 안 보이는 이미지가 있습니다

0

107

1

도커 허브에서의 latest가 가장 최신인 게 맞나요?

0

129

2

docker image ls 실행 시 나오는 내용이 다릅니다

0

92

2