nginx + uwsgi 部署 Django+Vue项目

时间 2020-06-09

标签 nginx uwsgi 部署 django+vue django vue 项目栏目 Nginx 繁體版

原文原文链接

nginx + uwsgi 部署 Django+Vue项目

windows 本地 DNS 解析文件路径 C:\Windows\System32\drivers\etc

单机本地测试运行方式，调用django第三方的wsgifef单机模块，性能很低 python3 manage.py runserver 0.0.0.0:8000html
使用uwsgi 去启动django项目，支持并发更多前端
准备先后端代码vue
先从vue前端搞起node
1. 解决node环境python
2. 更改vue发送请求的接口地址，这个vue发送的地址，应该是发送给 nginx代理，而后代理再转发请求给 DRF 后台linux
```
# 用如下命令，更改vue发送的接口地址
sed  -i  "s/127.0.0.1/192.168.15.71/g"    /opt/s16luffy/07-luffy_project_01/src/restful/api.js
```
  待会要准备nginx的代理地址，以下 192.168.15.71:8000nginx
3. 打包编译vue静态文件 npm install npm run buildredis
```
#若是你打包不成功
1.更换4G网络，开始打包
2.在windows中打包，生成dist文件夹后，发送给linux 
3.在同桌机器上打包，生成dist后，发送给本身
4.更换淘宝的 npm源，加速下载
```
4. 生成的dist文件夹，就是路飞学成的静态页面，丢给nginx去返回页面便可数据库

配置nginx.conf找到vue的静态页面npm

# 配置
    server{
        listen 80;
        server_name  项目地址.com;
        location / {
            root  /opt/项目目录/dist;
            index index.html;
            # vue 结合 nginx 再也不刷新出现 404
            try_files $uri $uri/ /index.html;
        }
        error_page  404 400 401 403     /jQuery404/40x.html;
    }
	# 转发请求到 192.168.15.74:9000
    server{
        listen 8000;
        server_name  vuelufei.com;
        location / {
          uwsgi_pass 192.168.15.74:9000;
          include  /opt/nginx112/conf/uwsgi_params;
        }
    }

配置后端代码，用uwsgi启动luffy学诚

mkvirtualenv  虚拟环境名字  # 建立虚拟环境
pip3 list  
pip3 install -r requirements.txt  #  导入项目依赖

准备uwsgi，以及uwsgi.ini

uwsgi.ini配置参数以下

(uwsgi_xiangmuming) [root@s16ds zhangfei]# cat uwsgi.ini 

[uwsgi]
# Django-related settings
# the base directory (full path)
#指定django的项目目录，第一层
chdir           = /opt/s16luffy/luffy_boy/
# Django's wsgi file
#找到django的wsgi文件
#这里须要写项目的第二层目录Alibab_crm
module          = luffy_boy.wsgi
# the virtualenv (full path)
#填写虚拟环境的绝对路径
home            =/root/Envs/uwsgi_luffycity
# process-related settings
# master
master          = true
# maximum number of worker processes
processes       = 5
# the socket (use the full path to be safe
#指定socket协议，运行django，只能与nginx结合时使用
#指定socket协议，运行django，只能与nginx结合时使用
socket          = 0.0.0.0:9000

#若是你没用nginx，只想本身启动一个http界面，用这个
#http =  0.0.0.0:8000

# ... with appropriate permissions - may be needed
# chmod-socket    = 664
# clear environment on exit
vacuum          = true

更改django后台的redis数据库链接

更改redis链接

CACHES = {
    "default": {
        "BACKEND": "django_redis.cache.RedisCache",
        "LOCATION": "redis://192.168.15.71:6666",  
        "OPTIONS": {
            "CLIENT_CLASS": "django_redis.client.DefaultClient",
            "CONNECTION_POOL_KWARGS": {"max_connections": 100},
            # "PASSWORD": "密码",
            "DECODE_RESPONSES":True
        }
    },
}

更改redis数据库链接的驱动，用django的驱动

vim /opt/项目目录/api/views/shoppingcart.py

修改以下

import redis
# REDIS_CONN = redis.Redis(decode_responses=True)
REDIS_CONN = get_redis_connection()

启动redis数据库，注意更改redis的安全模式，

redis-6666.conf配置以下 (uwsgi_luffycity) [root@s16ds redis-4.0.10]# cat redis-6666.conf

port 6666
daemonize yes
pidfile /data/6666/redis.pid
loglevel notice
logfile "/data/6666/redis.log"
dir /data/6666
appendonly yes
appendfsync everysec
protected-mode no
bind 192.168.15.71

启动redis服务端
```
redis-server redis-6666.conf
```

确保vue和nginx，以及uwsgi都启动了，测试以浏览器访问
解决 vue 结合 nginx 刷新 404 解决办法

确保 vue router 的 mode 路径 vue项目/router/index.js 修改配置:

export default new Router({
linkActiveClass:'is-active',
mode:'history', // 改为history 模式
...
})

修改nginx.conf代码

server {
    listen   80;
    server_name  vueluffy.com;
    location / {
    root /opt/luffy/dist;
    index index.html;
    # 主要参数
    try_files uri uri/ /index.html; 

}
}

virtualenv virtualevnwrapper pyenv