fastapi+vue3前后端宝塔部署实战-手把手教学

跟风哥学Ai全栈开发

已于 2024-07-11 17:51:48 修改

阅读量1.1k

点赞数 22

分类专栏：前端 fastapi vue3 文章标签： fastapi vue

于 2024-07-11 15:47:24 首次发布

本文链接：https://blog.csdn.net/fengxiaoyangfeng/article/details/140344220

版权

前端同时被 3 个专栏收录

4 篇文章 0 订阅

订阅专栏

fastapi

1 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

宝塔安装文档：

主要步骤

代码上传gitee 获取gitee ssh密钥
阿里云服务器购买，宝塔安装
后端安装
前端安装
域名解析

01 代码上传gitee，获取gitee ssh密钥

gitee创建同名仓库

因为我已近创建过whale-coin了，所以截图里显示whale-coin1

和本地的whale-coin进行关联

## 正常如果你是个人新建的仓库，是下面这种关联方法。

cd whale-coin1
git remote add origin git@gitee.com:fengxiaoyang163/whale-coin1.git
git push -u origin "master"

## 但是因为这是从github下载的，所以本身已经有了git的远程关联：
(base) E:\share\github\07yue\whale-coin1>git remote -v                                 
origin  https://github.com/datawhalechina/whale-coin.git (fetch)
origin  https://github.com/datawhalechina/whale-coin.git (push)

## 所以可以用下面再进行gitee关联，把add origin 改为gitee 
(base) E:\share\github\07yue\whale-coin1>git remote add gitee  git@gitee.com:fengxiaoyang163/whale-coin1.git                

(base) E:\share\github\07yue\whale-coin1>git remote -v
gitee   git@gitee.com:fengxiaoyang163/whale-coin1.git (fetch)
gitee   git@gitee.com:fengxiaoyang163/whale-coin1.git (push)
origin  https://github.com/datawhalechina/whale-coin.git (fetch)
origin  https://github.com/datawhalechina/whale-coin.git (push)

添加gitee ssh密钥

生成 SSH 密钥：如果你还没有生成 SSH 密钥，可以通过以下命令生成一个新的 SSH 密钥对：
```
ssh-keygen -t rsa -b 4096 -C "your_email@example.com"
```
按提示完成生成过程，这会在你的用户目录下创建一个 .ssh 文件夹，里面包含 id_rsa 和 id_rsa.pub 文件。

添加 SSH 密钥到 SSH 代理：确保 SSH 代理正在运行，并添加你的 SSH 私钥到 SSH 代理：
```
eval "$(ssh-agent -s)"
ssh-add ~/.ssh/id_rsa
```
将 SSH 公钥添加到 Gitee：复制你的公钥内容，并将其添加到 Gitee：
```
cat ~/.ssh/id_rsa.pub
```
将输出的内容复制，然后登录到 Gitee，进入 “设置” -> “SSH公钥”，点击 “添加公钥”，将复制的内容粘贴进去。
推送到gitee
```
git push gitee main
```

02 阿里云服务器安装宝塔

方法1：选择有宝塔的服务器：.

2. 方法2：自行安装宝塔

没有选择自带宝塔的，则可以根据宝塔官方进行安装：

https://www.bt.cn/new/download.html

3. 登录宝塔

选择自带宝塔的可以通过命令bt→14查看宝塔登录信息；自主安装宝塔的，安装完成后，宝塔会显示登录账号。

4. 宝塔安装mysql8.0+Ngix1.24

在软件商店安装：

5.配置安全组端口

路径：安全→添加端口规则

把需要的端口都一次开好。

mysql:3306

网站访问：80,443

后端：8008

前端：5173

ssh远程服务:22

同时，阿里云服务器上对应的安全组端口也要确保打开：

路径一般是：控制台→云服务器ECS→安全组→入方向

03 后端安装

1. 安装python3.10.5

2. 从gitee上下载仓库

宝塔默认安装路径是

cd /www/wwwroot/
# clone时如果出现密码登录问题，从gitee后台生成一个key,输入密码时，直接用这个key,下次就不用再输入了。
git clone git@gitee.com:fengxiaoyang163/whale-coin1.git

3. 安装python后端项目

路径：网站→添加Python项目

具体设置如下：

