# [Docker] Nest.js(백엔드), Next.js(프론트) 컨테이너 올리기
2024. 12. 13. 10:06ㆍ개발/Docker
[Docker] Nest.js(백엔드), Next.js(프론트) 컨테이너 올리기
작성일 : 2024.12.11 Wed
📌 BACKEND DEPLOY
1. Nest CLI 설치
$ npm i -g @nestjs/cli
$ nest new my-server ## project name : my-server
cd my-server ## 2. Dockerfile 생성 (on my-server proj)
FROM node:
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build
EXPOSE 3000
ENTRYPOINT ["node", "dist/maiin.js"]- docker 이미지 생성시 캐시를 활용해 최적화 가능. (https://medium.com/@hee98.09.14/docker-layer%EC%99%80-cache-574c12a1e9f7)
3. .dockerignore 생성
node_modules 4. Dockerfile 바탕 이미지 빌드 및 배포
$ docker build -t my-server
$ npx create-next-app@latest
$ npm run dev
📌 FRONTEND DEPLOY
1. Next CLI 설치
$ npx create-next-app@latest
$ npm run dev2. Dockerfile 생성 (on my-web-server proj)
FROM node:20-alpine
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build
EXPOSE 3000
ENTRYPOINT ["npm","run","start"]- alpine 은 경량화 한 node 버전.
3. .dockerignore 생성
node_modules 4. Dockerfile 바탕 이미지 빌드 및 배포
$ docker build -t my-web-server .
$ docker image ls
$ docker run -d -p 80:3000 my-web-server📌 웹 프론트 엔드 프로젝트(html, css, nginx) 를 도커로 배포
1. <html,css 생성>
- index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>My Web Page</h1>
</body>
</html> - style.css
* {
color: blue;
}2. Dockerfile
FROM nginx
COPY ./ /user/share/nginx/html3. Docker file 이미지 빌드
$ docker build -t my-web-server .
$ docker image ls
$ docker run -d -p 80:80 my-web-server
$ docker ps4. localhost:80 확인
5. folder check
$ docker exec -it [container id] bash
#/ cd /user/share/nginx/html'개발 > Docker' 카테고리의 다른 글
| # [Docker] Docker compose 로 컨테이너 관리 (0) | 2024.12.13 |
|---|---|
| # [Docker] 도커 파일로 Ubuntu 생성하고 디렉토리 파일 복사 (1) | 2024.12.13 |
| [Ubunt][Docker compose]ln: failed to create symbolic link '/usr/bin/docker-compose': File exists (1) | 2024.12.12 |
| [미해결][Ubuntu Spring]Web server failed to start. Port 80 was already in use. (0) | 2024.12.12 |
| mysql-data 폴더에 파일들이 안생기는 에러. (0) | 2024.12.10 |