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

Nginx+React在Docker中实现项目部署

一、引言

Nginx 是一个高性能的 HTTP 和反向代理服务器,也能够处理 IMAP/POP3/SMTP 服务,由 Igor Sysoev 开发并在 2004 年首次公开发布。它以处理静态内容、提供反向代理服务以及其高稳定性、低资源消耗而广受欢迎。Nginx 能够通过非阻塞方式处理多个连接,使其成为管理高并发请求的理想选择。此外,Nginx 还支持负载均衡和邮件代理,以及通过模块扩展更多功能,如 WebSockets 和流媒体支持。

React 是由 Facebook 开发并在 2013 年开源的 JavaScript 库,用于构建用户界面。它引入了组件化的思想,允许开发者通过封装组件来构建复杂的 UI,每个组件管理自己的状态,从而简化了开发和维护过程。React 的声明式设计使得创建交互式 UI 变得更简单,开发者只需为每个状态设计视图,React 会在数据变化时高效更新和渲染组件。React 还采用了 Virtual DOM 来提升性能,通过在内存中缓存 DOM 的副本,只将实际发生变化的部分应用于真实的 DOM,从而达到高效更新 UI 的目的。

将 Nginx 与 React 结合使用,可以为用户提供高性能和高效率的 Web 应用体验。Nginx 作为前端的 Web 服务器托管 React 构建的静态文件,并作为反向代理来转发 API 请求到后端服务。这种架构模式在现代 Web 开发中非常常见,既利用了 Nginx 的高性能和稳定性,也充分发挥了 React 在构建用户界面方面的强大能力,是一种有效的前后端分离部署方案。

二、编写 Dockerfile

接下来,我们将创建一个 Dockerfile 来定义如何构建 Docker 镜像。在你的 React 项目根目录下创建一个 Dockerfile

