todo 샘플 앱 빌드 및 실행Build and run the todo sample app

이 자습서의 나머지 부분에서는 Node.js에서 실행되는 간단한 todo 목록 관리자를 사용합니다.For the rest of this tutorial, you'll be working with a simple todo list manager that is running in Node.js. Node.js에 대해 잘 몰라도 걱정할 필요가 없습니다.If you're not familiar with Node.js, don't worry! 실제 JavaScript 환경은 필요하지 않습니다.No real JavaScript experience is needed!

이 시점의 개발 팀은 매우 소규모이고 MVP(최소 실행 가능 제품)를 입증하는 앱을 빌드하기만 하면 됩니다.At this point, your development team is quite small and you're simply building an app to prove out your MVP (minimum viable product). 대규모 팀, 여러 개발자 등에서 어떻게 작동하는지는 고려하지 않고 앱의 작동 방식과 앱에서 수행할 수 있는 기능만 보여 주려고 합니다.You want to show how it works and what it's capable of doing without needing to think about how it will work for a large team, multiple developers, and so on.

todo 목록 관리자 스크린샷

앱 다운로드Get the app

애플리케이션을 실행하려면 먼저 애플리케이션 소스 코드를 머신으로 가져와야 합니다.Before you can run the application, you need to get the application source code onto your machine. 실제 프로젝트의 경우, 일반적으로 리포지토리를 복제합니다.For real projects, you will typically clone the repo. 그러나 이 자습서에서는 애플리케이션이 포함된 ZIP 파일을 만들었습니다.But, for this tutorial, we have created a ZIP file containing the application.

  1. Windows용 Docker 또는 Docker Community Edition이 로컬 머신에 설치되어 있는지 확인합니다.Make sure that you have Docker for Windows or Docker Community Edition installed on the local machine. Windows용 Docker 설치 설명서를 참조하세요.See Docker for Windows installation documentation. 설치 프로세스는 샘플이 포함된 ZIP 파일을 localhost 주소에서 사용할 수 있도록 합니다.The install process makes the ZIP file containing the sample available at the localhost address.

  2. ZIP을 다운로드합니다.Download the ZIP. ZIP 파일을 열고 내용을 추출합니다.Open the ZIP file and make sure you extract the contents.

  3. 추출이 완료되면 선호하는 코드 편집기를 사용하여 프로젝트를 엽니다.Once extracted, use your favorite code editor to open the project. 편집기가 필요한 경우 Visual Studio Code를 사용할 수 있습니다.If you're in need of an editor, you can use Visual Studio Code. package.json과 하위 디렉터리 2개(srcspec)가 표시됩니다.You should see the package.json and two subdirectories (src and spec).

    앱을 로드하여 열린 Visual Studio Code 스크린샷

앱 컨테이너 이미지 빌드Building the app's container image

애플리케이션을 빌드하려면 Dockerfile을 사용해야 합니다.In order to build the application, you need to use a Dockerfile. Dockerfile은 컨테이너 이미지를 만드는 데 사용되는 텍스트 기반 명령 스크립트입니다.A Dockerfile is simply a text-based script of instructions that is used to create a container image. 이전에 Dockerfile을 만든 적이 있다면 아래 Dockerfile에서 몇 가지 결함을 발견했을 수 있습니다.If you've created Dockerfiles before, you might see a few flaws in the Dockerfile below. 하지만 염려하지 않아도 됩니다.But, don't worry! 결함은 나중에 살펴보고 수정하겠습니다.We'll go over them.

  1. package.json 파일과 동일한 폴더에 다음 내용으로 Dockerfile이라는 파일을 만듭니다.Create a file named Dockerfile in the same folder as the file package.json with the following contents.

    FROM node:12-alpine
    WORKDIR /app
    COPY . .
    RUN yarn install --production
    CMD ["node", "/app/src/index.js"]
    

    Dockerfile 파일에 .txt 등의 파일 확장명이 없는지 확인합니다.Please check that the file Dockerfile has no file extension like .txt. 일부 편집기에서는 이 파일 확장명이 자동으로 추가되어 다음 단계에서 오류가 발생할 수도 있습니다.Some editors may append this file extension automatically and this would result in an error in the next step.

  2. 아직 수행하지 않은 경우 터미널을 열고 Dockerfile이 있는 app 디렉터리로 이동합니다.If you haven't already done so, open a terminal and go to the app directory with the Dockerfile. 이제 docker build 명령을 사용하여 컨테이너 이미지를 빌드합니다.Now build the container image using the docker build command.

    docker build -t getting-started .
    

    또는, Dockerfile을 마우스 오른쪽 단추로 클릭하고 이미지 빌드... 를 선택한 다음 프롬프트에서 태그를 지정할 수도 있습니다.Alternatively, you can also right-click on the Dockerfile and choose Build Image... and then specify the tag at the prompt.

    이 명령은 Dockerfile을 사용하여 새 컨테이너 이미지를 빌드했습니다.This command used the Dockerfile to build a new container image. 많은 “계층”이 다운로드된 것을 발견했을 수 있습니다.You might have noticed that a lot of "layers" were downloaded. 이는 node:12-alpine 이미지에서 시작하도록 작성기에 명령했기 때문입니다.This is because you instructed the builder that you wanted to start from the node:12-alpine image. 하지만 머신에 해당 이미지가 없어 이미지를 다운로드해야 했습니다.But, since you didn't have that on your machine, that image needed to be downloaded.

    이미지가 다운로드된 후 애플리케이션에서 yarn을 복사하고 사용하여 애플리케이션 종속성을 설치했습니다.After the image was downloaded, you copied in your application and used yarn to install your application's dependencies. CMD 지시문은 해당 이미지에서 컨테이너를 시작할 때 실행할 기본 명령을 지정합니다.The CMD directive specifies the default command to run when starting a container from this image.

    마지막으로, -t 플래그가 이미지에 태그를 지정합니다.Finally, the -t flag tags your image. 사람이 읽을 수 있는 최종 이미지 이름으로 생각하면 됩니다.Think of this simply as a human-readable name for the final image. 이미지 이름을 getting-started로 지정했기 때문에 컨테이너를 실행할 때 해당 이미지를 가리킬 수 있습니다.Since you named the image getting-started, you can refer to that image when you run a container.

    docker build 명령의 끝에 있는 .는 현재 디렉터리에서 Dockerfile을 찾도록 Docker에 지시합니다.The . at the end of the docker build command tells that Docker should look for the Dockerfile in the current directory.

