django+vue+nginx生产环境部署配置

本文详细介绍如何在Linux环境下使用Django与Vue进行项目部署,包括Python 3.6.3、Nginx、gunicorn及supervisord的安装配置,以及Django与Vue的前后端分离部署流程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

部署环境:

1. linux redhat 7.1

2.python 3.6.3

3. vue

4. nginx

5. gunicorn

6. supervisord

安装:

一. 基础环境安装

1. python3.6.3安装

下载python3.6.3安装包,下载地址:https://www.python.org/downloads/release/python-363/

解压,编译安装,不多加赘述,安装成功后setuptools也会安装,pip3自行安装

2. django 环境部署

  如果是gitlab服务器,git clone项目地址到部署服务器,如果不是打包上传源项目包,解压安装依赖环境,如果服务器有连解外网pip3 install -r 依赖文件

  如果服务无外网那么在官网查找下载各个依赖包,通过setuptools安装,不赘述

3. VUE安装

  安装npm, vue,不赘述,具体安装不会查找教程

二. 其他托管服务,Nginx, gunicorn安装配置

1. gunicorn安装配置

  pip3 install gunicorn

  服务器无连接外网请在https://pypi.org/search/?q=gunicorn 源码包下载安装

   配置启动Runit --gunicorn_start.sh 

#!/bin/bash

NAME="projectName"                                   # Name of the application
DJANGODIR=/opt/projectName             # Django project directory
SOCKFILE=/tmp/projectName.sock   # we will communicate using this unix socket
PIDFILE=/opt/projectName/projectName.pidfile
NUM_WORKERS=4                                  # How many worker processes should Gunicorn spawn
DJANGO_SETTINGS_MODULE= projectName.settings.base          # Which settings file should Django use
DJANGO_WSGI_MODULE=projectName.wsgi                  # WSGI module name

echo "Starting $NAME as `whoami`"

# Activate the virtual environment
cd $DJANGODIR

# Start your Django Unicorn
echo "Exec $NAME as `whoami`"
exec gunicorn ${DJANGO_WSGI_MODULE}:application \
  --name $NAME \
  --workers $NUM_WORKERS \
  --bind=unix:$SOCKFILE
  --pid=$PIDFILE
  --log-level=debug \
  --log-file=/opt/projectName/gunicorn.log \
  --access-logfile=/opt/projectName/access.log \
  --worker-class=gevent \
  --max-requests 500
  "$@"

 增加X权限, sudo chmod +x gunicorn_start.sh 

试运行

2. supervisord服务安装配置,将gunicorn托管

下载supervisord,安装,安装成功后,echo_supervisord_conf > /etc/supervisord.conf 生成配置文件

配置文件更改:

# dbmanager.conf
[program:dbmanager]
command = /opt/projectName/gunicorn-start.sh                    ; Start app
stdout_logfile = /var/log/supervisor/gunicorn-supervisor.log  ; Where to write log messages
redirect_stderr = true
autostart = true
autorestart = true
stderr_logfile = /var/log/supervisor/gunicorn-supervisor.err.log

;停止信号
stopsignal=INT

3. nginx安装配置

下载nginx ,pcre:

curl -C - -O http://mirrors.sohu.com/nginx/nginx-1.13.7.tar.gz
curl -C - -O https://ftp.pcre.org/pub/pcre/pcre-8.41.tar.gz

安装pcre

tar xf pcre-8.41.tar.gz -C /usr/local/src/
# 编译
./configure --prefix=/opt/pcre make
&& make install

安装nginx

tar xf nginx-1.13.7.tar.gz -C /usr/local/src/
# 编译
./configure --prefix=/opt/nginx --with-pcre --with-http_ssl_module --user=nginx --group=nginx --with-threads --with-stream --with-stream_ssl_module --with-http_v2_module --with-http_gunzip_module

make && make install 

修改配置文件

vi /opt/nginx/conf/nginx.conf

worker_processes  4;
error_log  logs/error.log;
error_log  logs/error.log  notice;
error_log  logs/error.log  info;

pid        logs/nginx.pid;

