如果你刚接触服务器管理，第一次登录命令行时可能会被一串串黑底白字吓到。这时候，宝塔面板（BT 面板）就是一个非常友好的入口。

宝塔面板是一款可视化的服务器管理工具，它通过 Web 界面，把原本需要命令行操作的服务器任务，用图形化的方式呈现出来。

你可以在浏览器中完成以下任务：

• 网站、数据库、FTP 的创建与管理

• Nginx、PHP、MySQL、Redis 等环境的安装

• 反向代理、SSL 证书、计划任务、文件管理等配置

• 监控系统资源使用（CPU、内存、带宽等）

简单来说，它是一个图形化的服务器控制中心。哪怕你不熟悉 Linux 命令，也能轻松搭建和维护网站。

举个例子：
以前要安装 Nginx，你需要在命令行输入一连串命令；
现在打开宝塔，只需点一下“安装”，系统就会自动完成下载、配置和启动。

宝塔同时支持 Linux 和 Windows 系统，在国内云厂商（阿里云、腾讯云、华为云等）的服务器上安装非常方便。对于个人开发者、小型项目、独立站点来说，它几乎是“上手服务器”的最佳起点。

如果你使用宝塔面板（BT 面板），配置反向代理就更简单——不需要写 Nginx 配置文件，只需点击几步操作，第一步先登录宝塔面板 → 打开 网站。

我演示的有两个应用，一个 go 写的API 应用，一个 Vue 写的前端站点。需求是我要使用https://test-api.leti.ltd/ 来访问 API，使用https://test-web.leti.ltd/ 来访问前端的站点。

第一步先来配置 API 的应用，以下是运行中的 go 写的 API 站点，下图可见，应用已启动。项目的端口用的是 8080。

左侧菜单选择网站，选择反向代理标签 → 点击「添加反向代理」。

第二配置前端的站点，这里有个网站。

添加一个HTML 项目，这里解释下由于 HTML 项目和反代理用的是同一个Nginx，这里配置好以后，不需要在反代理那边再配置，底层操作的是同一个 Nginx。

SSL 配置同上，不再赘述。这样配置好以后其实有一个问题，直接输入https://test-web.leti.ltd/会跳转到登录页面，但这时如果你刷新页面的话，会提示 404。

问题的具体现象：在 Vue 项目中，前端路由使用的是 history 模式。页面内跳转（比如从 / 跳到 /login）时没问题，因为这是前端路由自己接管的。但当你直接刷新 /login 页面 或者 手动访问 /login 时，Nginx 收到请求后会去服务器找这个路径下的文件——而实际上 /login 不是物理目录，而是前端路由路径，于是 Nginx 返回了 404 Not Found。

Vue 项目的路由有两种模式： hash 模式：路径带 #（如 /#/login），不会出现 404，因为浏览器不会真正向服务器请求 /login。 history 模式：路径是 /login，看起来更美观，但浏览器会直接向服务器请求该路径。 Nginx 并不知道 /login 应该交给前端路由处理，所以它去找文件失败，就返回 404。

解决方法：配置 Nginx 的 try_files,在你的 Nginx 配置文件中，找到前端项目的站点配置，增加以下内容:

server {    listen 80;    server_name example.com;    root /www/wwwroot/my-vue-project/dist;
    location / {        try_files $uri $uri/ /index.html;    }}

在宝塔面板中就是在管理中选中配置文件进行修改，如下图所示。

配置完成后，在刷新页面，就没有问题了。

如果你的项目还配置了反向代理，有时候 /api 这样的路径需要转发给后端服务，确保这部分配置放在前面。

在宝塔面板中，配置反向代理几乎是“傻瓜式”的操作。对刚开始自建服务的人来说，它既直观，又高效。一台服务器，也能支撑起你的小宇宙。

阅读原文：原文链接