施坤的博客
0%

腾讯云部署vue+django

发表于 分类于 阅读次数： Valine：

说明

本次主要针对在腾讯云服务器上对vue+django进行部署

vue本地配置

  • vue的请求接口修改为服务器上的ip或者域名
1
2
3
4
// 设置接口访问的根目录
axios.defaults.baseURL = "http://host:8081/myapi/"
// 设置原型属性后,其他地方如果要调用，只要用this.$http.get就可以了
Vue.prototype.$http = axios
  • 打包后
1
npm run build
  • 压缩打包后的文件传到服务器路径：/home/dist，压缩软件推荐使用：7-zip
  • 先压缩为tar

image-20220314102924031

  • 再次压缩为格式为gzip

image-20220314103056936

image-20220314103209261

  • 把dist.tar.gz上传的服务器，路径为：home

django本地

  • 主要是导出依赖文件，执行下面的命令后，项目本地会生成一个requirements.txt依赖文件
1
2
pip install pipreqs
pipreqs --use-local --encoding=utf8 --force .

服务器配置

  • 腾讯云的centos7系统内置了python3环境
1
2
3
[root@VM-24-13-centos mysite]# python  --version
Python 3.6.8

端口设置

  • 端口规则，因为腾讯云的端口除了防护墙打开外，还需要单独新建端口规则

image-20220314102334057

  • 服务器开放端口的一些配置：
1
2
3
4
5
6
7
8
firewall-cmd --zone=public --add-port=8100/tcp --permanent
firewall-cmd --zone=public --add-port=8081/tcp --permanent

firewall-cmd --reload   # 配置立即生效
firewall-cmd --zone=public --list-port # 查看防火墙所有开放的端口
 firewall-cmd --state # 查看防火墙状态
netstat -lnpt # 查看监听的端口
netstat -lnpt |grep 8081# 查看监听的具体端口

nginx配置

  • 查看 Nginx 的默认配置的安装位置
1
2
3
4
root@VM-24-13-centos git]# nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

  • 配置路径
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
vi /etc/nginx/nginx.conf

   server {
        listen       8001;
        listen       [::]:8001;
        server_name  www.XXX.123;
        root         /home/dist; # vue的路径
        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;
        error_page 404 /404.html;
        location = /404.html {
        }

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


  • 解压打包的dist压缩包
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
[root@VM-24-13-centos home]# tar -zxvf dist.tar.gz
dist/
dist/css/
dist/css/app.54a7ebec.css
dist/css/chunk-vendors.84bb20f7.css
dist/favicon.ico
dist/fonts/
dist/fonts/element-icons.535877f5.woff
dist/fonts/element-icons.732389de.ttf
dist/img/
dist/img/logo.82b9c7a5.png
dist/index.html
dist/js/
dist/js/app.942844bf.js
dist/js/app.942844bf.js.map
dist/js/chunk-vendors.0b404296.js
dist/js/chunk-vendors.0b404296.js.map

  • 重启nginx
1
systemctl restart nginx

django

  • 把django的源代码上传到服务器
  • 安装依赖文件
1
2
3
cd /usr/local/mysite
pip install -r requirements.txt

  • 测试django是否能运行
1
python3 manage.py runserver 0.0.0.0:8081
  • 出现报错文件，类似于
1
corsheaders 文件不存在
  • 这个是django装的一个跨域访问的中间件，需要手动安装
1
pip3 install django-cors-headers
  • 再次测试django是否正常，发现报错如下，看字面意思就知道是使用的sqlite版本python必须大于3.8.3
1
2
3
4
ile "/usr/local/lib/python3.6/site-packages/django/db/backends/sqlite3/base.py", line 67, in check_sqlite_version
    raise ImproperlyConfigured('SQLite 3.8.3 or later is required (found %s).' % Database.sqlite_version)
django.core.exceptions.ImproperlyConfigured: SQLite 3.8.3 or later is required (found 3.7.17).

  • 修改如下，把版本修改下就即可
1
2
3
4
5
6
vi /usr/local/lib/python3.6/site-packages/django/db/backends/sqlite3/base.py

def check_sqlite_version():
    if Database.sqlite_version_info < (3, 7, 17):
        raise ImproperlyConfigured('SQLite 3.7.17 or later is required (found %s).' % Database.sqlite_version)

  • 再次执行就不会报错：python3 manage.py runserver 0.0.0.0:8081

  • 直接新建一个sh文件，内容主要是日志记录文件和后台启动，注意日志这里文件要手动提前新建好：

1
2
3
4
5
6
7
8
9
root@VM-24-13-centos mysite]# pwd
/usr/local/mysite
[root@VM-24-13-centos mysite]# vi start_api.sh

MYDATE=`date +%Y%m%d`
ALL_LOGFILE=/home/api_log/log/log_$MYDATE

nohup python3 manage.py runserver 0.0.0.0:8081 > ${ALL_LOGFILE} 2>&1 &

  • 提前查看端口是否没有被占用，如果被占用就直接kill
1
netstat -lnpt |grep 8081
  • 执行start.sh文件
1
sh start.sh
  • 最好重启下nginx
1
systemctl restart nginx
  • 访问下域名正常

image-20220314105945414