当前位置: 首页 > news >正文

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

相关文章:

使用Docker部署React应用与Nginx

这个教程将帮助您使用Docker部署一个带有React的Nginx容器&#xff0c;并通过卷(volumes)将本地代码绑定到Docker容器中。这种设置非常适合开发环境&#xff0c;因为它允许您在本地编辑代码&#xff0c;而容器中的应用会自动更新。 步骤概述 创建Nginx配置文件创建Dockerfile…...

基于SpringBoot的小型民营加油站管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏&#xff1a;…...

Triton介绍和各平台支持情况分析

文章目录 &#x1f49e;Triton介绍&#x1f9e0; Triton 是什么&#xff1f;&#x1f50d; Triton 的核心特点&#x1f680; Triton 在 PyTorch 中的作用&#x1f4e6; Triton 的典型使用场景&#x1f9ea; 示例&#xff1a;Triton 编写的向量加法&#xff08;GPU 并行&#xf…...

HTTPS核心机制拆解

目录 引言 HTTPS和HTTP的区别 常见加密方式 数据摘要 数字证书与数据签名 HTTPS请求过程 结语 引言 HTTPS是什么&#xff1f;是一个应用层协议&#xff0c;在HTTP协议的基础上引入了一层加密层。为什么需要HTTPS&#xff1f;答案是显而易见的&#xff0c;要加密&#xf…...

我的食物信使女友

第一章&#xff1a;初识那是一个普通的周三下午&#xff0c;阳光透过咖啡馆的玻璃窗洒在木质的桌子上&#xff0c;空气中弥漫着咖啡的香气和轻柔的爵士乐。我坐在角落的一个位置&#xff0c;手中捧着一本已经翻了几十页的小说&#xff0c;但心思却完全不在文字上。我的生活就像…...

【D1,2】 贪心算法刷题

文章目录 不同路径 II整数拆分 不同路径 II 初始化的时候不能整列初始化为1&#xff0c;因为如果有障碍物&#xff0c;后面的都不能到达 也不能整列初始化为0&#xff0c;因为状态转移的时候第一行第一列都没有检查&#xff0c;因此不能部分初始化 整数拆分 需要考虑几种情况…...

C++多态的详细讲解

【本节目标】 1. 多态的概念 2. 多态的定义及实现 3. 抽象类 4. 多态的原理 5. 单继承和多继承关系中的虚函数表 前言 需要声明的&#xff0c;本博客中的代码及解释都是在 vs2013 下的 x86 程序中&#xff0c;涉及的指针都是 4bytes 。 如果要其他平台下&#xff0c;部…...

UE5在Blueprint中判断不同平台

在Unreal Engine 5的蓝图中&#xff0c;可以通过以下方法判断当前运行的平台&#xff08;如Android、Windows、iOS等&#xff09;&#xff0c;并根据平台执行不同的逻辑&#xff1a; 方法1&#xff1a;使用 Get Platform Name 节点 步骤&#xff1a; 在蓝图图表中右键点击&am…...

多卡跑ollama run deepseek-r1

# 设置环境变量并启动模型 export CUDA_VISIBLE_DEVICES0,1,2,3 export OLLAMA_SCHED_SPREAD1 # 启用多卡负载均衡 ollama run deepseek-r1:32b 若 deepseek-r1:32b 的显存需求未超过单卡容量&#xff08;如单卡 24GB&#xff09;&#xff0c;Ollama 不会自动启用多卡 在run…...

MAC电脑中右键后复制和拷贝的区别

在Mac电脑中&#xff0c;右键菜单中的“复制”和“拷贝”操作在功能上有所不同&#xff1a; 复制 功能&#xff1a;在选定的位置创建一个与原始文件相同的副本。快捷键&#xff1a;CommandD用于在当前位置快速复制文件&#xff0c;CommandC用于将内容复制到剪贴板。效果&…...

打卡第二十二天

