Create React App从使用到Docker部署
一、介绍
Create React App 是 React 脚手架,它帮我们可以快速生成项目的工程化结构,脚手架让项目从搭建到开发再到部署,整个流程变得快速和便捷。
二、安装
Create React App 是官网的一个工具,通常使用全局安装,执行下面命令即可。如下 :
npm i -g create-react-app
可以使用下面命令,查看 Create React App 安装的版本
create-react-app -V
三、创建项目
在安装好 React 脚手架后,就可以创建项目啦,cmd 进入存放项目的文件下(这里在桌面创建了个 project 文件夹)
接着,执行下面命令,最后出现 happy hacking 说明创建成功(注意:目录名不要使用大写)
create-react-app helloworld
四、React+TS
Create React App 还可以创建关于 TS 项目的模板,只需要在命令后面加 --template typescript 即可,如下:
create-react-app tsfirst --template typescript
使用 vs code 打开创建的 tsfirst 项目,可以看得到不同的是 js 文件的后缀变成了 tsx,根目录下面也多了个 tsconfig.json 文件
五、启动项目
使用 react 脚手架创建的项目,默认本身是一个官方的 demo,可以直接运行起来的一个小网站,在 helloworld 文件下,执行 npm start 命令,即可启动项目,通过控制台可以看到访问的地址。如下
浏览器访问 localhost:3000 ,可以看到一个简单的官网 demo 网页
六、发布项目
为什么要发布项目呢,因为在 React 项目内通常会有 jsx 文件或者高版本的 ES ,这是旧版本浏览器无法识别运行,我们需要对其进行转换为浏览器可以识别的 js
在项目文件夹内 helloworld 内,执行下面命令即可发布项目,发布完成可以看到多了一个 build 文件夹,这里面即是我们发布的项目文件
npm run build
七、运行项目
对于发布出来的 build 文件夹内发布的文件,不会直接扔到产线,通常我需要本地运行进行预览,虽然是浏览器可以识别的文件,但是也不能直接运行,这需要借助 web server ,这里我们以 serve 为例
7.1 安装 serve
执行下面命令,即可安装 serve,这里可以使用全局安装
npm i serve -g
7.2 启动项目
serve 安装完成后,执行下面命令,即可启动发布的文件,其语法为 serve [目录],如果就在 build 文件内,直接执行 serve 即可
serve build
浏览器输入 localhost:3000 ,可以看到访问正常
八、部署到 Docker
8.1 dockerignore
在项目根目录下面创建 .dockerignore 文件,内容如下:
**/node_modules
**/build
8.2 Dockerfile
在项目根目录下面创建 Dockerfile 文件,内容如下:
FROM node:alpine AS prdWORKDIR '/app'COPY package.json .
RUN npm installCOPY . .
RUN npm run buildCMD ["npm","start"]
8.3 构建镜像
将项目源文件上传到服务器,dockerignore 内的文件夹可以忽略。使用下面命令,构建 react 应用程序的镜像,然后使用 docker images 查看一下 build 成功的镜像,如下:
docker build -t tsfirst .
docker images
8.4 启动容器
使用下面命令启动容器,然后使用 ps 命令查看启动的容器,如下:
docker run -d -p 3000:3000 --restart=always tsfirst
8.5 访问程序
容器启动成功后,访问地址 http://192.168.184.130:3000/ 可以看到是成功的
Create React App从使用到Docker部署相关推荐
- 【翻译】基于 Create React App路由4.0的异步组件加载(Code Splitting)
基于 Create React App路由4.0的异步组件加载 本文章是一个额外的篇章,它可以在你的React app中,帮助加快初始的加载组件时间.当然这个操作不是完全必要的,但如果你好奇的话,请随 ...
- 在 .NET Core 5 中集成 Create React app
翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] 本文演示了如何将 Crea ...
- 如何使用Create React App DevOps自动化工作中所有无聊的部分
by James Y Rauhut 詹姆士·鲁豪(James Y Rauhut) 如何使用Create React App DevOps自动化工作中所有无聊的部分 (How I automate al ...
- 深入浅出 Create React App
本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...
- Create React App来搭建react项目
版本过旧请参考此网址更新:Getting Started | Create React App npx create-react-app my-app 备注:react使用比较自由,不限制多或者少,愿 ...
- Create React App 2.0 华丽登场
贺! Create React App 2.0 在 10/02 正式发布 ?????? Create React App 是由官方所维护的开发工具,主要提供了专属于 React 开发环境的前置工作.简 ...
- Create React App 2.0 正式发布:Babel 7、webpack 4 等
英文原文:Create React App 2.0: Babel 7, Sass, and More – React Blog 以下是简要翻译 React 本身是没有附带任何编译工具的,如果没有测试运 ...
- Create React App proxy配置
最近又吃了没文化的亏(哭晕在洗手间≧ ﹏ ≦) 做后台管理系统的时候,需要调一个易连云打印小票的接口, 项目框架是 Create React App+typescript,后端是node.js 本媛负 ...
- Vite 3.0 vs. Create React App:比较和迁移指南
Create React App (CRA) 在 React 社区及其整个生态系统的发展中发挥了关键作用. 在突发奇想构建本地 React 开发环境时,它是不同技能的开发人员的首选工具. CRA 拥有 ...
最新文章
- python自动化测试xpath_Selenium自动化测试实例基于python
- 0810 - 代码,还是得一行行写
- Lines色线halcon算子,持续更新
- php 编写mysql_php编写数据写入mysql问题
- 基于点云的三维重建_香港科技大学王煜教授:深度学习在物体三维重建中的应用...
- Linux下NTP时间同步客户端配置
- Process, Thread, STA, MTA, COM object
- C#虚基类继承与接口的区别
- 非线性系统 知识梳理
- 如何制作和使用自签名证书
- spring aop原理
- PNAS | 富含亮氨酸重复序列延伸蛋白调节拟南芥耐盐性
- Egyptian Miracle Technical Service Support
- Python特殊运算符号(幂运算,除法运算)
- java入门第二季--面向对象实现人类说话,中国人说汉语,美国人说英语
- Found duplicate column(s) when inserting into hdfs://nameservice1/origin_data/events_7/data: `dt`;
- codeforces CodeTON Round 1 (Div. 1 + Div. 2, Rated, Prizes) Editorial前三题讲解
- 网络 3.0 路由器概述
- Python | 使用 Python 分析《我不是药神》豆瓣电影短评
- leetcode 916