使用Docker部署React应用与Nginx

这个教程将帮助您使用Docker部署一个带有React的Nginx容器，并通过卷(volumes)将本地代码绑定到Docker容器中。这种设置非常适合开发环境，因为它允许您在本地编辑代码，而容器中的应用会自动更新。

步骤概述

1. 创建Nginx配置文件
2. 创建Dockerfile
3. 创建docker-compose.yml文件
4. 运行容器

1. 创建Nginx配置文件

首先，让我们创建一个Nginx配置文件，用于正确地提供React应用：

server {listen 80;server_name localhost;location / {root /usr/share/nginx/html;index index.html index.htm;try_files $uri $uri/ /index.html;  # 支持React路由}# 如果您有API请求需要代理，可以添加如下配置# location /api {#     proxy_pass http://backend:8080;#     proxy_set_header Host $host;#     proxy_set_header X-Real-IP $remote_addr;# }error_page 500 502 503 504 /50x.html;location = /50x.html {root /usr/share/nginx/html;}
}

2. 创建Dockerfile

接下来，创建一个Dockerfile来设置Nginx容器：

FROM nginx:alpine# 删除默认的nginx配置
RUN rm /etc/nginx/conf.d/default.conf# 复制我们的配置
COPY nginx.conf /etc/nginx/conf.d/# 创建存放React应用的目录
RUN mkdir -p /usr/share/nginx/htmlEXPOSE 80CMD ["nginx", "-g", "daemon off;"]

3. 创建docker-compose.yml文件

现在，创建一个docker-compose.yml文件来定义服务和卷映射：

version: '3'services:nginx-react:build:context: .dockerfile: Dockerfilecontainer_name: nginx-react-appports:- "80:80"volumes:- ./dist:/usr/share/nginx/html- ./nginx.conf:/etc/nginx/conf.d/nginx.confrestart: unless-stopped

4. 创建一个简单的React应用（如果您还没有）

如果您还没有React应用，可以使用以下命令创建一个：

npm create vite@latest . -- --template react

修改app的代码：

import './App.css'function App() {return (<><div>hello world</div></>)
}export default App

然后构建React应用：

 npm installnpm run build

这将在项目目录中创建一个build文件夹，其中包含可以由Nginx提供服务的静态文件。

5. 运行Docker容器

最后，使用以下命令启动容器：

docker-compose up -d

这将构建Docker镜像并启动容器。您的React应用将在 http://localhost 上可用。

开发工作流程

1. 在本地编辑您的React代码
2. 运行npm run build生成新的构建文件
3. 由于卷映射，Nginx将自动提供更新后的文件，无需重启容器

注意事项

• 确保在运行docker-compose up之前已经构建了React应用（npm run build）
• 如果您更改了Nginx配置，需要重启容器：docker-compose restart
• 如果您需要查看容器日志：docker-compose logs -f

这个设置使您可以在本地开发React应用，同时使用Docker和Nginx来模拟生产环境。通过卷映射，您的本地代码更改会立即反映在容器中。