知识点回顾&#xff1a; LDA线性判别PCA主成分分析t-SNE降维 还有一些其他的降维方式&#xff0c;也就是最重要的词向量的加工&#xff0c;我们未来再说。 作业&#xff1a; 自由作业&#xff1a;探索下什么时候用到降维&#xff1f;降维的主要应用&#xff1f;或者让AI给你出…...

【Unity 2023 新版InputSystem系统】新版InputSystem 如何进行人物移动(包括配置、代码详细实现过程)

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、InputSystem配置二、GameInput 游戏输入脚本1.实现思路2.完整代码三、Player 游戏人物移动脚本1.实现思路2.完整代码四、场景脚本设置1.组件设置五、问题解决1.人物一直下落2.人物跳跃时,…...

Python实现的在线词典学习工具

Python实现的在线词典学习工具 源码最初来自网络&#xff0c;根据实际情况进行了修改。 主要功能&#xff1a; 单词查询 通过Bing词典在线获取单词释义&#xff08;正则提取网页meta描述&#xff09;&#xff0c;支持回车键快速查询 内置网络请求重试和异常处理机制 在线网页…...

软考 系统架构设计师系列知识点之杂项集萃(63)

接前一篇文章&#xff1a;软考 系统架构设计师系列知识点之杂项集萃&#xff08;62&#xff09; 第102题 以下关于系统性能评估方法的描述&#xff0c;错误的是&#xff08;&#xff09;。 A. 指令执行速度法常用每秒百万次指令运算&#xff08;MIPS&#xff09;评估系统性能…...

python重庆旅游系统-旅游攻略

目录 技术栈介绍具体实现截图系统设计研究方法&#xff1a;设计步骤设计流程核心代码部分展示研究方法详细视频演示试验方案论文大纲源码获取/详细视频演示 技术栈介绍 Django-SpringBoot-php-Node.js-flask 本课题的研究方法和研究步骤基本合理&#xff0c;难度适中&#xf…...

如何使用GIT管理项目代码

介绍 ​ Git是目前世界上最流行甚至最好的开源分布式版本控制系统&#xff0c;不论是很小的项目还是很大的项目&#xff0c;它都能有效并且高效的处理项目版本管理&#xff0c;初衷是为了帮助管理linux内核代码而开发的一个开放源码的版本控制软件。 GIT常用分支名称 分支分…...

Android 11.0 动画缩放默认值改为0.5的功能实现

1.前言 在11.0的系统rom定制化开发中,在关于设置动画的时候,系统有相关参数要求,设置默认的 动画缩放默认值等功能,来实现相关功能,接下来分析下相关的动画默认缩放值的设置功能实现 2.动画缩放默认值改为0.5的功能实现的核心类 frameworks/base/packages/SettingsProv…...

第35周Zookkeeper+Dubbo 面试题精讲

面试题精讲 一、算法面试答题思路 理解思路的重要性:算法面试比基础面试更复杂,需先想清楚思路,与面试官沟通确认题目条件(如数据范围、是否包含负数/零等),这有助于理清解题思路并展示技术实力。变量命名清晰:算法中变量命名要明确含义和范围,避免使用模糊的变量名,…...

Mergekit——任务向量合并算法Ties解析

Mergekit——高频合并算法 TIES解析 Ties背景Ties 核心思想具体流程总结 mergekit项目地址 Mergekit提供模型合并方法可以概况为三大类&#xff1a;基本线性加权、基于球面插值、基于任务向量&#xff0c;今天我们来刷下基于任务向量的ties合并方法&#xff0c;熟悉原理和代码。…...

初识 Redis

什么是 Redis&#xff1f; 在 Redis 官网中有介绍&#xff0c; Redis 就是一个存储空间&#xff0c;只不过这个存储空间是在内存上的&#xff0c;这也就代表存储在 Redis 中的数据访问起来会非常快&#xff0c;但也会有一个弊端&#xff0c;也就是内存资源是非常少的&#xff…...

python打卡训练营打卡记录day30

一、导入官方库 我们复盘下学习python的逻辑&#xff0c;所谓学习python就是学习python常见的基础语法学习你所处理任务需要用到的第三方库。 1.1标准导入&#xff1a;导入整个库 这是最基本也是最常见的导入方式&#xff0c;直接使用import语句。 # 方式1&#xff1a;导入整…...