# 使用官方 Ubuntu 基础镜像
FROM ubuntu:24.04# 安装 Node.js 和 npm
RUN apt-get update && \apt-get install -y curl gnupg && \curl -sL https://deb.nodesource.com/setup_20.x | bash - && \apt-get install -y nodejs# 安装 Nginx
RUN apt-get install -y nginx && \apt-get clean && \rm -rf /var/lib/apt/lists/*# 设置工作目录
WORKDIR /app# 复制应用程序文件
COPY . .# 安装应用程序依赖
RUN npm install# 构建应用程序
RUN npm run build# 将构建好的 React 应用复制到 Nginx 的目录下
RUN cp -r build/* /var/www/html/# 复制 Nginx 配置文件到容器
COPY ./default.conf /etc/nginx/sites-available/default# 映射出来的 Nginx 配置目录
VOLUME /etc/nginx/sites-enabled# 暴露 80 端口
EXPOSE 80# 启动 Nginx 服务器
CMD ["nginx", "-g", "daemon off;"]

三、编写Nginx配置文件

server {listen 80; # 代理默认端口,可改server_name localhost;root /var/www/html;index index.html;location / {try_files $uri $uri/ /index.html;}# 代理 /api/v1/ 到后端服务location /api/v1/ {proxy_pass http://127.0.0.1:5000/api/v1/; # 你的后端暴露位置proxy_http_version 1.1;proxy_set_header Upgrade $http_upgrade;proxy_set_header Connection 'upgrade';proxy_set_header Host $host;proxy_cache_bypass $http_upgrade;}location = /favicon.ico { log_not_found off; access_log off; }location = /robots.txt { log_not_found off; access_log off; allow all; }location ~* \.(css|gif|ico|jpeg|jpg|js|png)$ {expires max;log_not_found off;}
}

四、构建和运行 Docker 容器

现在,你已经有了 Dockerfile 和 Nginx 的配置文件,是时候构建你的 Docker 镜像,并运行它了:

docker build -t my-react-app . docker run -d --net=host my-react-app

这些命令会构建你的 Docker 镜像,并在后台运行一个容器,并且使用容器的宿主机网络。

相关文章:

Nginx+React在Docker中实现项目部署

一、引言 Nginx 是一个高性能的 HTTP 和反向代理服务器,也能够处理 IMAP/POP3/SMTP 服务,由 Igor Sysoev 开发并在 2004 年首次公开发布。它以处理静态内容、提供反向代理服务以及其高稳定性、低资源消耗而广受欢迎。Nginx 能够通过非阻塞方式处理多个连…...

Centos 7.5 安装 NVM 详细步骤

NVM(Node Version Manager)是一个用于管理Node.js版本的工具,它可以让你轻松地在多个版本之间切换。NVM 通过下载和管理 Node.js 的多个版本,为用户提供了一种灵活的方式来使用不同版本的 Node.js。如果你需要更多关于NVM的信息&a…...

【python】绘制春节烟花

一、Pygame库春节烟花示例 下面是一个使用Pygame实现的简单春节烟花效果的示例代码。请注意,运行下面的代码之前,请确保计算机上已经安装了Pygame库。 import pygame import random import math from pygame.locals import *# 初始化pygame pygame.ini…...

ChatPromptTemplate和AI Message的用法

ChatPromptTemplate的用法 用法1: from langchain.chains import LLMChain from langchain_core.output_parsers import StrOutputParser from langchain_core.prompts import ChatPromptTemplate from langchain_community.tools.tavily_search import TavilySear…...

Terraform实战(三)-在AWS上尝试Terraform的Vault Provider

使用自Terraform 0.8起添加的Vault Provider后,aws云基础设施尝试从Vault而不是tfvars或环境变量中读取AWS凭证。 1 什么是vault? vault是一种由Hashicorp发布的用于管理机密信息的工具。 2 aws使用Terraform的Vault Provider 2.1 创建静态密钥 以开…...

【Nicn的刷题日常】之有序序列合并

1.题目描述 描述 输入两个升序排列的序列,将两个序列合并为一个有序序列并输出。 数据范围: 1≤�,�≤1000 1≤n,m≤1000 , 序列中的值满足 0≤���≤30000 0≤val≤30000 输入描述…...

PostgreSql与Postgis安装

POstgresql安装 1.登录官网 PostgreSQL: Linux downloads (Red Hat family) 2.选择版本 3.安装 ### 源 yum install -y https://download.postgresql.org/pub/repos/yum/reporpms/EL-7-x86_64/pgdg-redhat-repo-latest.noarch.rpm ### 客户端 yum install postgresql14 ###…...

【Spring连载】使用Spring Data访问Redis(九)----Redis流 Streams

【Spring连载】使用Spring Data访问Redis(九)----Redis流 Streams 一、追加Appending二、消费Consuming2.1 同步接收Synchronous reception2.2 通过消息监听器容器进行异步接收Asynchronous reception through Message Listener Containers2.2.1 命令式I…...

MySQL:从基础到实践(简单操作实例)

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 下载前言一、MySQL是什么?二、使用步骤1.引入库2.读入数据 提交事务查询数据获取查询结果总结 下载 点击下载提取码888999 前言 在现代信息技术的世界…...

Flink流式数据倾斜

1. 流式数据倾斜 流式处理的数据倾斜和 Spark 的离线或者微批处理都是某一个 SubTask 数据过多这种数据不均匀导致的,但是因为流式处理的特性其中又有些许不同 2. 如何解决 2.1 窗口有界流倾斜 窗口操作类似Spark的微批处理,直接两阶段聚合的方式来解决…...

零基础学编程系列,从入门到精通,中文编程开发语言工具下载,编程构件容器件之控制面板构件用法

零基础学编程系列,从入门到精通,中文编程开发语言工具下载,编程构件容器件之控制面板构件用法 一、前言 编程入门视频教程链接 https://edu.csdn.net/course/detail/39036 编程工具及实例源码文件下载可以点击最下方官网卡片——软件下载…...

使用PowerBI 基于Adventure Works案例分析

Adventure Works案例分析 前言 数据时代来临,但一个人要顺应时代的发展是真理。 数据分析的核心要素 那数分到底是什么? 显然DT 并不等同于 IT,我们需要的不仅仅是更快的服务器、更多的数据、更好用的工具。这些都是重要的组成部分&…...

人工智能之估计量评估标准及区间估计

评估估计量的标准 无偏性:若估计量( X 1 , X 2 , ⋯   , X n X_1,X_2,\cdots,X_n X1​,X2​,⋯,Xn​)的数学期望等于未知参数θ,即 E ( θ ^ ) = θ E(\hat\theta)=\theta E(θ^)=θ 则称 θ ^ \hat\theta θ^为θ的无偏估计量。 估计量 θ ^ \hat\theta θ^的值不一定就是…...

Ubuntu权限相关命令

文章目录 文件夹/文件带锁(图标) 解锁无密码访问文件/目录sudo usermod -aG sudo your_username其他后记 命令参考: https://www.cnblogs.com/alongdidi/p/linux_ownership_permission.html 文件夹/文件带锁(图标) 解锁 递归解锁当前路径下的所有文件夹以及文件(包括子文件)su…...

RTE2023第九届实时互联网大会:揭秘未来互联网趋势,PPT分享引领行业新思考

随着互联网的不断发展,实时互动技术正逐渐成为新时代的核心驱动力。 在这样的背景下,RTE2023第九届实时互联网大会如期而至,为业界人士提供了一个探讨实时互联网技术、交流创新理念的绝佳平台。 本文将从大会内容、PPT分享价值等方面&#…...

Hadoop-生产调优

第1章 HDFS-核心参数 1.1 NameNode内存生产配置 1)NameNode 内存计算 每个文件块大概占用 150 byte,一台服务器 128G 内存为例,能存储多少文件块呢? 128 * 1024 * 1024 * 1024 / 150byte ≈ 9.1 亿G MB KB Byte 2&#xff09…...

Elasticsearch基于分区的索引策略

分区索引,或者更常见的说法,基于分区的索引策略,是一种按照特定规则(如时间、地理位置、业务线等)将数据分散到多个不同的索引中的方法。这种做法可以提高Elasticsearch的性能和可管理性,尤其是在处理大量数…...

ASP.NET Core MVC 控制查询数据表后在视图显示

如果是手动写代码&#xff0c;不用VS自带的一些控件&#xff0c;那比较简单的方式就是把查询的数据集&#xff0c;逐条赋给对象模型&#xff0c;再加到List&#xff0c;最后在控制加到 ViewBag&#xff0c;视图循环显示ViewBag变量 控制器代码 List<Users> list new Li…...

C语言第二十弹---指针(四)

✨个人主页&#xff1a; 熬夜学编程的小林 &#x1f497;系列专栏&#xff1a; 【C语言详解】 【数据结构详解】 指针 1、字符指针变量 2、数组指针变量 2.1、数组指针变量是什么&#xff1f; 2.2、数组指针变量怎么初始化 3、⼆维数组传参的本质 4、函数指针变量 4.1…...

常用排序算法(Java版本)

1 引言 常见的排序算法有八种&#xff1a;交换排序【冒泡排序、快速排序】、插入排序【直接插入排序、希尔排序】、选择排序【简单选择排序、堆排序】、归并排序、基数排序。 2 交换排序 所谓交换&#xff0c;就是序列中任意两个元素进行比较&#xff0c;根据比较结果来交换…...

React Native 开发环境搭建(全平台详解)

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

【Java学习笔记】Arrays类

Arrays 类 1. 导入包&#xff1a;import java.util.Arrays 2. 常用方法一览表 方法描述Arrays.toString()返回数组的字符串形式Arrays.sort()排序&#xff08;自然排序和定制排序&#xff09;Arrays.binarySearch()通过二分搜索法进行查找&#xff08;前提&#xff1a;数组是…...

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

STM32标准库-DMA直接存储器存取

文章目录 一、DMA1.1简介1.2存储器映像1.3DMA框图1.4DMA基本结构1.5DMA请求1.6数据宽度与对齐1.7数据转运DMA1.8ADC扫描模式DMA 二、数据转运DMA2.1接线图2.2代码2.3相关API 一、DMA 1.1简介 DMA&#xff08;Direct Memory Access&#xff09;直接存储器存取 DMA可以提供外设…...

在 Nginx Stream 层“改写”MQTT ngx_stream_mqtt_filter_module

1、为什么要修改 CONNECT 报文&#xff1f; 多租户隔离&#xff1a;自动为接入设备追加租户前缀&#xff0c;后端按 ClientID 拆分队列。零代码鉴权&#xff1a;将入站用户名替换为 OAuth Access-Token&#xff0c;后端 Broker 统一校验。灰度发布&#xff1a;根据 IP/地理位写…...

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

高等数学(下)题型笔记(八)空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

WEB3全栈开发——面试专业技能点P2智能合约开发(Solidity)

一、Solidity合约开发 下面是 Solidity 合约开发 的概念、代码示例及讲解&#xff0c;适合用作学习或写简历项目背景说明。 &#x1f9e0; 一、概念简介&#xff1a;Solidity 合约开发 Solidity 是一种专门为 以太坊&#xff08;Ethereum&#xff09;平台编写智能合约的高级编…...

JDK 17 新特性

#JDK 17 新特性 /**************** 文本块 *****************/ python/scala中早就支持&#xff0c;不稀奇 String json “”" { “name”: “Java”, “version”: 17 } “”"; /**************** Switch 语句 -> 表达式 *****************/ 挺好的&#xff…...

OPENCV形态学基础之二腐蚀

一.腐蚀的原理 (图1) 数学表达式&#xff1a;dst(x,y) erode(src(x,y)) min(x,y)src(xx,yy) 腐蚀也是图像形态学的基本功能之一&#xff0c;腐蚀跟膨胀属于反向操作&#xff0c;膨胀是把图像图像变大&#xff0c;而腐蚀就是把图像变小。腐蚀后的图像变小变暗淡。 腐蚀…...