creat-react-app/dva静态项目，用nginx部署在次级域名路径（如a.com/sub

jindong 发布于2019-07-25 14:00 / 2704人阅读

摘要：因为要把文件夹部署在一个域名的次级目录，没想到和运维同学一起折腾了一下午。。

因为要把dist文件夹部署在一个域名的次级目录，没想到和运维同学一起折腾了一下午。。

放在这里备忘，也给后来的同学一些可查的中文资料：

1，dva/cra给你的模板index.html是在public里面的，webpack会原封不动拷到dist，其中引入index.js和index.css都是绝对路径，可以用webpack ejs插件生成htmnl，因为我用了dva，不太想改webpack 配置太多，这里选用直接手去掉前缀/变成相对路径

2, 项目里面使用了react-i18next, locale文件是放到public里面的，配置locale初始化的时候根据环境变量修改下引入目录是／还是／sub／

3，路由react-router匹配的prefix前缀

export const browserHistory = useRouterHistory(createHistory)({
  basename: process.env.PUBLIC_PATH || "/",
})

如果是dva
import { createHistory } from "history"
import { useRouterHistory } from "react-router"

const app = dva({
  history: browserHistory,
});

小坑一个！
dva里面的路由跳转会这么写:

import { browserHistory } from "dva/router";
browserHistory.push("some/route")

由于我们自定义了history，这样会失效, 所以一定记得要import刚才export出来的history，而不是dva默认的那个！

4，webpack设置publickPath：/sub/

5，nginx配置：

server {
    listen 80;
    server_name www.abc.com;
    root /项目／root地址／不带sub;

    location /sub {
        try_files $uri $uri/ /sub/index.html;
    }
}

搞定～

edit: 有可能会遇到的坑

dva的subscription会推荐 if (pathname === "/path"), 加上publicPath之后会匹配失败

pathToRegexp 生成的表达式是严格匹配，会跟publicPath匹配失败

解决也很简单根据环境变量更改匹配规则即可。

混合云服务器托管部署在云服务器上的网站路径如何在云vps部署项目如何在云主机部署项目在linux上部署java项目

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

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

拿Nginx 部署你的静态网页

摘要：关联本地文件夹和远程仓库，注意地址是你的地址哦上面的后面三点就是，添加到码云仓库，相信大家都知道。这里不能克隆到的，需要把服务器本机的公钥添加到码云上面。 emmmm，作为一个前端开发时刻想着，怎么把自己写的东西，丢到自己的服务器上面，然后展示给别人看。下面我就简单直白的写下，如何用 Nginx 部署你的静态网站。事前准备云服务器，（我的是阿里云）码云或者 gihub （用来存...

hikui 2019-07-25 14:00 评论0 收藏0
拿Nginx 部署你的静态网页

摘要：关联本地文件夹和远程仓库，注意地址是你的地址哦上面的后面三点就是，添加到码云仓库，相信大家都知道。这里不能克隆到的，需要把服务器本机的公钥添加到码云上面。 emmmm，作为一个前端开发时刻想着，怎么把自己写的东西，丢到自己的服务器上面，然后展示给别人看。下面我就简单直白的写下，如何用 Nginx 部署你的静态网站。事前准备云服务器，（我的是阿里云）码云或者 gihub （用来存...

arashicage 2019-08-20 18:31 评论0 收藏0
拿Nginx 部署你的静态网页

摘要：关联本地文件夹和远程仓库，注意地址是你的地址哦上面的后面三点就是，添加到码云仓库，相信大家都知道。这里不能克隆到的，需要把服务器本机的公钥添加到码云上面。 emmmm，作为一个前端开发时刻想着，怎么把自己写的东西，丢到自己的服务器上面，然后展示给别人看。下面我就简单直白的写下，如何用 Nginx 部署你的静态网站。事前准备云服务器，（我的是阿里云）码云或者 gihub （用来存...

harriszh 2019-08-05 11:46 评论0 收藏0
服务器从安装到部署全过程（二）

摘要：上一篇文章中大概尝试安装的一些过程以及在配置中出现的问题还有一些解决方式，那么在本次过程尝试中，将进一步进行服务器的基础配置，以及前端应用部署经过上次已经安装至服务器中了，在这里面主要介绍一下部署相关所需要的配置，例如监听端口服务转发静态资 OK! 上一篇文章中大概尝试安装mysql、nginx、nodeJs、pm2 的一些过程以及在配置中出现的问题还有一些解决方式，那么在本次过程尝...

cgspine 2019-07-31 15:06 评论0 收藏0
服务器从安装到部署全过程（二）

摘要：上一篇文章中大概尝试安装的一些过程以及在配置中出现的问题还有一些解决方式，那么在本次过程尝试中，将进一步进行服务器的基础配置，以及前端应用部署经过上次已经安装至服务器中了，在这里面主要介绍一下部署相关所需要的配置，例如监听端口服务转发静态资 OK! 上一篇文章中大概尝试安装mysql、nginx、nodeJs、pm2 的一些过程以及在配置中出现的问题还有一些解决方式，那么在本次过程尝...

zhisheng 2019-08-01 10:24 评论0 收藏0