FART 主动调用组件设计和源码分析

版权归作者所有&#xff0c;如有转发&#xff0c;请注明文章出处&#xff1a;https://cyrus-studio.github.io/blog/ 现有脱壳方法存在的问题 脱壳粒度集中在 DexFile 整体&#xff0c;当前对 apk 保护的粒度在函数粒度&#xff0c;这就导致了脱壳与加固的不对等&#xff0c;无…...

windows使用ollama部署deepseek及qwen

ollama 参考文档 ollama 官方文档 GitHub仓库 基础环境&#xff1a; NVIDIA 1660TI 6G 下载 ollma是一款开源工具&#xff0c;支持在本地计算机&#xff08;无需联网&#xff09;快速部署和运行大型语言模型&#xff08;LLM&#xff09;&#xff0c;如 LLaMA、Mistral、G…...

【11408学习记录】考研英语辞职信写作三步法:真题精讲+妙句活用+范文模板

应聘信 英语写作2005年考研英语真题小作文写作思路第一段第二段妙句7 9妙句11补充3补充4 第三段 妙句成文 每日一句词汇第一步&#xff1a;找谓语第二步&#xff1a;断句第三步&#xff1a;简化主句原因状语从句 英语 写作 2005年考研英语真题小作文 Directions:​​ Two m…...

湖北理元理律师事务所:债务优化如何实现“减负不降质”?

债务压力下&#xff0c;如何在保障基本生活品质的同时科学规划还款&#xff0c;是许多债务人面临的现实难题。湖北理元理律师事务所通过多年实务经验&#xff0c;总结出一套“法律财务心理”的复合型解决方案。本文基于公开案例与法律框架&#xff0c;解析其服务逻辑中的可借鉴…...

python fastapi + react, 写一个图片 app

1. 起因&#xff0c; 目的: 上厕所的时候&#xff0c;想用手机查看电脑上的图片&#xff0c;但是又不想点击下载。此app 应运而生。 2. 先看效果 单击图片&#xff0c;能放大图片 3. 过程: 过程很枯燥。有时候&#xff0c; 有一堆新的想法。 但是做起来太麻烦&#xff0c;…...

Golang的Web应用架构设计

# Golang的Web应用架构设计 介绍 是一种快速、高效、可靠的编程语言&#xff0c;它在Web应用开发中越来越受欢迎。Golang的Web应用架构设计通常包括前端、后端和数据库三个部分。在本篇文章中&#xff0c;我们将详细介绍Golang的Web应用架构设计及其组成部分。 前端 在Golang的…...

软件设计师“UML”真题考点分析——求三连

一、考点分值占比与趋势分析 综合知识题分值统计表 年份考题数量分值分值占比考察重点2018222.67%类图关系、序列图消息流2019334.00%对象图特征、部署图辨析2020222.67%组件图特性、泛化关系2021334.00%聚合/组合区别、交互图应用2022222.67%用例图参与者、状态图转换202344…...

Nginx端口telnet不通排查指南

nginx已经配置server及端口20002&#xff0c;telnet不通&#xff1a;telnet 127.0.0.1 20002 Trying 127.0.0.1... telnet: connect to address 127.0.0.1: Connection refused 一、检查 systemctl status nginx.service nginx: [emerg] bind() to 0.0.0.0:20002 failed (13…...

C++ 函数对象、仿函数与 Lambda 表达式详解

C 函数对象、仿函数与 Lambda 表达式详解 在 C 中&#xff0c;函数对象&#xff08;Function Object&#xff09;、仿函数&#xff08;Functor&#xff09; 和 Lambda 表达式 是三种实现可调用行为的技术&#xff0c;它们在功能上类似&#xff0c;但语法和适用场景有所不同。 …...

More Effective C++:改善编程与设计(下)

目录 条款19:了解临时对象的来源 条款20:协助完成“返回值优化” 条款21:利用重载技术避免隐式类型转换 条款22:考虑以操作符复合形式&#xff08;op&#xff09;取代其独身形式&#xff08;op&#xff09; 条款23:考虑使用其他程序库 条款24:了解virtual functions、mul…...

