项目完成后，就需要打包编译，其实还有上线部分的内容，但是还没去研究服务器上的配置，例如Nginx之类的，水平太菜，所以先讲讲打包编译吧。
项目是用create-react-app创建的，开发完成后，就可以着手打包了:
npm run build
执行后，项目根目录下会生成一个build文件夹，这个文件夹是用来上线用的。
打包完成
我们来看看
build文件夹结构图（因为没截到图，就借用他人的先）
build结构图
build文件夹中几个重要的：1、
index.html文件，其实就是public文件夹中的index.html文件经过压缩而成的，并且把一些诸如css文件和js文件以及其他的配置文件都替换成了build文件夹中的。2、
manifest.json文件，关于项目整体的一些配置。3、
asset-manifest.json文件，更为重要，里面写的就是我们打包后的css和js文件名，可以看到，文件名在每次重新打包的时候，都会哈希计算一次当做文件名的一部分，这样也就避免命中缓存。4、
static文件夹下放的，就是我们打包好的css和js这些静态资源。
打包后，我们如果直接打开index.html文件，是不行的，会报错，因为正确的做法是在node的服务端以服务器的形式（域名+端口+路径）来访问。
那么该怎么做呢？
我们要在express中把build设置成我们静态资源的地址，并在express中设置中间件，拦截路由，手动渲染index.html。
之前直接用npm start来启动，就是因为webpack把我们的请求给拦截了，做了对应的渲染。
而现在打包后要放到服务器，所以我们要全部使用服务端的端口，就不能再用原来的端口了（默认npm start在3000端口），我们要使用express拦截路由。
在server.js中，因为打包后的资源都在build中，所以我们要把build设置成静态资源地址，通过中间件的形式做一些转发。
//使用node.js自带的path来解决相对路径的问题
const path = require('path')
//上线：
//设置静态资源的地址，因为打包后的资源都在/build路径下，所以我们把/build设置成静态资源地址
//把访问"/"这个路径开头的全部拦截下来，设置成静态资源地址，通过中间件的形式做一些转发
app.use("/",express.static(path.resolve('build')))
//使用中间件设置白名单
app.use(function(req,res,next){
//如果是这两个路径前缀，就不是渲染文件相关的请求，直接next
if (req.url.startsWith('/user/')||req.url.startsWith('/static/')) {
return next
}
//反之，如果不是，就手动渲染index.html文件
return res.sendFile(path.resolve('build/index.html'))
})
接下里，把server启动起来：
nodemon server/server.js
但是，因为我们用node.js自带的path来解决路径查找的问题，但是也会遇到一些情况，例如之前我在写项目的过程中，都是习惯cd到server文件夹底下，然后再nodemon server.js，如果用path后，它就默认认为\路径为....\server\，导致找build的时候变成从server目录下去找，就报错了，这里大家要注意一下。
喜欢像npm start这样启动的，也可以在package.json文件中配置：
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom",
"server": "nodemon server/server.js"
}
不过这是因为这个范例项目我把server也写在项目文件夹里了，所以这样写也可以，实际该怎么启动，依据自己的项目情况。
启动服务后，和原来npm start差不多，只是端口换成server的端口。
这样，所有的请求，都会经过转发和白名单操作，对应需要请求数据的就请求数据，需要渲染文件的就渲染文件。
关于上线，这里简单一提：
1、购买域名。
2、DNS解析到服务器。
3、安装Nginx，配置反向代理。
4、使用pm2管理node进程，后台执行与重启等。
网友评论