React打包部署

笔记来自
首屏优化

前言
脚手架配置文件是隐藏的，需要先使用命令显示，怎么显示查看【react-router】笔记

前文已经有的配置

• 请求跨域配置，查看【react】笔记
• 热加载的配置，查看【react-router】笔记

打包配置

• 打包默认的文件夹叫build，如何改名

// config/paths.js

module.exports = {
  // 修改这里就行的参数就行
  appBuild: resolveApp('tt'),
  ...
};

• 打包后的文件路径有误

// 路径错误原因，查看打包文件的index.html
// <script src="/static/js/main.dbaa987b.chunk.js"></script>
// 可以看到打包出来的js的访问路径是 localhost/static/js/main.dbaa987b.chunk.js
// 但实际上应该是 localhost/打包的文件夹名字/static/js/main.dbaa987b.chunk.js
// 这个错误跟vue的脚手架错误是一样的，应该把打包配置进行修改让结果是
// <script src="/打包的文件夹名字/static/js/main.dbaa987b.chunk.js"></script>

// scripts/builds.js
const paths = require('../config/paths');
// 在引入paths的代码后直接修改publicUrlOrPath参数
paths.publicUrlOrPath = "/tt/";
// 再次打包就可以了
// 把打包的整个文件夹丢入nginx/html文件夹里，然后修改nginx.config就行

部署

• 因为前面已经把跨域都搞定了，现在只要找个服务器把打包的文件放进去就行，常见的，最小白的服务器有nginx，可以直接在网上下载安装包

• 解压完nginx的安装包之后，把dist文件放在html文件夹里，然后配置nginx.conf文件

server {
    listen       80;
    server_name localhost;  
    underscores_in_headers on;
    location  / {
	try_files $uri $uri /dist/index.html;
    }
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
	root   html;
    }
}

• 然后双击启动nginx.exe，然后打开浏览器访问【http://localhost/】就可以了
• 如果有购买外网云虚拟机，去云虚拟机上安装一个nginx，也是放进去直接把打包文件夹放进去，然后开启nginx服务，访问【http://外网ip或域名/】
• 可以同时部署无限个项目的，那就不能用根目录了，因为根目录只有一个，查看【nginx/nginx安装】笔记