项目名称：backend(任意，英文)
项目端口：8008
启动方式：命令行启动
项目路径：/www/wwwroot/whale-coin/backend
启动命令：gunicorn -w 4 -k uvicorn.workers.UvicornWorker main:app --bind 0.0.0.0:8008
环境变量：从文件加载
路径：/www/wwwroot/whale-coin/backend/.env.production（这里是自定义的，主要是github仓库上用的事sqlite,线上部署用的是mysql)

安装完成后，可以浏览器打开查看：

ip:port

ip:port/docs

04 前端安装

这里前端是使用的vue3,前端安装时，有2种方法，法1是直pm run build生成静态文件。法2是安装服务器安装node环境，然后npm run build进行启动


```shell
cd fronted
npm run build
# 会在如下目录生成静态文件：
dist/www/wwwroot/whale-coin/frontend/dist
下面截图，dist我删除了，原来是有的

1.1 查找Ngix设置路径

从软件商店→设置→配置修改

下拉到最后，可以发现，ngix代理以下目录的所有conf

/www/server/panel/vhost/nginx/*.conf

所以，我们可以在以下路径新建一个conf文件，进行ngix代理配置，文件名称可以任意

1.2 配置coin.conf

下面是具体coif.conf的配置，只需要把服务器ip，修改成你自己的服务器即可

server {
    listen 80;
    server_name 47.120.9.229;（服务器ip）

    # 配置前端
    location / {
        root /www/wwwroot/whale-coin/frontend/dist;
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    # 配置API请求代理到后端
    location /api/ {
        proxy_pass http://127.0.0.1:8008/; # 假设FastAPI后端运行在8000端口
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        
        # 处理CORS
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods "GET, POST, OPTIONS, DELETE, PUT";
        add_header Access-Control-Allow-Headers "Authorization, Content-Type, X-Requested-With";

        if ($request_method = OPTIONS) {
            return 204;
        }
    }

法2：安装node，用开发模式npm run dev

下面方法不推荐，但是也可以使用

2.1 安装node环境

同理，node也是在侧边栏网站→Node项目下，安装对应版本，我这里选择的是18.18.2

2.2 安装前端项目

路径：

网站→添加Node项目

项目目录：/www/wwwroot/whale-coin/frontend
项目名称：frontend
启动选项：npm run dev
项目端口：5173
运行用户：www * 无特殊需求请选择www用户
包管理器：npm
* 请选择项目的包管理器
Node版本：v18.18.2

2.3 配置coif.conf

使用npm run dev启动前端时，/www/server/panel/vhost/nginx/coin.conf的配置如下：

shell

server {
listen 80;
server_name 47.120.9.229;

# 前端开发服务器的代理设置
location / {
    proxy_pass http://127.0.0.1:5173;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
}

# 后端API的代理设置
location /api/ {
    proxy_pass http://127.0.0.1:8008/;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    
    # 处理CORS
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods "GET, POST, OPTIONS, DELETE, PUT";
    add_header Access-Control-Allow-Headers "Authorization, Content-Type, X-Requested-With, token";

    if ($request_method = OPTIONS) {
        return 204;
    }
}

}

05 域名解析

最后在服务器后台，进行域名解析

shell

进入域名解析控制台后，点击“添加记录”按钮。你需要添加两个记录，分别是www和@。

解析www：

记录类型：选择“A”记录。
主机记录：填写“www”。
记录值：填写你的服务器IP地址。
TTL：默认即可。
解析@：

记录类型：选择“A”记录。
主机记录：填写“@”。
记录值：填写你的服务器IP地址。
TTL：默认即可。

06 验证

如果一切顺利，打开你自定义的域名http://christarter.com/

看到以上页面，恭喜你，成功部署了一个前后端分离的网站！

07重要文件配置检查

如果出现问题，检查以下文件

1. whale-coin/frontend/src/request/base.ts

把baseURL直接改成域名:8008 or 服务器ip:8008

import axios from 'axios'
import { useLoginStore } from "../store";
const loginstate = useLoginStore();
// 创建axios实例
const instance = axios.create({
	# baseURL: loginstate.iframeurl,
    baseURL: 'http://christarter.com:8008',// 所有的请求地址前缀部分(没有后端请求不用写)

2. whale-coin/frontend/vite.config.ts

确保这里api请求路径正确，

shell.
import { defineConfig } from “vite”;
import vue from “@vitejs/plugin-vue”;

// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
server: {
host: “0.0.0.0”,
proxy: {
“/api”: {
target: “http://localhost:8008”, // 你的FastAPI后端地址
changeOrigin: true,
rewrite: (path) => path.replace(/^/api/, “”),