Ant Design + nginx 部署

一、build Ant Design项目

npm run build

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

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

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

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

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

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

输入登录密码进行登录

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

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

三、配置nginx

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

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配置

    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完整的配置为

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问题

你可能感兴趣的:(Ant Design + nginx 部署)