C++:判断闰年

【描述】 判断某年是否是闰年。 【输入】 输入只有一行&#xff0c;包含一个整数a(0 < a < 3000) 【输出】 一行&#xff0c;如果公元a年是闰年输出Y&#xff0c;否则输出N 【样例输入】 2006 【样例输出】 N 【提示】 公历纪年法中&#xff0c;能被4整除的大多是闰年&am…...

C+++STL(一)

/ 文章目录 模版C作为静态类型语言宏可以摆脱数据类型的限制利用宏构建通用函数框架 函数模版函数模版的定义函数模版的使用函数模版的分析实例化函数模版的条件 函数模版扩展二次编译隐式推断类型实参函数模版的重载 bilibili 学习网址&#xff1a;https://www.bilibili.com/…...

C 语言学习笔记(函数2)

内容提要 函数 函数的调用函数的声明函数的嵌套关系函数的递归调用数组做函数参数 函数 函数的调用 调用方式 ①函数语句&#xff1a; test (); //对于无返回值的函数&#xff0c;直接调用 int res max(2,4); //对于有返回值的函数&#xff0c;一般需要在主调函…...

Spring的后置处理器是干什么用的?扩展点又是什么?

Spring 的后置处理器和扩展点是其框架设计的核心机制&#xff0c;它们为开发者提供了灵活的扩展能力&#xff0c;允许在 Bean 的生命周期和容器初始化过程中注入自定义逻辑。 1. 后置处理器&#xff08;Post Processors&#xff09; 后置处理器是 Spring 中用于干预 Bean 生命…...

Java大数据机器学习模型在金融衍生品风险建模中的创新实践

摘要 本文深入探讨Java技术栈在大数据与机器学习领域的独特优势&#xff0c;及其在金融衍生品风险建模中的突破性应用。通过分析分布式计算框架与机器学习库的整合方案&#xff0c;揭示Java在构建复杂金融风险模型时的技术可行性。结合信用违约互换&#xff08;CDS&#xff09…...

leetcode3403. 从盒子中找出字典序最大的字符串 I-medium

1 题目&#xff1a;从盒子中找出字典序最大的字符串 I 官方标定难度&#xff1a; 给你一个字符串 word 和一个整数 numFriends。 Alice 正在为她的 numFriends 位朋友组织一个游戏。游戏分为多个回合&#xff0c;在每一回合中&#xff1a; word 被分割成 numFriends 个 非空…...

Effective C++阅读笔记(item 1-4)

文章目录 理解模板类型推导理解auto类型推导理解decltype学会查看类型推导结果 理解模板类型推导 c的auto特性是建立在模板类型推到的基础上。坏消息是当模板类型推导规则应用于auto环境时&#xff0c;有时不如应用于template时那么直观。我们可能很自然的期望T和传递进函数的…...

python自学笔记4 控制结构

条件语句 略 循环语句 略 range函数 enumerate() 函数 可以将一个可迭代对象转换为一个由索引和元素组成的枚举对象。 索引的起始编号是0&#xff0c;也可以传入第二参数来指定其起始编号 zip函数 打包范围以两者最短的长度为准 以两者较长的长度为准的函数为itertool…...

VTK|显示三维图像的二维切片

参考&#xff1a; VTK显示三维图像的二维切片 文章目录 实现类头文件实现类源文件如何调用项目git链接 以中心点坐标横切面 实现类头文件 /*** file MeshSliceController.h* brief 该头文件定义了 MeshSliceController 类&#xff0c;用于显示切面图。* details 该类负责处理与…...

day 30

模块和库的导入 导入官方库 标准导入&#xff1a;导入整个库 直接使用import语句 # 方式1&#xff1a;导入整个模块 import mathprint("方式1&#xff1a;使用 import math") print(f"圆周率π的值&#xff1a;{math.pi}") print(f"2的平方根&#xf…...

