이 글은 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
