Ant Design + nginx 部署


一、build Ant Design项目

1
npm run build

build成功后，会在项目路径下生成一个dist目录，该目录下都是静态文件

二、将部署文件上传到远程ubuntu服务器

我用的是阿里云ECS的ubuntu服务器

2.1 将dist目录压缩成zip，通过scp命令上传到ubuntu指定目录下
1
scp /Users/AC/code/netx-web-ui/dist.zip [email protected].*.*:/data/netx-web-ui/dist.zip

执行完该命令后，会提示输入你服务器的登录密码。我的服务器IP打了*号，请改成读者自己服务器的IP

2.2 通过ssh登录远程ubuntu服务器
1
ssh [email protected].*.*

输入登录密码进行登录

2.3 进入刚才放dist.zip的目录，将dist.zip解压
1
cd /data/netx-web-ui
1
unzip dist.zip

如果提示没有unzip命令，按照提示先安装unzip

三、配置nginx

安装nginx步骤省略，读者自己完成nginx的安装

1
2
3
4
5
6
7
8
9
10
server {
    listen     16667;

    root /data/netx-web-ui/dist;

    location / {
        root /data/netx-web-ui/dist;
        index index.html;
    }                                                                                                            
}

访问112.74..:/16667 就能看到登录页面了。注意如果是用的阿里云要先去安全组开放16667端口。

四、解决刷新报404的问题

刷新出现404，这是web单页面开发模式造成的。现在主流的前端框架基本都是单页面的。如：react、vue等。

单页面简单来说就是访问所有资源路径、其实页面内容只有一个（一般是index.html）。这个页面中引入的js框架会根据当前访问的url去路由到相应的子页面组件（可以理解为页面片段）进行逻辑处理和页面渲染。

所以当你访问112.74..:/16667/login 其实web站中并没login这个页面资源（login就是让框架路由用的）。所以就报404

解决方案：添加nginx配置

1
2
3
4
5
6
7
8
9
    location /login {
        rewrite .* /index.html break;
        root /data/netx-web-ui/dist;
    }  

    location /console {
        rewrite .* /index.html break;
        root /data/netx-web-ui/dist;
    }

nginx完整的配置为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
server {
    listen     16667;
 
    root /data/netx-web-ui/dist;

    location / {
        root /data/netx-web-ui/dist;
        index index.html;
    }  

    location /login {
        rewrite .* /index.html break;
        root /data/netx-web-ui/dist;
    }  

    location /console {
        rewrite .* /index.html break;
        root /data/netx-web-ui/dist;
    }  
                                                                                                                         
}

注意：改完nginx配置文件后，要重启一下nginx服务

参考文章
nginx 配置解决 react 、vue 单页面刷新404问题