项目部署

[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服务器把展示和登陆校验模块都包干了！

[jzoe]

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

[jzoe]

@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。请问能否在 前端代码中解决这个问题呢？

[henryzp]

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

[jzoe]

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

[PoppyProject]

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

[HongChenBuZai]

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

[caoxingao]

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

[javahuang]

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

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

[javahuang]

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

[zhangxu003]

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

[superlbr]

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

[superlbr]

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

[dysdle]

请问这是什么问题

[superlbr]

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

[dysdle]

@superlbr 果然是！

[mayunfang]

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

[superlbr]

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

[mayunfang]

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

[superlbr]

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

[gaoluona]

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

[superlbr]

@gaoluona 需要让mock提供接口服务，参考https://github.com/DXY-F2E/api-mocker https://github.com/nikogu/roadhog-api-doc/