Linux云计算训练营笔记day11【Linux CentOS7(cat、less、head、tail、lscpu、lsblk、hostname、vim、which、mount、alias)】

Linux云计算 云计算是一种服务&#xff0c;是通过互联网按需提供计算资源的服务模式 程序员写代码的&#xff0c;部署上线项目 买服务器(一台24小时不关机的电脑&#xff0c;为客户端提供服务) 20万 买更多的服务器 Linux(命令) windows(图形化) 就业岗位: 云计算工程师 li…...

使用Python和FastAPI构建网站爬虫:Oncolo医疗文章抓取实战

使用Python和FastAPI构建网站爬虫&#xff1a;Oncolo医疗文章抓取实战 前言项目概述技术栈代码分析1. 导入必要的库2. 初始化FastAPI应用3. 定义请求模型4. 核心爬虫功能4.1 URL验证和准备4.2 设置HTTP请求4.3 发送请求和解析HTML4.4 提取文章内容4.5 保存结果和返回数据 5. AP…...

光纤克尔非线性效应及其在光通信系统中的补偿教程-3.2 克尔效应

需要结合上一期的文章&#xff0c;光纤克尔非线性效应及其在光通信系统中的补偿教程-3.1 非线性极化性 光纤中的非线性效应源于三阶感性 χ ( 3 ) \chi^{(3)} χ(3)。 光纤中非线性效应的主要来源之一是由 χ ( 3 ) \chi^{(3)} χ(3)引起的非线性折射&#xff0c;即克尔效应&a…...

【Tools】VMware Workstation 17.6 Pro安装教程

00. 目录 文章目录 00. 目录01. VMware Workstation 17.6简介02. VMware Workstation 17.6新功能03. VMware Workstation 17.6特性04. VMware Workstation 17.6下载05. VMware Workstation 17.6安装06. VMware Fusion 和 Workstation免费07. 附录 01. VMware Workstation 17.6简…...

Unity10分钟回顾指南

&#x1f3ae; Unity10分钟回顾指南 欢迎踏上Unity场景创作之旅&#xff01;本教程将带你从零开始&#xff0c;循序渐进地掌握Unity场景制作的全部技能。无论你是游戏开发爱好者还是专业开发者&#xff0c;这份指南都将成为你的得力助手。 第一章&#xff1a;Unity基础认知 1.…...

SeleniumBase - 多合一浏览器自动化框架

手动编写Selenium脚本&#xff0c;繁琐且常遇“掉坑”&#xff1f;SeleniumBase来救场&#xff01;这款基于Selenium的Python框架集测试、爬虫、RPA于一体&#xff0c;支持多浏览器、并行测试、CAPTCHA绕过和智能等待&#xff0c;堪称Web自动化的“瑞士军刀”。不少行业大佬盛赞…...

【人工智能导论】第2.3章知识表示、确定性推理

1、李明的父亲是教师&#xff0c;用谓词逻辑可以表示为Teacher&#xff08;father&#xff08;Liming&#xff09;&#xff09;这里father&#xff08;Liming&#xff09;是&#xff08; &#xff09; A、常量 LIMING B、变元 X未知的可取多个值的对象 C、函数 X的父亲 D、一元…...

【QT】一个界面中嵌入其它界面(一)

在 Qt 中嵌入其他界面通常可以通过以下几种方式实现。以下是详细的步骤说明和示例代码&#xff1a; 方法 1&#xff1a;直接通过布局嵌入子部件 如果目标界面是 QWidget 的子类&#xff0c;可以直接将其添加到父窗口的布局中。 步骤&#xff1a; 创建子界面类&#xff1a; //…...

[学习]POSIX消息队列的原理与案例分析(完整示例代码)

POSIX消息队列的原理与案例分析 文章目录 POSIX消息队列的原理与案例分析摘要关键词一、引言1.1 研究背景与意义1.2 国内外研究现状1.3 研究内容与方法 二、POSIX消息队列的基本原理2.1 消息队列概述2.2 POSIX消息队列的特性2.2 POSIX消息队列的特性2.3 POSIX消息队列的内部机制…...