部署前后端项目

当前，Vue3(组合API) + TypeScript + Vite是非常主流的前端技术栈之一，后端主流技术栈则较多，包括Java + Spring、.NET、Go等。

在服务器上部署前后端项目是非常常见的操作，本文简要介绍基于nginx的前端部署和基于nssm的后端部署的相关流程。

前后端部署的通用操作

防火墙开放端口

• 添加端口开放规则

New-NetFirewallRule -DisplayName "MXCAD(TCP 1340)" -Direction Inbound -Protocol TCP -LocalPort 1340 -Action Allow

• 删除端口开放规则

Remove-NetFirewallRule -DisplayName "MXCAD(TCP 1340)"

基于nginx的前端部署

使用npm run build之后，会生成dist目录，在dist同目录下调用serve -s dist -l 1338可以开启前端项目进行调试，其中serve是通过npm安装的工具。

配置文件

在conf/nginx.conf文件中设置每个后台服务的虚拟服务器即可，基本配置如下：

server {
	// 服务端口号
    listen       1338;
    // 服务主机
    server_name  localhost 192.10.48.201;
    // 静态文件所在路径
    root   D:/MXCAD/MXCADFrontend;
    // 主页文件
    index  index.html;
	// 配置前端路由
    location / {
        try_files $uri $uri/ /index.html;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

其中location / {try_files $uri $uri/ /index.html;}是实现前端路由必不可少的设置。对于其它复杂情况，后续完善。

nginx命令行工具

• nginx -t：测试配置文件是不是有问题，真正启动nginx之前最好执行一下
• nginx -c <config>：指定自定义的配置文件
• nginx -s <signal>：向主进程发送信号，用于控制运行中的nginx
  • stop：强制关闭
  • quit：优雅停止
  • reload：重新加载配置文件，平滑重启

更新服务器上的静态文件后，如果希望在浏览器访问时立即生效，可以使用ctrl+F5强制刷新浏览器，不需要重载配置文件。

基于nssm的后端部署

nssm命令行工具

• nssm install mxcad_backend2 & nssm edit mxcad_backend2

执行以上命令后，会弹出GUI窗体，以下三个参数尤其关键，分别是exe路径和命令行参数：

也可以指定后台服务的启动方式，默认是“自动”：

• nssm start mxcad_backend2：启动服务
• nssm stop mxcad_backend2：停止服务，但主程序文件依然被占用
• nssm remove mxcad_backend2：移除服务，添加confirm则不会弹出确认窗体
• nssm restart mxcad_backend2：重启服务
• nssm status mxcad_backend2：查询服务状态

查询服务

创建后台服务后，可以在“计算机管理”面板中查看相应服务，也可以在这里进行管理。