React 项目搭建与部署，搭建Node服务器

1. 环境配置与项目搭建

   1. 安装node，官网 直接下载
   2. 安装webpack ：

      npm install -g webpack

   3. 安装淘宝镜像(可选)：

      npm install -g cnpm --registry=https://registry.npm.taobao.org

   4. 安装create-react-app：

      cnpm install -g create-react-app   // 全局安装

   5. 创建项目：

      create-react-app my-project   //创建项目

   6. 本地启动项目

      cd my-project/    // 进入到创建的项目文夹
      
      npm start   //启动本地server用于开发（根据package.json文件确认启动命令）

2. 项目文件目录

   |-node_modules             // 项目依赖包

   |-public             // 一般用于存放静态文件

   |-src               // 项目源代码
        |-asserts         // 用于存放静态资源，打包时会经过 webpack 处理

        |-components     // 存放一般组件，一般是该项目公用的无状态组件
        |-containers         // 存放一般容器组件，页面视图

        |-setupProxy.js         // 配置路由文件（自己配置）

        |- serviceWorker        //开发配置

   |-package.json      // 依赖包管理，配置文件

   |-.gitignore   //  Git仓库管理的文件

3. 项目部署

   1. 对项目进行打包：

      npm run build   // 给项目打包

   2. 全局安装serve库，给指定文件夹开启一个服务器

      npm i serve -g    // 全局安装serve库  为某些文件开发服务器

   3. 在本地环境运行打包后的项目

      serve -s build    // 启动服务

4. 搭建node服务器

   1. 在package.json文件配置相关配置项--express

      // package.json文件
      {
        "name": "ajax_server",
        "version": "1.0.0",
        "description": "",
        "main": "server.js",
        "scripts": {
          "test": "echo \"Error: no test specified\" && exit 1",
          "start": "node server.js"
        },
        "author": "",
        "license": "ISC",
        "dependencies": {
          "axios": "^0.20.0",
          "express": "^4.17.1"
        }
      }

   2. 借助node环境安装node_modules依赖包

      npm install   // 安装package.json文件配置的依赖项

      

   3. 在server.js 文件配置服务代码

      const express = require('express')
      const app = express()
      
      app.use((request,response,next)=>{
      	console.log('是否请求服务器',request.get('Host'),request.url);
      	next()
      })
      
      app.get('/test',(request,response)=>{
      	console.log("我成功发送了请求")
      	const test = {
      		id:001,
      		name: "testName"
      	}
      	response.send(test)
      })
      
      app.listen(5000,(err)=>{
      	if(!err) console.log('服务器1启动成功了,请求测试信息地址为：http://localhost:5000/test');
      })

       ​​执行node + 服务文件： node server.js  请求成功

   4. 到目前为止就开启了地址为 http://localhost:5000/test 的服务器，就可以使用啦！

5. 完结...

 相关学习：React 学习_韦金-CSDN博客