我早就想写了,之前部署遇到了很多问题,也没有记录,现在简单记录几个比较重要的点。

后端用go写的,打包为可执行文件,配置文件设置release模式就可以了,没有什么坑点,前端倒是在部署上线有不少问题。

部署后刷新404问题

在nginx的配置文件中加入如下配置

#vue 路由重定向到index.html的配置,用于解决vue页面在浏览器刷新后404的问题
    location / {
         try_files $uri $uri/ /index.html;
    }

这是因为vue打包后是单页应用,任何路由都在index.html这个文件中,刷新后的路由无法直接找到,需要将任何路由都重定向到index文件。

部署后调用跨域api接口问题

在本地测试可以在vite.json中配置代理,如:

    server: {
      proxy: {
        '/bgmapi': {
          target: 'https://api.bgm.tv',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/bgmapi/, '')
        },
        '/api':{
          target: 'http://digbgmapi.masterkagami.com',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
        }
      },
      port: process.env.DIGBGM_PORT
    }

然后再axios中定义两个baseURL

const bangumiService = axios.create({
  baseURL: '/bgmapi'
})
const digbgmService = axios.create({
  baseURL: '/api'
})

通过axios.bangumiServiceaxios.digbgmService的方式使用这两个跨域地址。

这在开发环境是完全ok的,但是线上部署的生产环境我们是通过nginx服务器的,代理是无法生效的,目标url不会自动转发。

解决方法为为nginx配置反向代理,将我们想跨域请求的地址反带到目标地址。
例:
代理目录:/api/
目标URL: http://api.bgm.tv
发送域名: api.bgm.tv