前端vue3+后端django+腾讯云服务器windows版上线部署

01-首先在本机上解决跨域问题

方法一 在前端解决:
在vue.config.js中使用devServer
axios中的url 必须遵循相应写法
关于devServer的详细配置 请百度

在这里插入图片描述
在这里插入图片描述

问题:上线时(部署在云服务器上),打包vue3 devServer不会被打包,即导致proxy跨域失效。

方法二:
不在前端解决 在后端django解决

1.安装第三方扩展
pip install django-cors-headers

在settings.py文件中进行如下设置

2.添加应用
INSTALLED_APPS = (
    ...
    'corsheaders',
    ...
)

3.中间件处理,注意放在第一条,会第一时间进行处理
MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    ...
]

4.配置访问规则或白名单:
# 允许所有域名跨域(优先选择)
CORS_ORIGIN_ALLOW_ALL = True

# 或配置白名单
# CORS_ORIGIN_WHITELIST = (
#     '*'
#     # '127.0.0.1:8000',
#     # 'localhost:8000',
#     # '127.0.0.1:8080',
#     # 'localhost:8080',
#     # 'ads-cms-api.aataotao.com:8000'  #
#     # 'taoduoduo-test.oss-cn-shenzhen.aliyuncs.com:80',  # 线上
#     # '10.0.2.187:8080'  # 本地
# )

5.允许携带cookie
CORS_ALLOW_CREDENTIALS = True

6.使用nginx可能要配置别的
详情请看参考2
但是我的云服务器也用了nginx,并没有配置参考2的内容,也成功了。

参考1
参考2

在这里插入图片描述

我最开始使用的方法一,配置devServer。但是打包前端时,并不会将devServer打包进行,即失效,因为devServer是开发时用的。然后百度搜了很多解决方法,说配置云服务器的nginx的.config文件,但是我配置之后仍然没有用,所以就使用了第二种,在后端解决跨域问题。

先在本地解决好跨域问题,我出现的问题主要是上传云服务器之后 一直出现跨域问题。

02-云服务器介绍

我使用的是腾讯云服务器
服务器相当于另一台电脑,只不过是在云上。
其实可以远程登录云服务器,打开发现和你自己的电脑一样。
也就意味着你不需要打包前端,打包后端,然后上传到云服务器上。
可以在云服务器上下载java python vue3 django 甚至是vscode idea pycharm
复制粘贴你的代码上去
但是,上线意味着你的项目要能在不同的电脑上运行,如果换一个电脑,就要再配置一下环境,重复上述操作。
这样就很麻烦。
如何做到不用配环境?那就打包。
打包会将携带的环境同样打包,不需要再在不同的电脑上配环境了。
打包完成之后,将包上传到云服务器,使用命令在后台一直运行就可以了。

03-将项目上线部署到云服务器步骤

(1)打包前端

跨域使用方法二,那么前端不需要配置devServer。

打包前端之前,要将所有的axios的url中的ip改为服务器的ip 端口号就是django在本机运行时的端口号
比如:
	假如我的服务器的ip地址是121.5.151.98
	在本机运行django时,显示的端口号是8000
	那我就这样写:
       axios
        .post('http://121.5.151.98:8000/login', {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          data: account.value,
          emulateJSON: true
        })
        .then((res) => {
        
          } else {
          
          }
        })
        .catch((err) => {
          console.log('错误信息:' + err)
        })

注意:我在服务器打开前端时,出现无法访问前端资源路径的问题,
百度之后,将router的createWebHistory改为createWebHashHistory就好了,这里的原因我不是很清楚。

然后在vscode运行指令 npm run build
出现dist文件夹 即为打包的文件夹

(2)打包后端

1、安装pyinstaller
pip install pyinstaller

2、在setting.py文件中添加 ALLOWED_HOSTS = ['*'] 允许所有ip访问
这个东西不知道是否真实有用,不过我加了。

3、修改settings.py文件中关于数据库的设置
主要是修改数据库名 用户名和密码
这些要和你的服务器上的数据库的配置一致,关于在服务器上安装配置mysql,看后面。
我用的是mysql

其他关于数据库的配置不用修改

4、制作.spec文件
pyi-makespec -D manage.py

5、manage.spec文件中要加 hiddenimports=['app01.apps']
你用的哪个模块 
本来hiddenimports=[] 但是在服务器运行后端出错 module name啥的
百度了一下要加这个 每个人的module不一样

5、开始打包
pyinstaller manage.spec

打包结束后 出现dist文件夹和build文件夹
只需上传dist文件夹即可

(3)云服务器

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述


在这里插入图片描述

网上有有很多是用一些软件如xshell
我提供一个:win+r

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

打开之后就和你自己的电脑一样。

在这里插入图片描述


宝塔面板相当于一个控制你的云服务器的面板
即你可以不用上述方式打开云服务器,直接使用宝塔面板进行软件的下载等。
百度 云服务器部署 你就可以看到很多步骤解释
我是宝塔面板和上面远程登录服务器同时使用

ps:因为我用的windows版云服务器,就比较麻烦,有可视化界面
如果是linux版 可能只要输入命令就好了--->百度

在这里插入图片描述


打开一下宝塔面板
最开始打开时 会让安装mysql ngnix等 百度步骤就好

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

这样 在浏览器地址栏输入服务器ip地址就会打开前端项目

如何运行后端项目?
我是远程打开云服务器 运行后端

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

manage.exe runserver --noreload 0.0.0.0:8000
可以在后台一直运行后端项目,这样关闭远程连接时 后端项目不会关闭
命令好像是
怎么让程序在windows后台运行
    在执行的命令前加上start /b,比如start /b run.bat。就相当于Linux下的run.sh &。
    不用后台运行也可以。关闭远程登录也会运行。

04-总结

如上结束
因为我用的是windows版的云服务器 网上的教程很少
我看了很多 搞了很久 才搞好的
网上很多都是Linux版的云服务器 
应该买Linux版的云服务器 主要是资源占用少 服务器运行不卡

如有其他问题,请大家自行查百度。多看看,多尝试,多思考错误,就会了。

猜你喜欢

转载自blog.csdn.net/m0_52041525/article/details/127830296