Docker에서 웹 애플리케이션 서비스 실행 후, 접속하는 방법(Docker, React, Container, Image, DockerFile Script, Node.js) for window

Docker에서 웹 애플리케이션 실행하고 접속하는 방법 (Docker, React, Container, Image, DockerFile Script, Node.js) for window

Docker

 

Docker를 이용하여 해당 프로젝트를 이미지(image) 빌드하고, 컨테이너(container)를 생성한 후, 해당 컨테이너에 서비스를 올려보는 방법을 포스팅 하겠습니다.

 

Project(프로젝트)

먼저 웹 애플리케이션 프로젝트를 준비합니다. 필자의 경우 React 프로젝트를 준비하였습니다. local PC의 경로는 다음과 같습니다. 

local PC path

local PC의 C 드라이브에 /DockerTest/MyProject/ 폴더안에 위 사진과 같은 파일 두개가 위치 해 있습니다. DockerFile script는 다음과 같습니다.

 

DockerFile

FROM node:18-alpine

WORKDIR /dalbi_front

COPY dalbi_front/package.json .

RUN npm install 

CMD [ "npm", "start" ]

COPY dalbi_front/ .

FROM node:18-alpine : node.js의 버전을 뜻 합니다.

WORKDIR /dalbi_front : 컨테이너 드라이브에 dalbi_front라는 폴더를 생성합니다.

COPY [text]: 로컬 파일을 컨테이너 이미지로 복사합니다.

CMD ["npm", "start"] : docker가 이미지로부터 컨테이너가 실행될 때 명령어를 지정합니다.

 

 

Command

해당 프로젝트의 경로로 접근하여 이미지 빌드 명령어를 입력 해 줍니다.

docker image build -t dalbi_front .

 

만약 빌드가 정상적으로 처리되지 않는다면, 에러 log를 확인하여 DockerFile 스크립트를 해당 프로젝트 설정에 맞게 수정 해 줍니다. 그리고 DockerFile 스크립트를 수정 했는데 적용이 되지 않는다면, 캐시를 삭제하여 다시 빌드 합니다. prune 커맨드를 활용하여 처리할 수 있습니다.

# 사용하지 않는 builder 캐시 삭제
docker builder prune

# 사용하지 않는 Docker 오브젝트 전체 삭제
docker system prune

 

docker image(이미지) 빌드 확인

docker images

이미지 빌드 성공

 

 

이미지 빌드가 정상적으로 성공했다면, 컨테이너를 실행 해 줍니다.

docker container run --name dalbi -d -p 802:3000 dalbi_front

local PC에서 802 port(포트)번호로 접속하면 컨테이너의 3000 port(포트)로 연결합니다.

 

 

실행중인 컨테이너를 확인하여 정상적으로 컨테이너가 실행중인지 확인 합니다.

docker container ls

이 후 localhost:802/ 접속하면 다음과 같은 결과를 얻을 수 있습니다.

 

이미지 및 컨테이너가 정상적으로 작동 하는데, 만약 접속되지 않는다면 해당 컨테이너(container)에 접속하여 해당 서비스가 잘 실행되고 있는지 확인합니다. 또 한 Docker 툴을 이용하여 확인 할 수 있습니다. 툴을 이용한 방법은 다음과 같습니다.  containers 탭 메뉴에서 해당 컨테이너(container)를 클릭하여 접속 후, Exec 탭을 눌러 접속합니다.

netstat -lnpt

netstat 명령어를 입력하여 해당 서비스가 실행되고 있는지 확인하고 만약 없다면 아래 명령어를 입력 해 줍니다.

 

실행

npm start

 

이와같은 실행 관련 문제가 발생했다면 DockerFile 스크립트를 해당 프로젝트의 환경 구성과 동일하게 수정하여 처리 해 줍니다.

 

테스트 결과:

 

컨테이너 테스트 결과

 

 

번외 편으로 Java, maven을 빌드하는 DockerFile 스크립트의 예시는 다음과 같습니다.

FROM test/maven AS builder

WORKDIR /src/test
COPY pom.xml .
RUN mvn -B dependency:go-offline

COPY . .
RUN mvn package

# app
FROM project/openjdk

WORKDIR /app
COPY --from=builder /src/test/target/test-service-0.1.0.jar .

EXPOSE 80
ENTRYPOINT ["java", "-jar", "/app/test-service-0.1.0.jar"]