苏州外贸网站建站,用网站做平台有哪些,广告设计专业就业方向,网站后台管理系统登陆一、引言
Nginx 是一个高性能的 HTTP 和反向代理服务器#xff0c;也能够处理 IMAP/POP3/SMTP 服务#xff0c;由 Igor Sysoev 开发并在 2004 年首次公开发布。它以处理静态内容、提供反向代理服务以及其高稳定性、低资源消耗而广受欢迎。Nginx 能够通过非阻塞方式处理多个连…一、引言
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 --nethost my-react-app
这些命令会构建你的 Docker 镜像并在后台运行一个容器并且使用容器的宿主机网络。
