建立並執行待辦事項範例應用程式Build and run the todo sample app

在本教學課程的其餘部分,您將使用在 Node.js 中執行的簡單待辦事項清單管理員。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 社區版。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. 下載 ZIPDownload 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 CodeIf you're in need of an editor, you can use Visual Studio Code. 您應該會看到 package.json 和兩個子目錄 (srcspec) 。You should see the package.json and two subdirectories (src and spec).

    已載入應用程式時所開啟 Visual Studio Code 的螢幕擷取畫面

建立應用程式的容器映射Building the app's container image

若要建立應用程式,您必須使用 DockerfileIn 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. Dockerfile 具有下列內容的檔案所在的同一個資料夾中,建立名為的檔案 package.jsonCreate 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 沒有像這樣的副檔名 .txtPlease 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. 如果您尚未這麼做,請開啟終端機並移至 app 具有的目錄 DockerfileIf you haven't already done so, open a terminal and go to the app directory with the Dockerfile. 現在使用命令建立容器映射 docker buildNow 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-alpineThis 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 會告知 Docker 應該 Dockerfile 在目前的目錄中尋找。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 and -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:3000After 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?

此時,您應該會有一個執行中的待辦事項清單管理員,其中有幾個專案,全都由您建立!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 擴充功能,您應該會看到您現在執行的兩個容器 (本教學課程和您剛推出的應用程式容器) !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 擴充功能


在這個簡短的章節中,您已瞭解建立容器映射以及建立 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!