Docker是一个容器化工具,用于加快开发和部署过程,是最流行的容器化解决方案。容器允许我们在相同的环境中运行和开发应用程序,而不管您使用的是什么机器。 - - Docker-compose 是一个用于定义和运行多容器 Docker 应用程序的工具。 - -Nginx是一个 Web 服务器,我们将使用它来提供静态内容,它可以用作反向代理、负载均衡器。 - -React是一个开源的前端 JavaScript 库,用于构建用户界面或用户界面组件。 - - 本教程演示了如何使用 Nginx 使用多阶段构建 Dockerize 一个 React 应用程序。我们将特别关注使用多阶段构建配置生产就绪的映像。

只想看代码的可以在下面找到GitHub链接:

bahachammakhi/docker-react-nginx-blog

创建一个 React 项目:

我们将使用Create react app来生成我们的 react 项目。

• 在特定位置打开终端并运行此命令。

npx create-react-app react-docker

• 进入你的项目目录:

cd 反应码头工人

- -

Docker 文件:

创建 Dockerfile 和 docker-compose.yml

mkdir nginx
touch Dockerfile docker-compose.yml nginx/nginx.conf

**打开 Dockerfile **

# 构建环境
FROM node:13.12.0-alpine 作为构建
工作目录 /app
复制 。 .
润纱
运行纱线构建
# 生产环境
来自 nginx:stable-alpine
COPY - fromu003dbuild /app/build /usr/share/nginx/html
COPY - fromu003dbuild /app/nginx/nginx.conf /etc/nginx/conf.d/default.conf
曝光 80
CMD ["nginx", "-g", "守护进程关闭;"]

这里发生了什么事?

• 我们告诉 Docker 获取 Node 的副本,将其 Linux 发行版指定为 Alpine 并将其命名为 build。为什么选择阿尔卑斯山? Alpine Linux 比大多数发行版基础镜像 (~5MB) 小得多,因此通常会导致镜像更苗条。

• 将我们的工作目录设置为app

• 复制项目到我们的目录

• 运行yarn安装包

• 运行构建脚本生成构建文件

• 告诉 docker 抓取 nginx-alpine 镜像

• 复制构建文件

• 复制nginx配置文件替换默认配置

• 此行仅用于说明我们的应用程序将在端口 80 上工作的文档

• 运行nginx

打开 nginx.conf

server {
listen 80;
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
}

我们只是提到了我们的应用程序静态文件的位置,让 Nginx 在有人向端口 80 发送请求时使用它们。

打开 docker-compose.yml

version: "2"
services:
nginx-react:
container_name: ngixreactapp
build:
context: .
dockerfile: Dockerfile
ports:
- 80:80
environment:
NODE_ENV: production

我们为我们的应用程序命名,提及要使用的 dockerfile,将端口 80 映射到应用程序端口 80,添加一些环境变量。

运行我们的容器

docker-compose up

以分离模式运行容器

docker-compose -d up

如果您使用的是 linux,您需要在您使用的每个 docker 命令上使用 sudo!现在打开http://localhost/你会看到这个: - -