react + flask web应用开发-react环境部署

react环境部署

本文档在fedora 34环境中进行部署，理论上所有RPM系Linux系统流程相同。

npm 环境准备

1、nvm脚本下载执行
在命令行执行以下命令安装nvm
curl -o- https://ghproxy.com/https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | sed -e 's|https://github.com|https://ghproxy.com/https://github.com|g' -e 's|https://raw.githubusercontent.com|https://ghproxy.com/https://raw.githubusercontent.com|g' | bash

sed 的作用是将install.sh脚本中国内限制访问的地址更换为代理地址，可根据实际需要进行更改。

2、nvm环境变量配置
执行以下命令将nvm命令配置到环境变量中
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"
source ~/.bashrc
export NVM_NODEJS_ORG_MIRROR=https://npmmirror.com/mirrors/node/

node安装

1、安装指定版本的node并使用
nvm install --no-progress --latest-npm --lts
nvm use --lts

–lts表示使用最新的长期支持版本，可替换为指定的node版本

2、配置npm软件源
npm config set registry 'https://registry.npmmirror.com'
3、node、npm版本查看
node -v && npm -v

4、安装脚手架
npm install -g create-react-app

demo 搭建验证

1、使用脚手架初始化应用
create-react-app demo

demo 是react项目名称

目录结构如下：

node_module：存放项目运行依赖的node组件
package.ison：存放项目的一些信息，包括项目名称、版本、依赖等
package-lock.json：版本锁定文件
public：存放网页文件
README.md：readme文件
src：存放项目源码

2、react 应用启动
npm start