1Panel部署前后端项目全流程（服务器购买、域名购买、https配置、仅限国内访问）

购买服务器

购买域名

部署前端项目

部署后端

配置反向代理

配置https

仅限国内访问的配置

前端是用vue2写的，后端用的fastapi（python）

购买服务器

购买香港的服务器无需备案，即使你是在阿里云上购买的域名，只要你的dns解析指向的不是国内的服务器，就无需备案。

访问链接：阿里云登录 - 欢迎登录阿里云，安全稳定的云计算服务平台

登录进去后应该是这样的：

购买之后就可以看到啦

访问成功后如下：

账号密码需要查看以下：

到这服务器就好啦，接下来购买域名

购买域名

地址：

阿里云登录 - 欢迎登录阿里云，安全稳定的云计算服务平台

例如：

我已经早前就购买过了，就没法上截图示例了，看着操作购买就好。购买完成后域名需要实名认证，不然没法解析到服务器！！！

配置域名解析

服务器的公网ip如图所示：

添加解析之后可以使用cmd窗口ping一下域名，看下解析的ip是否是自己配置的ip地址，一般情况下都会套一个dns来进行防护，避免真实ip直接暴露，这个是题外话了，先不搞这么复杂。如果是其他情况的话要检查有没有实名认证了

部署前端项目

首先需要登录1Panel安装一下OpenResty

安装好后创建网站

我们要部署的是一个vue前端项目，所以按照官方文档（HTML5 History 模式 | Vue Router）的说明，需要在Nginx中配置下

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

将vue项目编译好之后替换下：

到这里你的前端页面应该就可以访问了

部署后端

上传python项目

上传之后就是部署了

部署运行如图：

可自行查看日志看下是否运行成功

接下来需要配置下反向代理

配置反向代理

配置反向代理的目的是为了能解决跨域的问题，比如域名是abc.top，访问abc.top时访问的是前端，当访问abc.com/api的时候，访问的是后端，因此前端需要你将axios的请求url更新下，例如我的

url更新后记得重新编译上传替换

现在我们通过abc.top可以访问到web页面了，不过需要配置下Nginx，使得我们可以的前端可以访问后端

找到我们前面添加的前端项目

配置好之后假如我们访问abc.com/api/login时，它会将/api前缀也跟着携带到后端的api，但因为我们的后端/login没有/api前缀，就会导致访问出现404，因此我们需要再加一个配置，将它改为访问abc.com/api/login时实际上是abc.com/login

rewrite ^/api/(.*) /$1 break;

解释：

1. rewrite：

rewrite 是 Nginx 用来修改 URL 地址的指令。它可以根据某些条件重新构造 URL，从而将请求转发到不同的地方。

2. ^/api/(.*)：

这是一个正则表达式，^ 表示匹配 URL 开头，/api/ 是要匹配的固定部分。(.*) 是一个捕获组，表示匹配 /api/ 后面的任意内容（包括空字符）。比如 /api/test 或者 /api/hello/world 都符合这个模式。

^：表示匹配输入的开始。

/api/：固定匹配 /api/ 字符串。

(.*)：表示匹配 /api/ 后面的所有内容（包括空白），并将其捕获到一个组中。

所以，^/api/(.*) 这段正则的意思就是“匹配 URL 路径以 /api/ 开头，后面跟着任意内容”。

3. /$1：

这是重写规则的目标部分，$1 代表的是之前捕获到的第一个组的内容。在这个例子中，$1 就是 (.*) 捕获到的 /api/ 后面的所有内容。

如果请求的 URL 是 /api/hello，那么 $1 就是 hello。

如果请求的 URL 是 /api/123/abc，那么 $1 就是 123/abc。

所以，/$1 就是将捕获到的 /api/ 后面的部分直接放到新的 URL 中。

4. break：

break 是 Nginx 重写规则的一种指令，表示停止继续处理后面的重写规则。就是说，一旦这个规则匹配成功并应用了，Nginx 就不再执行其他的重写规则。

综上所述：

这个规则的作用是把以 /api/ 开头的 URL 中，/api/ 部分去掉，只保留后面的部分，并将请求指向新的 URL。

举个例子：

请求 /api/hello 会被重写为 /hello。

请求 /api/users/123 会被重写为 /users/123。