使用Docker部署React应用与Nginx

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

步骤概述

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

1. 创建Nginx配置文件

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

nginx:d:\node_test\docker-ngnix-react\nginx.conf 复制代码
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容器:

dockerfile:d:\node_test\docker-ngnix-react\Dockerfile 复制代码
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文件来定义服务和卷映射:

yaml:d:\node_test\docker-ngnix-react\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应用,可以使用以下命令创建一个:

bash 复制代码
npm create vite@latest . -- --template react

修改app的代码:

复制代码
import './App.css'

function App() {

  return (
    <>
      <div>
       hello world
      </div>
      
    </>
  )
}

export default App

然后构建React应用:

bash 复制代码
 npm install
 npm run build

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

5. 运行Docker容器

最后,使用以下命令启动容器:

bash 复制代码
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来模拟生产环境。通过卷映射,您的本地代码更改会立即反映在容器中。

相关推荐
小菜全1 小时前
《React vs Vue:选择适合你的前端框架》
vue.js·react.js·前端框架
duansamve6 小时前
React 18项目中使用环境变量(适用于不同环境下的配置常量)
react.js
Lin_Aries_04217 小时前
容器化 Flask 应用程序
linux·后端·python·docker·容器·flask
Lin_Aries_04219 小时前
通过配置 GitLab 自动触发项目自动化构建与部署
运维·docker·容器·自动化·云计算·gitlab
尘埃不入你眼眸9 小时前
Docker操作命令
运维·docker·容器
龙茶清欢9 小时前
2、Nginx 与 Spring Cloud Gateway 详细对比:定位、场景与分工
java·运维·spring boot·nginx·spring cloud·gateway
失因9 小时前
Nginx 特性、配置与实战部署
运维·数据库·nginx
小刘鸭地下城9 小时前
告别服务端渲染卡顿!useSyncExternalStore 优化水合作用全解析
react.js
苹果醋310 小时前
SpringCloud高可用集群搭建及负载均衡配置实战
java·运维·spring boot·mysql·nginx
半梦半醒*10 小时前
keepalived部署
运维·服务器·nginx·架构·centos·apache