events {
    accept_mutex on;
    multi_accept on;
    worker_connections  1024;
}
http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
        access_log /var/log/nginx/access.log combined;

        upstream app_server {
    # for UNIX domain socket setups
    server unix:/tmp/gunicorn.sock fail_timeout=0;
  }
  
    server {
        charset utf-8;
        listen       9000;
        gzip on;
        gzip_min_length  1k;
        gzip_buffers     4 16k;
        gzip_http_version 1.0;
        gzip_comp_level 2;
        gzip_types  text/plain application/x-javascript text/css application/xml;
        gzip_vary on;
        client_max_body_size 300m;
        server_name  localhost;

        # Add index.php to the list if you are using PHP
        index index.html index.htm index.nginx-debian.html;

        # 后端接口转发
    # /apiv1 对应后台接口URL
        location /apiv1 {
                proxy_pass http://unix:/tmp/projectName.sock;
                proxy_set_header Host $host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_read_timeout 300;
                proxy_connect_timeout 300;
                proxy_redirect off;
        }

        #  前端vue转发
        location / {
                try_files $uri $uri/ @router;
                index index.html;
        }
        root /opt/projectName/front/dist; #vue打包的文件目录
        #index login.html;
        location @router {
                rewrite ^.*$ /index.html last;
        }

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

测试配置文件:

/opt/nginx/sbin/nginx -t

无问题,启动服务: /opt/nginx/sbin/nginx

启动supervisord : sudo supervisord -c /etc/supervisord.conf

放通nginx端口:

/sbin/iptables -I INPUT -p tcp --dport 9000 -j ACCEPT

访问

转载于:https://www.cnblogs.com/jl-bai/p/10438864.html

### 部署 Django Vue 前后端分离项目 #### 1. **前端 Vue 项目的部署** Vue 作为前端框架,通常需要打包为静态资源文件,并通过 Nginx 或类似工具进行托管。首先,在本地开发环境使用 `npm run build` 对 Vue 项目进行打包,生成的静态文件会存放在 `dist` 目录中。 将 `dist` 文件夹上传至服务器指定目录(例如 `/var/www/html/yourproject`),然后配置 Nginx 将该目录设置为网站根目录。Nginx 配置示例如下: ```nginx server { listen 80; server_name yourdomain.com; location / { root /var/www/html/yourproject; index index.html index.htm; try_files $uri $uri/ =404; } } ``` 重启 Nginx 服务以应用配置更改: ```bash sudo systemctl restart nginx ``` 这样,前端页面即可通过域名访问。 --- #### 2. **后端 Django 项目的部署** Django 项目不能直接通过静态文件服务器运行,需借助 WSGI 服务器如 uWSGI 来处理请求。在部署前,确保已安装必要的依赖,包括 `uwsgi` `nginx`。 创建一个测试 WSGI 文件 `test.py`,用于验证 uWSGI 是否正常工作: ```python def application(env, start_response): start_response('200 OK', [('Content-Type','text/html')]) return [b"Hello World"] ``` 使用以下命令启动 uWSGI 测试服务: ```bash uwsgi --http :8000 --wsgi-file test.py ``` 若能成功访问,则说明环境配置正确。 接着,配置 Django 项目的 WSGI 模块。编辑 `wsgi.py` 文件,确保其内容如下: ```python import os from django.core.wsgi import get_wsgi_application os.environ.setdefault("DJANGO_SETTINGS_MODULE", "yourproject.settings") application = get_wsgi_application() ``` 随后编写 uWSGI 配置文件 `yourproject.ini`: ```ini [uwsgi] chdir=/path/to/yourproject module=yourproject.wsgi:application home=/path/to/virtualenv processes=4 socket=:8001 chmod-socket=660 vacuum=true ``` 启动 uWSGI: ```bash uwsgi --ini yourproject.ini ``` 最后,修改 Nginx 配置文件以代理 Django 请求: ```nginx location /api/ { include uwsgi_params; uwsgi_pass unix:/run/uwsgi/app/yourproject/socket; } ``` 重启 Nginx 并检查日志是否报错: ```bash sudo systemctl restart nginx ``` --- #### 3. **配置 Django 的静态资源媒体文件** Django 项目通常包含静态资源(CSS、JS)用户上传的媒体文件。在部署时,需将这些文件集中管理,并由 Nginx 提供服务。 在 `settings.py` 中添加以下配置: ```python STATIC_URL = '/static/' STATIC_ROOT = os.path.join(BASE_DIR, 'static') MEDIA_URL = '/media/' MEDIA_ROOT = os.path.join(BASE_DIR, 'media') ``` 执行收集静态文件命令: ```bash python manage.py collectstatic ``` 然后在 Nginx 配置中添加对静态资源媒体文件的访问支持: ```nginx location /static/ { alias /path/to/yourproject/static/; } location /media/ { alias /path/to/yourproject/media/; } ``` 此外,在总路由文件 `urls.py` 中加入对媒体文件的 URL 映射: ```python from django.conf.urls.static import static from . import settings urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT) ``` 此配置确保了用户上传的文件能够被正确访问 [^1]。 --- #### 4. **前后端联调与跨域问题** 前后端分离部署后,前端请求可能会遇到跨域问题。为解决此问题,Django 需要引入 `django-cors-headers` 插件。 安装插件: ```bash pip install django-cors-headers ``` 在 `settings.py` 中添加中间件并允许所有来源: ```python INSTALLED_APPS += ['corsheaders'] MIDDLEWARE = ['corsheaders.middleware.CorsMiddleware'] + MIDDLEWARE CORS_ORIGIN_ALLOW_ALL = True ``` 这样可确保前端可以无限制地访问后端 API [^2]。 --- ####
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值