运维记录1——解决在Nginx下部署CRA项目，二级目录不能访问的问题

_ang 发布于2019-07-25 14:36 / 4058人阅读

摘要：根目录访问到了部署阶段，我通常使用作为容器，将项目部署到一个根目录下访问。分析的项目配置默认是跑在根目录下的。解决有一个属性叫做，就是用于解决此类问题。现象网页显示，在请求页面路由如时，该路由的请求状态为。但直接访问则会访问失败。

如果从头开始搭建React项目，create-react-app通常是开发者的首选。毕竟不是谁都有精力去了解WebPack的复杂配置，而CRA将配置隐藏开箱即用的特性必然会受到普遍欢迎。

根目录访问

到了部署阶段，我通常使用nginx作为web容器，将项目部署到一个根目录下访问。如

# nginx配置
server {
  listen 80;
  server_name my.website.com;
  
  ...
  
  location / {
    alias /data/www/react-project/dist;
    index index.html
  }
}

那么只要我们将项目文件放到对应的目录下，重启nginx即可开始访问web页面。

二级目录访问

有时我们有多个web项目，多个项目不可能同时挂在根目录下，所以我们会划分二级目录来分别访问各个web项目。如

http://my.website.com/project1 => 访问react-project1项目

http://my.website.com/project2 => 访问react-project2项目

问题1：CSS等资源加载失败

此时，如果简单将nginx配置的location改为/project1，则会出现网页无法访问的错误。

# nginx配置
server {
  listen 80;
  server_name my.website.com;
  
  ...
  
  # location / {
  location /project1 {
    alias /data/www/react-project/dist;
    index index.html
  }
}

现象

从dev工具可以看出，html文件有取得，但css、js等资源引用失败。css和js的文件路径都是http://my.website.com/static/...（或css)。

分析

CRA(create-react-app)的项目配置默认是跑在根目录下的。如果查看dist目录下的html会发现，所有的css或js文件的引用路径都是/开头的绝对路径。

解决

将打包路径从绝对路径改为相对路径:

# package.json
{
  ...
  "homepage": ".",   // 添加homepage属性，将路径改为当前目录
  ...
}

重新编译后看到，所有的资源文件路径都改过来了。

问题2：加载成功，网页空白

重新上传到服务器，更新dist目录下的文件，重启nginx后访问网页。

现象

结果发现，网页仍然是空白一片。查看html的渲染结果，发现似乎js并没有执行。

分析

在react-router-dom的例子中，通常使用的是BrowserRouter。这种类型的Router在向服务器发送请求时，如果相对于二级目录的路由去指向对应的页面路由，就会找不到资源，因此也就不会渲染。

解决

BrowserRouter有一个属性叫做basename，就是用于解决此类问题。

...
import { Route, BrowserRouter as Router, Switch, Redirect } from "react-router-dom";
...
...
  
    
      
      { routes }
    
  
...

问题3：访问成功，刷新后404

修改以上配置并编译部署，重启nginx后可正常访问网页。但刷新后，网页变为一片空白。

现象

网页显示，在请求页面路由如http://my.website.com/project... 时，该路由的请求状态为404。

分析

还是因为BrowserRouter的问题，之前能正常访问时因为路由中设置了Redirect，所以能访问到根目录并自动跳转到/home。但直接访问则会访问失败。

解决

在nginx配置中加入try_files命令

  location /project1 {
    alias /data/www/react-project/dist;
    # index index.html
    try_files $uri /project1/index.html
  }

这样，在请求$uri时如果找不到对应的资源，会fallback回去加载index.html。

问题解决。

云服务器 GPU云服务器阿里云服务器数据库不能远程访问的问题解决阿里云服务器无法访问80端口的问题访问部署在云服务器的数据库 linux下部署php项目

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/40285.html

记一次基于react、cra2、typescript的pwa项目由开发到部署（三）

摘要：配置反向代理我们的项目已经在服务器上的端口运行着，所以我们需要配置一个反向代理，将我们对服务器的访问反向代理到服务器的。该篇文章为本系列最后一篇文章，因为最近楼主忙于毕设，所以这也是一篇被鸽了很久很久的文章。该文章主要讲的是该项目的部署部分，包括：如何部署将该项目部署到nginx服务器上。为它配置证书，让它运行在https协议上等。项目回顾这是一个基于creat-reac...

Betta 2019-07-25 14:36 评论0 收藏0
creat-react-app/dva静态项目，用nginx部署在次级域名路径（如a.com/sub

摘要：因为要把文件夹部署在一个域名的次级目录，没想到和运维同学一起折腾了一下午。。因为要把dist文件夹部署在一个域名的次级目录，没想到和运维同学一起折腾了一下午。。放在这里备忘，也给后来的同学一些可查的中文资料： 1，dva/cra给你的模板index.html是在public里面的，webpack会原封不动拷到dist，其中引入index.js和index.css都是绝对路径，可以用...

jindong 2019-07-25 14:00 评论0 收藏0
阿里云服务器部署 nodejs + mongodb + nginx 反向代理 + https配置 s

摘要：感谢老师，老师的慕课网教程购买阿里云服务器及域名终端连接阿里云服务器环境输入密码购买时的密码如果出现这个问题的解决方案解决方法查看硬盘挂在情况如果有数据盘的情况下查看硬盘使用情况通过设置快捷登录权限，可以增加几个拥有权限的用户下查感谢 Scott 老师，Scott老师的慕课网教程 https://coding.imooc.com/clas... 1. 购买阿里云服务器及域名 2. ...

张春雷 2019-06-26 17:54 评论0 收藏0
阿里云服务器部署 nodejs + mongodb + nginx 反向代理 + https配置 s

摘要：感谢老师，老师的慕课网教程购买阿里云服务器及域名终端连接阿里云服务器环境输入密码购买时的密码如果出现这个问题的解决方案解决方法查看硬盘挂在情况如果有数据盘的情况下查看硬盘使用情况通过设置快捷登录权限，可以增加几个拥有权限的用户下查感谢 Scott 老师，Scott老师的慕课网教程 https://coding.imooc.com/clas... 1. 购买阿里云服务器及域名 2. ...

jerryloveemily 2019-07-25 14:34 评论0 收藏0
tomcat与nginx的反向代理，https过程分析

摘要：接下来我们要配置这个的端口，这样他们才能运行时端口号不冲突。问题指明不同的端口号访问也太蠢了吧的确很蠢，所以我们要慢慢过渡学习。接下来我们学习用来进行反向代理。阿里云的部分有一些配置的具体过程。一、在linux上部署运行多个tomcat 1、以前的我们虽然说是在linux上，但是windows上也是同样的道理，只不过我们服务器都是选用linux罢了。原先，自己有多个项目需要部署在...

aikin 2019-07-25 14:28 评论0 收藏0