이 글은 docker로 react와 express를 구동하는 것에 대한 글입니다. 참고부탁드립니다!
1. node.js 설치하기
1) 본인 OS 버전 확인하기
cat /etc/*release*
본인의 OS 버전 정보를 확인해준다.
만약 본인의 버전이 나와 같이 amazon linux 2023이라면 이 글을 따라해도 좋다.
2) node.js 설치하기
sudo yum update -y
모든 소프트웨어 패키지가 최신 상태인지 확인하기 위해 패키지를 업데이트 시켜준다.
curl -fsSL <https://rpm.nodesource.com/setup_18.x> | sudo bash -
NodeSource 저장소 설치 스크립트를 설치해준다. 여기서는 node의 버전을 18버전으로 설치한다.
sudo yum install -y nodejs
위와 같은 명령어를 작성해주면, node.js와 npm이 같이 설치된다.
node -v
npm -v
위와 같이 작성했을 때 버전이 제대로 나온다면 설치가 제대로 된 것이다.
2. docker 설치하기
1) docker 설치
sudo dnf install -y docker
Amazon Linux 2023은 dnf패키지 관리자를 사용한다. 그리고 설치한 Docker는 기본 저장소에서 사용할 수 있다.
2) docker service 시작 및 활성화
sudo systemctl start docker
sudo systemctl enable docker
Docker를 설치한 후 Docker 서비스를 시작하고 부팅 시 시작되도록 설정해야 한다. 안 그러면 docker 명령어를 쳤을 때 도커가 없다고 나온다.
3) docker 버전 확인
docker --version
제대로 설치되었음을 확인할 수 있다.
+) 권한 부여
그리고 부가적으로 root계정에서 docker를 실행할 수 있다. 사용자도 docker를 사용할 수 있게끔 docker를 관리할 수 있도록 docker 그룹에 추가해야 한다.
sudo groupadd docker
위의 명령어는 docker그룹이 존재하지 않을 경우 넣어준다.
sudo usermod -aG docker $USER
docker 그룹에 사용자를 추가해준다.
newgrp docker
newgrp명령어를 사용해서 docker를 그룹 변경사항을 적용해준다.
sudo reboot
혹은 reboot하여 변경 사항을 적용해준다.
3. docker build하고 구동시키기
1) react 구동 시키기
1-1) dockerfile 생성하기
우선 dockerfile과 .dockerignore 파일을 만들어준다.
# Use an official Node.js runtime as a parent image
FROM node:18-alpine
# Set the working directory in the container
WORKDIR /app
# Copy the package.json and package-lock.json files
COPY package*.json ./
# Install dependencies
RUN npm install
# Copy the rest of the application code
COPY . .
# Build the Next.js application
RUN npm run build
# Expose the port that Next.js will run on
EXPOSE 3000
# Start the Next.js application
CMD ["npm", "start"]
1-2) .dockerignore 생성하기
node_modules
npm-debug.log
Dockerfile
.dockerignore
.next
.git
Docker 빌드 프로세스를 최적화하고 불필요한 파일을 포함하지 않기 위하여 .dockerignore파일을 만들어 준다.
1-3) docker 이미지 빌드하기
docker build -t my-next-app .
react 파일이 있는 곳에 빌드해준다.
1-4) docker 파일 구동해주기
docker run -d --restart always -p 3000:3000 --name my-next-app my-next-app
2) express 구동시키기
1-1) dockerfile 생성하기
express도 동일하게 dockerfile과 .dockerignore 파일을 만들어준다.
# Use the official Node.js image as a parent image
FROM node:18-alpine
# Set the working directory in the container
WORKDIR /app
# Copy package.json and package-lock.json
COPY package*.json ./
# Install dependencies
RUN npm install
# Copy the rest of the application code
COPY . .
# Expose port 3000 (or whatever port your app uses)
EXPOSE 3000
# Define the command to run the app
CMD ["node", "app.js"]
1-2) .dockerignore 생성하기
node_modules
npm-debug.log
Dockerfile
.dockerignore
Docker 빌드 프로세스를 최적화하고 불필요한 파일을 포함하지 않기 위하여 .dockerignore파일을 만들어 준다.
1-3) docker 이미지 빌드하기
docker build -t my-express-app .
express파일이 있는 곳에 빌드해준다. 또한, ‘my-express-app’의 이름은 본인이 알아서 바꿔주면 된다.
1-4) docker 파일 구동해주기
docker run -d --restart always -p 3001:3001 --name my-express-app my-express-app
4. AWS EC2 보안그룹 편집하기
거의 다 했다! ec2 instance에서 구동해주는 것이므로 react와 express가 instance에서 잘 구동될 수 있도록 port를 보안그룹에 지정해준다.
react와 express가 instance에 가서 구동하는 것이므로 인바운드 규칙에 해당 포트를 지정해준다.
위와 같이 오른쪽 상단에 인바운드 규칙편집을 눌러 아래와 같이 변경해준다.
http와 https환경에서 잘 구동될 수 있도록 지정해주고, 3000포트와 3001포트는 위에서 지정한 포트번호이다. 각자 다른 경우 다른 포트 번호로 지정해줘도 된다.
5. docker에서 잘 구동되는지 확인하기
docker ps
위의 명령어를 쳐서 잘 구동되는지 확인한다.
1) react build 수정하기
docker build --no-cache -t my-next-app .
build에 대한 캐시를 없애고 다시 빌드를 해준다.
docker stop my-next-app
docker rm my-next-app
그리고 돌아가고 있던 docker react를 중지하고 이에 대한 기록을 삭제해준다.
docker run -d --restart always -p 3000:3000 --name my-next-app my-next-app
다시 빌드된 것으로 다시 배포해준다.
2) express build 수정하기
위의 express는 react와 포트와 폴더 경로만 다르고 거의 같으므로 아래와 같이 구동해준다.
docker build --no-cache -t my-express-app .
docker stop my-express-app
docker rm my-express-app
docker run -d --restart always -p 3001:3001 --name my-express-app my-express-app
3) 두 개이상의 도커를 돌릴 경우
위와 같이 각각의 front와 backend를 돌릴 경우에 docker-compose를 쓰는 것을 추천한다. 도커를 한번만 올리면 상관이 없겠지만, 버전을 업데이트하거나 수정할 코드가 있을 경우 여러번 도커를 올리는 일이 발생한다. 그래서 docker-compose를 쓰는 것을 추천한다.
docker-compose 설치
sudo curl -L "<https://github.com/docker/compose/releases/download/$>(curl -s <https://api.github.com/repos/docker/compose/releases/latest> | grep tag_name | cut -d '"' -f 4)/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose
sudo chmod +x /usr/local/bin/docker-compose
위의 명령어를 쳐서 docker-compose를 설치해준다.
그리고 나서
docker-compose --version
위와 같이 제대로 설치되었는지 확인해준다.
docker-compose.yml 생성하기
name: myproject
services:
next-app:
build:
context: ./mqtt_web
dockerfile: Dockerfile
image: my-next-app
container_name: my-next-app
ports:
- "3000:3000"
restart: always
express-app:
build:
context: ./mqtt_back
dockerfile: Dockerfile
image: my-express-app
container_name: my-express-app
ports:
- "3001:3001"
restart: always
각각의 도커파일의 위치를 지정해주고, 이미지의 이름, 도커컨테이너이름을 설정해준다.
docker-compose 돌리기
docker-compose up -d
docker-compose를 백그라운드로 돌릴 때 위와 같이 -d옵션을 추가해준다.
로그보기
docker-compose logs
로그를 볼려면 위와 같이 코드를 작성한다. 그리고 나서 실시간으로 로그를 확인하고자 하면 -f옵션을 추가해준다.
중지 및 제거
docker-compose down
서비스를 중지하고 컨테이너를 제거하고자 한다면 위와 같이 명령어를 친다. 그리고 볼륨과 같이 삭제하려면 -v옵션을 추가할 수 있다.
서비스 구축 또는 재구축
docker-compose build
Dockerfiles 또는 파일을 변경 docker-compose.yml하고 이미지를 다시 빌드하려면 위의 명령어를 따라친다.
용량이 많아서 도커가 안 돌아갈 때
df -h
해당 명령어로 데이터가 꽉 찼다면, 이를 정리해줘야 한다.
docker system prune -a
안 쓰는 데이터를 정리해주는 명령어로 이를 써서 불필요한 데이터를 날려준다.
빌드 파일 cover(덮어쓰기)
docker build -t your-image-name:latest .
새 Docker 이미지를 빌드할 때 이전 빌드에서 생성된 빌드 파일은 명시적으로 삭제하라는 지시가 없는 한 자동으로 삭제되지 않는다. 그러나 이미지를 빌드하고 빌드 프로세스의 출력 파일을 특정 디렉토리에 복사하는 경우 동일한 경로를 사용하면 덮어쓰일 수 있다.
새로운 docker 이미지를 생성할 경우 이전 빌드와의 혼동을 피하기 위하여 새로운 version이나 태그를 사용한다.
docker build -t your-image-name:v1 .
docker build -t your-image-name:v2 .
👇🏻 참고 사이트
https://dev.to/leduc1901/reduce-docker-image-size-for-your-nextjs-app-5911?utm_source=oneoneone
Reduce Docker Image size for your Next.js App
Introduction First thing first, I expect you to know what is Docker, but if you...
dev.to
