創建并運行一個使用 Create React App (CRA) 創建的應用程序的 Docker 容器涉及幾個步驟。以下是一個詳細的過程，包括創建一個簡單的 React 應用、編寫 Dockerfile、構建鏡像以及運行容器。
步驟 1: 創建一個新的 React 應用
如果你還沒有一個 React 應用，可以使用 Create React App 快速創建一個：
npx create-react-app my-react-app
cd my-react-app
步驟 2: 添加 Dockerfile
在你的 React 應用根目錄中創建一個名為 Dockerfile 的文件，沒有文件擴展名。添加以下內容到你的 Dockerfile 中：
# 使用官方 Node.js 作為構建環境
FROM node:14 AS build# 設置工作目錄
WORKDIR /app# 復制 package.json 和 yarn.lock 文件
# 如果不是使用 yarn 進行包管理，去掉 yarn.lock 即可
COPY package.json yarn.lock ./# 安裝項目依賴
RUN yarn install# 復制項目文件
COPY . .# 構建應用
RUN yarn build# 運行環境使用 nginx
FROM nginx:stable-alpine# 從構建階段復制構建產物到 nginx 目錄
COPY --from=build /app/build /usr/share/nginx/html# 暴露 80 端口
EXPOSE 80# 啟動 nginx
CMD ["nginx", "-g", "daemon off;"]
這個 Dockerfile 使用了多階段構建：第一階段使用 Node.js 鏡像構建 React 應用，第二階段使用 nginx 鏡像來服務構建產物。
步驟 3: 構建 Docker 鏡像
在你的應用根目錄下，運行以下命令來構建 Docker 鏡像：
docker run -d -p 8080:80 my-react-app
這個命令會在后臺運行一個新的容器實例，將容器的 80 端口映射到宿主機的 8080 端口。
步驟 5: 訪問應用
現在，你可以通過瀏覽器訪問 http://localhost:8080 來查看你的 React 應用了。
這個過程概述了如何使用 Docker 容器化一個簡單的 React 應用。你可以根據需要調整 Dockerfile 中的指令，例如使用不同的基礎鏡像或暴露不同的端口。
如果在 Docker 容器內部安裝了 Nginx，宿主機就不需要再安裝 Nginx。容器技術旨在將應用及其依賴打包在一起，從而實現應用的隔離和移植性。因此，只要容器正在運行，并且你已經正確配置了容器內的 Nginx 以及容器和宿主機之間的網絡（例如，通過端口映射），你就可以直接使用容器內的 Nginx，無需在宿主機上安裝相同的服務。