앱 컨테이너 시작Starting an app container

이제 이미지가 준비되었으므로 애플리케이션을 실행합니다.Now that you have an image, run the application! 이렇게 하려면 docker run 명령을 사용합니다(앞에서 설명한 내용 참조).To do so, use the docker run command (remember that from earlier?).

  1. docker run 명령을 사용하여 컨테이너를 시작하고 방금 만든 이미지의 이름을 지정합니다.Start your container using the docker run command and specify the name of the image you just created:

    docker run -dp 3000:3000 getting-started
    

    -d-p 플래그를 기억하시나요?Remember the -d and -p flags? 백그라운드에서 “분리” 모드로 새 컨테이너를 실행하고 있으며 호스트의 포트 3000과 컨테이너의 포트 3000 간에 매핑을 만듭니다.You're running the new container in "detached" mode (in the background) and creating a mapping between the host's port 3000 to the container's port 3000. 포트 매핑이 없으면 애플리케이션에 액세스할 수 없습니다.Without the port mapping, you wouldn't be able to access the application.

  2. 몇 초 후에 웹 브라우저에서 http://localhost:3000을 엽니다.After a few seconds, open your web browser to http://localhost:3000. 앱이 표시됩니다.You should see the app!

    빈 todo 목록

  3. 계속해서 항목을 한두 개 추가하고 예상대로 작동하는지 확인합니다.Go ahead and add an item or two and see that it works as you expect. 항목을 완료로 표시하고 제거할 수 있습니다.You can mark items as complete and remove items. 프런트 엔드가 백 엔드에 항목을 저장하는 데 성공합니다.Your frontend is successfully storing items in the backend! 매우 빠르고 쉽지 않은가요?Pretty quick and easy, huh?

이제 몇 개의 항목이 포함된 todo 목록 관리자가 실행되고 있고, 모두 직접 빌드한 것입니다.At this point, you should have a running todo list manager with a few items, all built by you! 다음에는 몇 가지 사항을 변경하고 컨테이너 관리 방법을 알아보겠습니다.Now, let's make a few changes and learn about managing your containers.

VS Code 확장을 잠시 살펴보면 현재 컨테이너 2개(이 자습서와 새로 시작한 앱 컨테이너)가 실행되는 것을 확인할 수 있습니다.If you take a quick look at the VS Code extension, you should see your two containers running now (this tutorial and your freshly launched app container)!

자습서와 앱 컨테이너가 실행되고 있는 Docker 확장

요약Recap

이 짧은 섹션에서는 컨테이너 이미지 빌드의 기본 사항에 대해 배웠으며, 이미지 빌드를 위해 Dockerfile을 만들었습니다.In this short section, you learned the very basics about building a container image and created a Dockerfile to do so. 이미지를 빌드한 후 컨테이너를 시작하고 실행 중인 앱을 살펴보았습니다.Once you built an image, you started the container and saw the running app!

다음에는 앱을 수정하고 실행 중인 애플리케이션을 새 이미지로 업데이트하는 방법을 알아보겠습니다.Next, you're going to make a modification to the app and learn how to update the running application with a new image. 그 과정에서 다른 몇 가지 유용한 명령을 배울 수 있습니다.Along the way, you'll learn a few other useful commands.

다음 단계Next steps

자습서를 계속 진행합니다.Continue with the tutorial!