django-vue项目部署

上线部署准备工作

安装mysql
安装redis

　　安装: apt-get install redis-server
　　从进程中查看是否启动:  ps -aux|grep redis 端口 6379

安装nginx

　　安装: sudo apt install nginx

 　　systemctl status nginx 查看nginx的状态
 　　systemctl start/stop/enable/disable nginx 启动/关闭/设置开机启动/禁止开机启动
 
 　　或者是如下命令：
 　　service nginx status/stop/restart/start

安装uwsgi

　　pip install uwsgi 安装到虚拟环境下

注意:将window上项目文件移动到与服务器

scp -r D:\/file\/wordspace\/axf root@47.112.15.210(云服务器ip):/home/code

scp -r D:\/file\/wordspace\/axf-vue\/dist root@47.112.15.210:/home/code

一.前端vue

1.ajax请求地址修改

const ajax = axios.create({
  // baseURL: 'http://127.0.0.1:8000/'  # 本地使用
  // baseURL: 'http://47.112.15.210:8000/'
  baseURL: 'http://47.112.15.210:8080/' 改为反向代理,前端访问端口和ajax请求端口改为同一端口 
})

2.样式问题

style样式中加入 scoped 避免样式污染 <style scoped> <style>
bulid下的utils.js文件, 加入publicPath: '../../'

django-vue项目部署

3.vue打包

打包后生成dist目录

npm run build

注意: 这个时候直接打开dist/下的index.html,会发现文件可以打开，但是所有的js，css，img等路径有问题是指向根目录的。此时需要修改config/index.js里的assetsPublicPath的字段，初始项目是/他是指向项目根目录，这时改为./即可。

./ 当前目录

../ 父级目录

/ 根目录

二.使用nginx挂载整个项目

1.配置 nginx

新建文件 axfnginx.conf

upstream backend {   # 反向代理多端口配置
        server 172.17.18.103:8001;   # 云服务器内网ip
        server 172.17.18.103:8002;
        server 172.17.18.103:8003;
}

server {
        listen 8080;                # 监听8080端口
        server_name 47.112.15.210;  # 云服务器公网ip

        root /home/code/django/dist; # root参数表示前端dist文件路径
        index index.html;            # index表示访问首页地址页面，貌似只能访问首页，可注释掉
　　　　　try_files $uri $uri/ /index.html;  将默认的index注释掉，换成了try_files，它会去扫描内部目录然后再进行内部重定向。
　　　　　expires 7d;　　　expires 是nginx控制缓存的一种方式，7d=7天　

        location /api/ {   # 访问8080端口前缀为api时,请求跳转到 proxy_pass 指定的内网ip继续访问
                proxy_pass http://backend;  # proxy_pass 表示反向代理地址
        }
}

注意:nginx的配置文件中加载自定义的nginx的配置文件（也可以完全使用自定义的nginx配置文件--需填写完整参数）

vim /etc/nginx/nginx.conf
 在server中加入以下配置：
 include /home/app/conf/*.conf;

2.配置 uwsgi

新建文件 axfuwsgi.ini

[uwsgi]
master=true
pythonpath = /home/env/axfenv/bin/python3
http = 172.17.18.103:8001        # 如果为阿里云服务器，需使用内网ip； 公网ip会报错：bind(): Cannot assign requested address [core/socket.c line 769]
logto = /home/logs/axfuwsgi.log  # 设置日志文件地址
chdir = /home/code/django/axf  
module = axf.wsgi

注意: 当在浏览器中访问http://47.112.15.210:8080地址时，浏览器中将访问/app/src/dist/index.html页面，并且将页面中所有访问以/api/开头的路由地址，反向解析到backend中定义的地址与端口上。

特别注意: server中定义的监听端口为8080，因此在vue中配置访问的axios的请求前缀baseURL也将定义为http://47.112.15.210:8080

三.django后端

1.settings 文件配置

数据库名设置为对应云服务器数据库, 首先要在云服务器创建数据库
DEBUG = False # 上线时改为False,隐藏报错时出现路由
ALLOWED_HOSTS = ['*'] # 允许哪些ip访问django程序, * 代表所有

使用ngnix和uwsgi挂载项目

启动ini文件命令

/home/env/axfenv/bin/uwsgi --ini /home/conf/axfuwsgi.ini &

查看日志:

tail -f /home/logs/axfuwsgi.log   动态查看

部署需注意事项:

1.django mysql配置

密码修改为云服务器mysql密码
数据库名修改为云服务器数据库

2.nginx的配置文件中加载自定义的nginx的配置文件

vim /etc/nginx/nginx.conf
 在server中加入以下配置：
 include /home/app/conf/*.conf;

3.每次修改完 nginx.conf 相关文件,需重启nginx

service nginx status/stop/restart/start

4.阿里云服务器防火墙端口需开放

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：django-vue项目部署 - Python技术站