简介

React.js是一个用于创建用户界面的JavaScript库。Facebook与一群独立的程序员和企业一起维护它。React使开发者能够有效地管理其应用程序的状态，并构建可重复使用的用户界面组件。

由于Docker平台的存在，开发者可以在容器中快速构建、分发和操作应用程序。由于应用的容器所提供的轻量级、隔离的环境，应用可能更容易被管理。

Nginx是一个流行的Web服务器和反向代理，用于提供静态内容，代理请求，并执行负载平衡。

先决条件

1. Docker必须安装在你的本地机器上。

React代码？你可以在GitHub上找到它，链接如下。

GitHub存储库

这个资源库包含了在你自己的机器上运行项目的所有必要代码。请随意查看，如果你发现任何你想贡献的东西，请毫不犹豫地提交一个拉动请求。

该网络应用程序看起来像

使用Docker和Nginx运行React应用程序的步骤

1. 克隆包含你的React应用程序的仓库到你的本地机器。

 git clone https://github.com/aliziauddin/easy-parcel.git

2. 导航到项目目录。

cd easy-parcel

3. 创建一个Docker文件，指定基础镜像、应用程序的依赖性和运行应用程序的命令。下面是一个React应用的Docker文件的例子。

FROM node:16 as build WORKDIR /react-appCOPY package*.json ./
  
  
  RUN npm install
  
  
  COPY . .
  
  
  RUN npm run build
  
  
  FROM nginx:1.19COPY ./nginx/nginx.conf /etc/nginx/nginx.confCOPY --from=build /react-app/build /usr/share/nginx/html

4. 创建一个Nginx配置文件，nginx.conf，将请求代理给运行在Web容器中的React应用。下面是一个nginx.conf文件的例子。

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    server {
          listen 80;
          server_name  localhost;
      
          root   /usr/share/nginx/html;
          index  index.html index.htm;
          include /etc/nginx/mime.types;
      
          gzip on;
          gzip_min_length 1000;
          gzip_proxied expired no-cache no-store private auth;
          gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
      
          location / {
                  try_files $uri $uri/ /index.html;
          }
    }
}

文件夹结构将看起来像这样

5. 使用以下命令建立Docker镜像，用你想要的镜像名称替换<image-name>，例如aliziauddin/easyparcel。

docker build -t aliziauddin/easyparcel .

6. 使用以下命令运行服务。

 docker run -d -p 80:80 aliziauddin/easyparcel

80:80可以用任何其他端口代替，例如，3000:80

在命令docker run -d -p 80:80 aliziauddin/easyparcel中，-d和-p是选项或标志。

-d: 这个选项用于在后台作为一个守护程序运行容器。它允许容器在后台运行，与终端分离。

-p: 该选项用于将主机端口映射到容器端口。语法是 -p host_port:container_port。在这种情况下，80:80将主机上的80端口映射到容器中的80端口。这允许外部流量通过访问主机上的80端口到达容器。

7. 打开浏览器，导航到http://localhost，查看由Nginx代理的运行中的React应用。

总结

通过这些步骤，你应该能够使用Docker和Nginx来运行你的React应用。通过使用Docker和Nginx，你可以确保你的React应用在一个一致的环境中运行，易于扩展，并且可以轻松部署。