使用Docker创建并运行一个create-react-app应用(超简单)

创建并运行一个使用 Create React App (CRA) 创建的应用程序的 Docker 容器涉及几个步骤。以下是一个详细的过程,包括创建一个简单的 React 应用、编写 Dockerfile、构建镜像以及运行容器。

步骤 1: 创建一个新的 React 应用

如果你还没有一个 React 应用,可以使用 Create React App 快速创建一个:

npx create-react-app my-react-app
cd my-react-app

步骤 2: 添加 Dockerfile

在你的 React 应用根目录中创建一个名为 Dockerfile 的文件,没有文件扩展名。添加以下内容到你的 Dockerfile 中:

# 使用官方 Node.js 作为构建环境
FROM node:14 AS build# 设置工作目录
WORKDIR /app# 复制 package.json 和 yarn.lock 文件
# 如果不是使用 yarn 进行包管理,去掉 yarn.lock 即可
COPY package.json yarn.lock ./# 安装项目依赖
RUN yarn install# 复制项目文件
COPY . .# 构建应用
RUN yarn build# 运行环境使用 nginx
FROM nginx:stable-alpine# 从构建阶段复制构建产物到 nginx 目录
COPY --from=build /app/build /usr/share/nginx/html# 暴露 80 端口
EXPOSE 80# 启动 nginx
CMD ["nginx", "-g", "daemon off;"]

这个 Dockerfile 使用了多阶段构建:第一阶段使用 Node.js 镜像构建 React 应用,第二阶段使用 nginx 镜像来服务构建产物。

步骤 3: 构建 Docker 镜像

在你的应用根目录下,运行以下命令来构建 Docker 镜像:

docker run -d -p 8080:80 my-react-app

这个命令会在后台运行一个新的容器实例,将容器的 80 端口映射到宿主机的 8080 端口。

步骤 5: 访问应用

现在,你可以通过浏览器访问 http://localhost:8080 来查看你的 React 应用了。

这个过程概述了如何使用 Docker 容器化一个简单的 React 应用。你可以根据需要调整 Dockerfile 中的指令,例如使用不同的基础镜像或暴露不同的端口。

如果在 Docker 容器内部安装了 Nginx,宿主机就不需要再安装 Nginx。容器技术旨在将应用及其依赖打包在一起,从而实现应用的隔离和移植性。因此,只要容器正在运行,并且你已经正确配置了容器内的 Nginx 以及容器和宿主机之间的网络(例如,通过端口映射),你就可以直接使用容器内的 Nginx,无需在宿主机上安装相同的服务。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/45715.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java爬虫安全策略:防止TikTok音频抓取过程中的请求被拦截

摘要 在当今互联网时代,数据采集已成为获取信息的重要手段。然而,随着反爬虫技术的不断进步,爬虫开发者面临着越来越多的挑战。本文将探讨Java爬虫在抓取TikTok音频时的安全策略,包括如何防止请求被拦截,以及如何提高…

RK3568 安卓12 EC20模块NOCONN没有ip的问题(已解决)

从网上东拼西凑找了不少教程,但是里面没有提到rillib.so需要替换,替换掉就可以上网了,系统也有4G图标了。 注意,这个rillib.so是移远提供的。把他们提供的文件放到rk3568_android_sdk/vendor/rockchip/common/phone/lib下&#x…

Andriod Stdio新建Kotlin的Jetpack Compose简单项目

1.选择 No Activity 2.选择kotlin 4.右键选择 在目录MyApplication下 New->Compose->Empty Project 出现下面的画面 Finish 完成

C++——类和对象(中)

文章目录 一、类的默认成员函数二、构造函数三、析构函数四、拷⻉构造函数五、赋值运算符重载1. 运算符重载2. 赋值运算符重载 六、取地址运算符重载const成员函数取地址运算符重载 七、应用:⽇期类实现Date.hDate.cpptest.cpp 一、类的默认成员函数 默认成员函数就…

技术成神之路:设计模式(七)状态模式

1.介绍 状态模式(State Pattern)是一种行为设计模式,它允许一个对象在其内部状态改变时改变其行为。这个模式将状态的相关行为封装在独立的状态类中,并将不同状态之间的转换逻辑分离开来。 2.主要作用 状态模式的主要作用是让一个…

数据结构—链式二叉树-C语言

代码位置:test-c-2024: 对C语言习题代码的练习 (gitee.com) 一、前言: 在现实中搜索二叉树为常用的二叉树之一,今天我们就要通过链表来实现搜索二叉树。实现的操作有:建二叉树、前序遍历、中序遍历、后序遍历、求树的节点个数、求…

SMU Summer 2024 Contest Round 4

SMU Summer 2024 Contest Round 4 2024.7.16 9:00————11:00 过题数3/7 补题数6/7 Made Up H and V Moving Piece Sum of Divisors Red and Green Apples Rem of Sum is Num Keep Connect A - Made Up 题解: 给定三个数组a,b,c&#xf…

MySQL日期和时间相关函数

