nginx + uwsgi 部署 Django+Vue项目

Posted zhang-zi-yi

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了nginx + uwsgi 部署 Django+Vue项目相关的知识,希望对你有一定的参考价值。

nginx + uwsgi 部署 Django+Vue项目

  • windows 本地 DNS 解析 文件路径 C:\Windows\System32\drivers\etc
  1. 单机本地测试运行方式,调用django第三方的wsgifef单机模块,性能很低
    python3 manage.py runserver 0.0.0.0:8000

  2. 使用uwsgi 去启动django项目,支持并发更多

  3. 准备前后端代码

  4. 先从vue前端搞起

    1. 解决node环境

    2. 更改vue发送请求的接口地址,
      这个vue发送的地址,应该是发送给 nginx代理,然后代理再转发请求给 DRF 后台

      # 用以下命令,更改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:8000

    3. 打包编译vue静态文件
      npm install
      npm run build

      #如果你打包不成功
      1.更换4G网络,开始打包
      2.在windows中打包,生成dist文件夹后,发送给linux 
      3.在同桌机器上打包,生成dist后,发送给自己
      4.更换淘宝的 npm源,加速下载
    4. 生成的dist文件夹,就是路飞学成的静态页面,丢给nginx去返回页面即可

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

         # 配置
        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;
            }
        }
    
  6. 配置后端代码,用uwsgi启动luffy学诚

    mkvirtualenv  虚拟环境名字  # 创建虚拟环境
    pip3 list  
    pip3 install -r requirements.txt  #  导入项目依赖
  7. 准备uwsgi,以及uwsgi.ini

uwsgi.ini配置参数如下
```bash
(uwsgi_xiangmuming) [[email protected] 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
```

  1. 更改django后台的redis数据库连接

    1. 更改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
              }
          },
      }
    2. 更改redis数据库连接的驱动,用django的驱动

      vim /opt/项目目录/api/views/shoppingcart.py 
      修改如下
      import redis
      # REDIS_CONN = redis.Redis(decode_responses=True)
      REDIS_CONN = get_redis_connection()
    3. 启动redis数据库,注意更改redis的安全模式,

      redis-6666.conf配置如下
      (uwsgi_luffycity) [[email protected] 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
    4. 启动redis服务端

      redis-server redis-6666.conf 
  2. 确保vue和nginx,以及uwsgi都启动了,测试以浏览器访问

  3. 解决 vue 结合 nginx 刷新 404 解决办法

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

export default new Router({
linkActiveClass:'is-active',
mode:'history', // 改成history 模式
...
})
  1. 修改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

?

以上是关于nginx + uwsgi 部署 Django+Vue项目的主要内容,如果未能解决你的问题,请参考以下文章

Django部署——uwsgi+Nginx(超详细)

Nginx+uWSGI+Django部署web服务器

[部署开发环境]部署django的生成环境nginx+uwsgi+django

Django + Uwsgi + Nginx 实现生产环境部署

Django + Uwsgi + Nginx 实现生产环境部署

Django3.0 + nginx + uwsgi 部署