使用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/html

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

3. 创建docker-compose.yml文件

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

version: '3'

services:
  nginx-react:
    build:
      context: .
      dockerfile: Dockerfile
    container_name: nginx-react-app
    ports:
      - "80:80"
    volumes:
      - ./dist:/usr/share/nginx/html
      - ./nginx.conf:/etc/nginx/conf.d/nginx.conf
    restart: 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 install
 npm 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来模拟生产环境。通过卷映射，您的本地代码更改会立即反映在容器中。