部署React项目到Linux服务器

打包

在完成一个使用create-react-app脚手架开发的项目后，在打包之前，需要注意路径问题：

需要明确部署后的访问路径是什么，是根目录还是二级目录。

如果是根目录，在package.json文件中的"homepage"值为"."：

{
  "name": "react-app",
  "homepage": ".",
  ...
}

如果是二级菜单等，需要在"homepage"明确它的路径，如"/child/"：

{
  "name": "react-app",
  "homepage": "/child/",
  ...
}

然后使用npm run build命令打包，会生成一个build文件夹。

上传文件

将打包后的build文件夹的内容上传到存放html的服务器的地方。

如果是apache，一般上传到/htdocs/文件夹下；如果是Ubuntu，一般上传到/var/www/，路径可能有细微差别。

上传方法包括：

1. 使用FileZilla连接Linux主机
2. 使用pscp传输及查看Linux主机文件

域名解析并测试

如果暂时没有域名，可以使用服务器的公网IP直接访问。

如果已经有域名，可将域名解析到此服务器，然后通过域名访问。

打开后测试网站是否正常访问。

可能遇到的问题

在本地一切运行正常，但上传后遇到了：

1. 控制台报错“找不到资源路径”，页面无法访问

   一般为打包时的路径错误，可以从浏览器的DevTools的Network选项卡查看请求出错的路径是什么，对应自己写的路径查看修改。（参考本文开头的打包内容）

2. 部署到二级目录，控制台未报错，页面空白

   出现这种错误时，与项目中使用的react-router-dom有关。

   有2种方法：

   1.） 将BrowserRouter换成HashRouter。

   此方法会造成link后面有哈希符号#(原理查看去掉URL后的哈希符号（井号#）)

   2.）【推荐】继续使用BrowserRouter，加上basename属性，如：

    <BrowserRouter basename='/child'>
   

参考资料

basename: string
The base URL for all locations. If your app is served from a sub-directory on your server, you’ll want to set this to the sub-directory. A properly formatted basename should have a leading slash, but no trailing slash.

来源：https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string