腾讯云+umi+宝塔面板部署

1.项目背景以及预览

使用umi.js搭建玩安卓项目，目前只简单实现，登录功能，首页文章列表，权限控制。

截屏2023-11-10 下午4.02.21.png
开发时在umi.js中配置代理形式，参考 https://github.com/puxiaoshuai/umi_wanandroid

2.umi项目打包

2.1打包

1.在package.json中新增 homepage:'.' , 然后使用npm run build 进行打包

2.2 验证打包是否成功：

全局安装 npm install serve -g
进入 dist目录，执行 serve,能看到界面，打包应该就没有问题

3.假设已经有一台腾讯云轻量服务器。

3.1 先简单创建个默认的站点体验体验

3.1.1 开放端口

宝塔面板中-安全-添加端口规则，直接开放 8001端口。同时 在 腾讯云侧也要开放防火墙端口8001，端口可自己随便取

截屏2023-11-10 下午4.52.16.png

3.1.1 新建站点，直接选择php,如下图

截屏2023-11-10 下午4.34.43.png

图上的www.test.demo 其实是没得这个域名的，就是为了方便取名，后面我们是会删除的。点击网站，找到 www.test.demo->设置->域名管理

截屏2023-11-10 下午4.34.59.png 。
这个时候，我们就创建成功了一个站点。你可以在点击 www.test.hello网站的根目录，修改下index.html文件，这个时候，访问 ip: 8001就能查看到
截屏2023-11-10 下午4.38.25.png

3.2 部署我们自己的网站

步骤跟 3.1步骤一样，区别就是，创建好后，我们需要更改 根目录下的文件路径

截屏2023-11-10 下午5.04.09.png

这样才能加载 dist/index.html文件，然后我们访问 ip: 端口号，就能访问我们的umi 项目了

3.3 部署的接口 404

我们请求的www.wanandroid.com下的第三方接口，我们需要进行 代理设置
在宝塔面板的网站设置->配置文件，修改 nginx文件，新增

###代理后端API的配置
    location /api {
      add_header Access-Control-Allow-Origin 'http://111.229.99.183:3002/';
      proxy_pass https://www.wanandroid.com/;
    }
    

3.4 刷新页面404

nginx文件中 添加配置

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

这样我们的网站就成功访问了。

其实在配置过程中遇到一些坑，你踩一踩，后面配置就游刃有余了。