更新應用程式Update the app

當您沒有任何 todo 清單專案時,產品小組會要求您變更「空白文字」,這是小型的功能要求。As a small feature request, you've been asked by the product team to change the "empty text" when you don't have any todo list items. 他們想要將它轉換成下列內容:They would like to transition it to the following:

您還沒有 todo 專案!You have no todo items yet! 新增上述各項!Add one above!

相當簡單,對吧?Pretty simple, right? 讓我們進行變更。Let's make the change.

更新原始程式碼Update the source code

  1. 在檔案中 src/static/js/app.js ,更新行56以使用新的空文字。In the src/static/js/app.js file, update line 56 to use the new empty text.

    -                <p className="text-center">No items yet! Add one above!</p>
    +                <p className="text-center">You have no todo items yet! Add one above!</p>
    
  2. 使用您先前使用的相同命令,建立映射的更新版本。Build the updated version of the image, using the same command you used before.

    docker build -t getting-started .
    
  3. 使用更新的程式碼啟動新的容器。Start a new container using the updated code.

    docker run -dp 3000:3000 getting-started
    

喔!Uh oh! 您可能會看到類似下面的錯誤 (識別碼將會不同) :You probably saw an error like this (the IDs will be different):

docker: Error response from daemon: driver failed programming external connectivity on endpoint laughing_burnell 
(bb242b2ca4d67eba76e79474fb36bb5125708ebdabd7f45c8eaf16caaabde9dd): Bind for 0.0.0.0:3000 failed: port is already allocated.

那麼,發生了什麼事呢?So, what happened? 因為您的舊容器仍在執行中,所以無法啟動新的容器。The new container couldn't start, because your old container is still running. 這是問題的原因,是因為容器正在使用主機的埠3000,而電腦上只有一個進程 (容器包含) 可以接聽特定埠。The reason this is a problem is because that container is using the host's port 3000 and only one process on the machine (containers included) can listen to a specific port. 若要修正此問題,請移除舊的容器。To fix this, remove the old container.

取代舊的容器Replace the old container

若要移除容器,必須先將它停止。To remove a container, it first needs to be stopped. 一旦停止之後,就可以將它移除。Once it has stopped, it can be removed. 您有兩種方式可以移除舊的容器。You have two ways that you can remove the old container. 請隨意選擇您最熟悉的路徑。Feel free to choose the path that you're most comfortable with.

使用 CLI 移除容器Remove a container using the CLI

  1. 使用命令取得容器的識別碼 docker psGet the ID of the container by using the docker ps command.

    docker ps
    
  2. 使用 docker stop 命令來停止容器。Use the docker stop command to stop the container.

    # Swap out <the-container-id> with the ID from docker ps
    docker stop <the-container-id>
    
  3. 容器停止後,您可以使用命令將其移除 docker rmOnce the container has stopped, you can remove it by using the docker rm command.

    docker rm <the-container-id>
    

提示

您可以在命令中新增「強制」旗標,以在單一命令中停止和移除容器 docker rmYou can stop and remove a container in a single command by adding the "force" flag to the docker rm command. 例如:docker rm -f <the-container-id>For example: docker rm -f <the-container-id>

使用 Docker view 移除容器Remove a container using the Docker view

如果您開啟 VS Code 擴充功能,只要按兩下滑鼠就可以移除容器!If you open the VS Code Extension, you can remove a container with two clicks! 這當然比查詢容器識別碼和移除容器識別碼來得簡單得多。It's certainly much easier than having to look up the container ID and remove it.

  1. 開啟擴充功能後,流覽至容器,然後按一下滑鼠右鍵。With the extension opened, navigate to the container and right-click.

  2. 按一下 [ 移除 ] 選項。Click on the Remove option.

  3. 確認移除完成後,您就完成了!Confirm the removal and you're done!

Docker view-移除容器

啟動已更新的應用程式容器Start the updated app container

  1. 現在,啟動已更新的應用程式。Now, start your updated app.

    docker run -dp 3000:3000 getting-started
    
  2. 重新整理您的瀏覽器 http://localhost:3000 ,您應該會看到已更新的解說文字!Refresh your browser on http://localhost:3000 and you should see your updated help text!

更新的應用程式已更新空白文字

概括回顧Recap

雖然您可以建立更新,但您可能已經注意到兩件事:While you were able to build an update, there were two things you might have noticed:

  • Todo 清單中的所有現有專案都已消失!All of the existing items in your todo list are gone! 這並不是很好的應用程式!That's not a very good app! 我們很快就會討論到。We'll talk about that shortly.
  • 這項小變更牽涉到 許多 步驟。There were a lot of steps involved for such a small change. 在下一節中,您將瞭解如何在每次進行變更時,查看程式碼更新,而不需要重建和啟動新的容器。In an upcoming section, you'll learn about how to see code updates without needing to rebuild and start a new container every time you make a change.

在瞭解持續性之前,您將快速瞭解如何與其他人共用這些映射。Before learning about persistence, you'll quickly see how to share these images with others.

後續步驟Next steps

繼續進行本教學課程!Continue with the tutorial!