当前位置: 博客 /  Host  / 部署React项目到Linux服务器

部署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直接访问。

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

记录类型 主机记录 记录值
A * 服务器公网IP
A @ 服务器公网IP
A www 服务器公网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

- END -