Giters

zuiidea / antd-admin

An excellent front-end solution for enterprise applications built upon Ant Design and UmiJS

Home Page:https://antd-admin.zuiidea.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

项目部署

zuiidea opened this issue · comments

commented

因为项目中使用到了browserHistory，所以build之后需要部署到服务器上

nginx配置示例：

server
	{
		listen       666;
		server_name 47.92.30.98;
		root  /home/www/antd-admin/dist;

		location /api {
			 proxy_pass http://localhost:8000/api;
		}

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

演示地址：http://47.92.30.98:666

commented

可以了，部署到linux的nginx，我用windows下的不用安装的nginx不行，
不知道是因为不安装还是因为没配置
index index.html;
try_files $uri $uri/ /index.html;

commented

listen 80;
server_name localhost;

    #charset koi8-r;

    #access_log  logs/host.access.log  main;

    location / {
        root   html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

	location /api {
		proxy_pass http://localhost:8000/api;
		proxy_set_header Host $host;
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	}

登录的时候还是闪一下就404，我把打包好的dist目录下面的文件直接放到nignx里面的html下面了

commented

@yanghong1105
qq 20170509175425

去掉这个看下root html;

commented

按照楼主说的nginx已经配置好，显示登录页，但是会报错，这怎么解决
XMLHttpRequest cannot load http://localhost:8000/api/v1/userInfo. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.
20login:1 XMLHttpRequest cannot load http://localhost:8000/api/v1/user/login. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

commented

@yanghong1105 src/config.js 里 baseURL改成你的IP和端口

commented

谢谢楼主，已经和后台连起来了，但是在nginx里面打开后样式都是乱的，这是怎么回事

commented

截图看下

commented

调好了，谢谢

commented

为什么我现在已经请求成功了，但是表格里面没有数据

commented

@yanghong1105
截图下，你问的不清楚

远程部署要有服务端才有数据的

commented

@yanghong1105 你先过一下源码吧，巩固一下基础

commented

8000又8000，换个端口

commented

@FatFatFox 我的是mac,昨晚500之后403,发现是权限问题,不过500具体是什么原因忘了

commented

@FatFatFox


#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       666;
        server_name  localhost;
        root   /Users/jackple/Documents/projects/antd-admin/dist;
        #root   html;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location /api {
			 proxy_pass http://localhost:3000/api;
		}

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

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}
    include servers/*;
}
commented

@FatFatFox 是本机配置的问题

commented

部署到nginx代理中，可以打开登陆界面，但是就是无法登陆。望各位大侠指点。
我的配置如下：
环境：centos 7
baseURL: 'http://192.168.0.157:8080/api/v1', //修改源文件 src/utils/config.js,并把端口改为8080.

包文件： 通过 npm run build 把 antd-admin-master项目build成 dist目录下的所有文件。然后把dist目录下的所有文件，都放到 服务器的 /opt/ngnix/node-source/dist-8080; 目录。

nginx 配置如下：
server {
listen 666;
server_name 192.168.0.157;

    #charset koi8-r;
    root /opt/ngnix/node-source/dist-8080;

    #access_log  logs/host.access.log  main;

    location /api {
         proxy_pass   http://localhost:8080/api;
    }
    location / {
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
    }
	
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

在浏览器中访问：http://192.168.0.157:666 ，进入登陆界面，输入账号 和密码后如下图：
image

望各位大侠指点。非常感谢！

commented

应该是请求666才对，改baseurl

commented

config.js里面根据nodeenv判断一下，再修改端口打dev和build就不用手动改了

commented

楼上的大侠，你说的是，我只要在bashURL 把端口改成 666，

然而，在nginx中依然是 proxy_pass http://localhost:8080/api;
是這个意思吗？

commented

嗯嗯

commented

依然不行：
bashURL ：http://192.168.0.157:666/api/v1

nginx的配置：
image

结果登陆的时候，依然不行，报 异常网关：
image
异常

commented

你用postman先试试？

commented

谢谢各位大侠的指点，我先去尝试，如有问题，还望继续指点。

commented

@FatFatFox 如果没有运行开发环境npm run dev，肯定不能访问啊，既然是部署，接口就应该代理成线上的真正的接口，如

location /api {
		 proxy_pass http://example.com:8001/api;
	}

如果为了演示也需要继续用这个，可以运行npm run dev，再把部署的项目接口代理到8000端口上，即是

location /api {
		 proxy_pass http://localhost:8000/api;
	}
commented

我明白了！服务器上要运行一套开发环境(npm run dev)，还要运行一套nginx（npm run build的dist）。
我登陆验证请求http://192.168.0.157:666/api/v1/user/login
其实请求到服务端的开发环境（后端）上做校验的！而不是请求到nginx上校验！

nginx服务器上其实不提供用户校验的！只是静态页面展示和后端交互！

我一直以为nginx服务器把展示和登陆校验模块都包干了！

commented

mark

commented

这个工具怎么跟后台对接啊

commented

@FatFatFox 看了你的描述恍然大悟。。。那么有没有人把这种方式改造一下啊，太不方便了

commented

@FatFatFox @eddiebai

你们是不是理解错了？

拿我司来说用jenkins布署代码，构建脚本是:

yarn install
yarn run build

build之后会生成一个dist目录

至于nginx，配置好两个，一个是try_files，另外一个是端口转发（即反向代理），比如说把所有的/api转发到后端的IP去。

这里browserHistory需要注意的，可能是一个basename吧。。其他我个人觉得问题不大

commented

@henryzp nginx配置文件里面的 proxy_pass http://localhost:8000/api; ---这个服务从哪来的？怎么配置啊？

commented

@eddiebai

这个服务是后端服务（比如说java、php、node、python等）啊，就相当于做反向代理，譬如我下面的nginx配置：

location ~ /servyconf/ {
            proxy_pass       http://127.0.0.1:8080;
            proxy_set_header            Host $host;
            proxy_set_header            X-Real-IP $remote_addr;
            proxy_set_header            X-Forwarded-For $proxy_add_x_forwarded_for;
        }

当前端ajax的请求带有servyconf的路径时，它就会往http://127.0.0.1:8080跳，比如说：

localhost:xxx/servyconf/getXXX   ->   http://127.0.0.1:8080/servyconf/getXXX
commented

@henryzp 好的，谢谢，道理我懂了。那么这个后端服务是要自己开发一套喽？有接口规范说明么

commented

非常感谢二位

commented

规范这个东西，各个公司会有些出入吧。。

拿我司来说，每个接口，返回都有：

{
     head: xxx,
     body: []
}

head里面包含什么code啦，message啦。。body就是请求回来的，通常渲染的数据。。

这个团队约定一下就行了

commented

image

我是这样配置的 打开之后报404的错误 不知道哪里不对 求各位大神指点啊
image
@zuiidea @zuiidea @FatFatFox @jackple @yanghong1105

commented

@zhien520 ，

先确认你的/home/www/antd-admin/dist下面是否有文件

然后确认nginx是否reload

看了你的配置，应该没问题

commented

@henryzp 现在没问题了 但是登录的话报错是什么原因
image

commented

@zhien520 ，405就是客户端提交的问题了。。

你把所有的请求都转发到了index.html，肯定有问题啊。。

看看上面的nginx配置吧

commented

@yanghong1105 我看你之前遇到打包到 nginx 上之后，样式乱了，我也遇到了这个问题，你后来怎么调好的啊，请教一下。

commented

mark

commented

@zuiidea @FatFatFox @yanghong1105
遇到个棘手的问题：
我测试服务器运行的项目与本地运行的效果没有问题，但是公司的服务器上运行遇到些很奇怪的问题。两个服务器目前都是npm run dev运行的。
问题一：所有ajax请求都自动加上了防止缓存的时间搓。Request URL:http://ip:8000/api/v1/user?callback=jsonp_1501503846974
问题二：登陆POST接口成了GET请求，我测试服务器上的项目都没问题。
十分诡异，公司线上的代码请求方式未改动过，为何会产生这样的问题？
下面为公司服务器network截图
qq20170731-205308 2x
qq20170731-205100 2x
qq20170731-205154 2x

commented

@cdscawd

给你跪了，为什么服务器也要用npm run dev的方式，不应该是build的一个文件夹放到服务器，然后nginx配置一下就好了么。。。

dev是开发环境呀，而且开发环境上配了一些hot reload之类的，性能CPU占比挺大的。。

commented

@henryzp 嗯 我知道 暂时不考虑这问题 问题是为什么我所有的ajax请求都被加上了时间戳

commented

@cdscawd
问题一：请求的接口域和当前的域不一致而跨域，默认走了JSONP，可以在utils/config.js里的CORS属性加上接口的域名。或者利用ngnix代理，使接口的域和当前域相同。

问题二：和问题一一样的，所有的JSONP的请求方式都是get

commented

@zuiidea 由于目前项目只有一个用户信息列表查看的模块，所以后台登陆及权限的接口都是mock的,项目中包含了mock的接口和真是的接口。按照你的方法处理了，还是没实现。

commented

@cdscawd 你先保证没跨域

commented

@zuiidea @FatFatFox
问题描述：在本地搭建好了Nginx服务器，本地服务器上运行起来
http://192.168.0.136:8080/nhsoft-mercury-web/checkLoginPhone?phoneNumber=18667411797&password=123456&callback=jsonp_1502759125384
Request Method:GET
Status Code:200 OK
Remote Address:192.168.0.136:8080
返回：
{"status":0,"msg":"登录成功","data":null}
但是models/login.js里：
const data = yield call(login, payload)
console.log(data.status)
接收不到data.status

这是什么原因？
@cdscawd 和你的问题很像login明明是post请求结果变get了，后台已经解决跨域问题了

我在utils/config.js调用作者的登录接口可以登录。
综合上述情况，问题出在哪呢？

后台返回给我的数据是{"status":0,"msg":"登录成功","data":null}
看作者的data返回是{success: true, message: "Ok", statusCode: 200,data:""}
那我要让后台写死了，success: true, message: "Ok", statusCode: 200？

commented

@zuiidea 看了以上是部署到虚拟的web服务器上的示例，但在生产环境上如果不希望使用多域名，应该如何部署？比如nginx的root为/var/lib/www，应用部署到/var/lib/www/foo下，希望访问地址为http://domain.com/foo的形式而不是http://foo.domain.com/的形式访问，该如何打包部署？

commented

@aihua ，可以查一下baseUrl。。react-router可以配置的

commented

try_files $uri $uri/ /index.html;
这配置是作用有没有说明，用来干什么的，没配置就错了。

commented

打包报错了，求分析一下问题出在哪里

antd-admin@4.3.4 build D:\rep\crm
roadhog build

Creating an optimized production build...
Failed to compile.

Template execution failed: TypeError: Cannot read property 'Symbol(Symbol.iterat
or)' of null

TypeError: Cannot read property 'Symbol(Symbol.iterator)' of null

  • entry.ejs:75
    D:/rep/crm/src/entry.ejs:75:40

  • entry.ejs:82 module.exports
    D:/rep/crm/src/entry.ejs:82:3

  • index.js:264
    [crm]/[html-webpack-plugin]/index.js:264:16

  • util.js:16 tryCatcher
    [crm]/[bluebird]/js/release/util.js:16:23

  • promise.js:512 Promise._settlePromiseFromHandler
    [crm]/[bluebird]/js/release/promise.js:512:31

  • promise.js:569 Promise._settlePromise
    [crm]/[bluebird]/js/release/promise.js:569:18

  • promise.js:606 Promise._settlePromiseCtx
    [crm]/[bluebird]/js/release/promise.js:606:10

  • async.js:138 Async._drainQueue
    [crm]/[bluebird]/js/release/async.js:138:12

  • async.js:143 Async._drainQueues
    [crm]/[bluebird]/js/release/async.js:143:10

  • async.js:17 Immediate.Async.drainQueues
    [crm]/[bluebird]/js/release/async.js:17:14

commented

@aihua 问题解决了吗？能否贴一下你的解决方案？

commented

@zuiidea 我在项目中有些地方使用了类似下面的方法来跳转到登陆页面

    window.location = `${location.origin}/login?from=${from}`

如果我不是使用子域名http://foo.domain.com的方式来部署，而是使用 http://domain.com/foo。会导致跳转到 http://domain.com/login，而不是 http://domain.com/foo/login。请问能否在 前端代码中解决这个问题呢？

commented

@jzoe ，nginx配置try_files，然后你将html中的css js引用路径，用publicPath来处理一下，前端路由的URL是有一个baseUrl的

commented

我用的这个版本是没有 baseUrl 的，最初的版本才有! @henryzp

commented

为什么ngix 访问会这么卡啊。。。。？ 加载的非常慢，直接访问node就非常快

commented

请问，我发布了dist文件夹中的版本，放在ng托管，但是发不同版本的时候浏览器需要清除缓存才可以，遇到过吗？

commented

我的项目dva+antd使用代理请求外部接口，开发中都正常访问，打包后就无法使用代理
"proxy": {
"/api": {
"target": "http://test.sevw.cn/api.php",
"changeOrigin": true,
"pathRewrite": { "^/api" : "" }
}
},不知道那里出问题了，请指教一下

commented

@laiyiyi
随手帮帮你，可以添加一个 webpack 插件，在所有文件里面都可以引用 BASE_URL 这个全局变量

new webpack.DefinePlugin({
      BASE_URL: production ? JSON.stringify('') : JSON.stringify('http://localhost:8000/api/v1'),
    }),
commented

@laiyiyi 检查一下你的所有的 http 请求，比如你请求一个 index.js 结果内容返回的是 index.html，我之前出过这个问题

commented

我build部署了 但是页面里的图片地址不对 直接public 目录 上面一层还有static的怎么回事呢

commented

@zhangxu003 优先保证线上图片地址正确，本地的不要管

commented

@HongChenBuZai 准确的说，浏览器需要刷新，很正常，因为引入的js、css变了(hash文件名啦)

commented

image
请问这是什么问题

commented

@dysdle 用yarn安装依赖，npm网络问题你懂的

commented

@superlbr 果然是！

commented

大佬，为什么git clone 下来文件，npm i 下载依赖包的时候报错，报错如下：Unexpected end of JSON input while parsing near '...sum":"8d0649e1fcb58a5'

commented

@mayunfang 建议用yarn，npm网络有点问题

commented

@superlbr 解决了 方法如下：
1.删掉package.lock.json（这种方法文件里没有package.lock.json就采用第二种方法）
2.清除cache npm cache clean --force
3.不用淘宝镜像

commented

已更新文档，请在文档中查看

commented

mock中的目录，本地用代理借口访问，部署后怎么访问到