目录 1. 获取当前时间和日期 2. 获取当前日期 3. 获取当前时间 4. 获取单独的年/月/日/时/分/秒 5. 添加时间间隔 date_add ( ) 6. 格式化日期 date_format ( ) 7. 字符串转日期 str_to_date () 8. 第几天 dayofxx 9. 当月最后一天 last_day ( ) 10. 日期差 datedif…

H. Beppa and SwerChat【双指针】

思路分析&#xff1a;运用双指针从后往前扫一遍&#xff0c;两次分别记作数组a&#xff0c;b&#xff0c;分别使用双指针i和j来扫&#xff0c;如果一样就往前&#xff0c;如果不一样&#xff0c;i–,ans #include<iostream> #include<cstring> #include<string…

SQL server 练习题2

课后作业 作业 1&#xff1a;自己查找方法&#xff0c;将 homework_1.xls 文件数据导入到 SQLServer 的 homework 数据库中。数据导入完成后&#xff0c;把表名统一改为&#xff1a;外卖表 如下所示&#xff1a; 作业 2&#xff1a;找出所有在 2020 年 5 月 1 日至 5 月 31 …

Zookeeper之CAP理论及分布式一致性算法

CAP理论 CAP理论告诉我们&#xff0c;一个分布式系统不可能同时满足以下三种 一致性&#xff08;C:consistency&#xff09;可用性&#xff08;A:Available&#xff09;分区容错性&#xff08;P:Partition Tolerance&#xff09; 这三个基本要求&#xff0c;最多只能同时满足…

python 语法学习 day2

python有七大数据类型, 数据类型转换, 多变量赋值与print间隔, split函数, int用法总结python有七大数据类型&#xff1a; &#xff08;1&#xff09;数字&#xff08;Number&#xff09;&#xff1a;int(整型&#xff0c;长整型)&#xff0c;float(浮点型)&#xff0c;com…

部署k8s 1.28.9版本

继上篇通过vagrant与virtualBox实现虚拟机的安装。笔者已经将原有的vmware版本的虚拟机卸载掉了。这个场景下&#xff0c;需要重新安装k8s 相关组件。由于之前写的一篇文章本身也没有截图。只有命令。所以趁着现在。写一篇&#xff0c;完整版带截图的步骤。现在行业这么卷。离…

SpringBoot中常用的注解及其用法

1. 常用类注解 RestController和Controller是Spring中用于定义控制器的两个类注解. 1.1 RestController RestController是一个组合类注解,是Controller和ResponseBody两个注解的组合,在使 用 RestController 注解标记的类中&#xff0c;每个方法的返回值都会以 JSON 或 XML…

【Android安全】Ubuntu 下载、编译 、刷入Android-8.1.0_r1

0. 环境准备 Ubuntu 16.04 LTS&#xff08;预留至少95GB磁盘空间&#xff0c;实测占94.2GB&#xff09; Pixel 2 XL 要买欧版的&#xff0c;不要美版的。 欧版能解锁BootLoader、能刷机。 美版IMEI里一般带“v”或者"version"&#xff0c;这样不能解锁BootLoader、…

网络安全-网络安全及其防护措施2

6.安全设计和日志 安全审计 安全审计是对系统和网络活动进行检查和记录的过程&#xff0c;确保合规性和安全性。审计过程可以帮助发现潜在的安全漏洞和违规行为&#xff0c;并验证系统配置和操作的正确性。 定期审计 定义&#xff1a;定期检查系统和网络的安全配置和活动记录…

394. 字符串解码 739. 每日温度(LeetCode热题100)

394. 字符串解码 - 力扣&#xff08;LeetCode&#xff09; curr_str&#xff1a;遍历整个字符串时 如果左边有[&#xff0c;且无相应右括号和其匹配&#xff0c;那么curr_str就表示该[到当前位置的解码字符串如果左边的[]已经匹配&#xff0c;或者没有[]&#xff0c;curr_siz…

找不到vcruntime140_1.dll 无法执行的相关解决方法,如何高效率修复vcruntime140_1.dll

当出现“找不到 vcruntime140_1.dll 无法执行”这类提示时&#xff0c;意味着你的系统中的 vcruntime140_1.dll 文件已经缺失或者损坏。为了恢复并正常启动你的程序&#xff0c;你需要对这个 DLL 文件进行修复。接下来&#xff0c;我们将详细介绍如何进行这一操作。 一.找不到v…

数学建模·层次分析法

层次分析法 LAF 定义 评价体系的优劣影响&#xff0c;计算评价指标的权重的一种方法 主观性较强&#xff0c;现在一般不用 主要步骤 关键在于一致性检验和求权值 权重的计算 注意权重之和为1&#xff0c;需要归一化 算数平均法 特征值法 矩阵的一致性检验 为什么要检验…

【C语言】原码、反码、补码详解 -《码上有道 ! 》

目录 原码、反码、补码详解及其在C语言中的应用一、原码&#xff08;Sign-Magnitude&#xff09;1.1 定义与表示1.2 历史来源与作用1.3 示例1.4 C语言示例1.5 代码运行结果 二、反码&#xff08;Ones Complement&#xff09;2.1 定义与表示2.2 历史来源与作用2.3 示例2.4 C语言…