项目部署

[zuiidea]

因为项目中使用到了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

[dangyanglim]

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

[yanghong1105]

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下面了

[dangyanglim]

@yanghong1105

去掉这个看下root html;

[yanghong1105]

按照楼主说的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.

[zuiidea]

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

[yanghong1105]

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

[dangyanglim]

截图看下

[yanghong1105]

调好了，谢谢

[yanghong1105]

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

[dangyanglim]

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

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

[zuiidea]

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

[jackple]

8000又8000，换个端口

[jackple]

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

[jackple]

@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/*;
}

[jackple]

@FatFatFox 是本机配置的问题

[zhanghj-jacky]

部署到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 ，进入登陆界面，输入账号 和密码后如下图：

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

[jackple]

应该是请求666才对，改baseurl

[jackple]

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

[zhanghj-jacky]

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

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

[dangyanglim]

对

[jackple]

嗯嗯

[zhanghj-jacky]

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

nginx的配置：

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

[jackple]

你用postman先试试？

[zhanghj-jacky]

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

[zuiidea]

@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;
    }

[FatFatFox]

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

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

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

[henryzp]

mark

[Junrui-L]

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

[noobalex]

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

[henryzp]

@FatFatFox @eddiebai

你们是不是理解错了？

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

yarn install
yarn run build

build之后会生成一个dist目录

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

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

[noobalex]

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

[henryzp]

@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

[noobalex]

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

[zuiidea]

@eddiebai github的API https://developer.github.com/v3/

[noobalex]

非常感谢二位

[henryzp]

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

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

{
     head: xxx,
     body: []
}

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

这个团队约定一下就行了

[zhien520]

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

[henryzp]

@zhien520 ，

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

然后确认nginx是否reload

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

[zhien520]

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

[henryzp]

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

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

看看上面的nginx配置吧

[dkvirus]

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

[zzq0826]

mark

[cdscawd]

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

[henryzp]

@cdscawd

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

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

[cdscawd]

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

[zuiidea]

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

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

[cdscawd]

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

[zuiidea]

@cdscawd 你先保证没跨域

[qingjiaowochengzd]

@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？

[aihua]

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