Vue+Django项目部署详解

我来为您详细讲解“Vue+Django项目部署详解”的完整攻略。

1. 环境准备

在进行Vue+Django项目部署之前，我们需要准备好以下环境：

一台Linux服务器，最好是Ubuntu系统
安装Docker和Docker Compose
安装Nginx和Supervisor

如果您还没有安装上述环境，可以参考以下博客进行安装：

2. Django项目部署

首先，在本地开发环境中将Django项目打包成Docker镜像，然后上传到Docker Hub。在服务器上使用Docker Compose将Django项目和PostgreSQL数据库连接到一起。

以下是一个示例的Docker Compose文件：

version: '3'
services:
  web:
    build: .
    command: python manage.py runserver 0.0.0.0:8000
    volumes:
      - .:/code
    ports:
      - "8000:8000"
    environment:
      - DB_USER=dbuser
      - DB_PASS=dbpass
      - DB_NAME=dbname
      - DB_HOST=db
  db:
    image: postgres
    environment:
      POSTGRES_USER: dbuser
      POSTGRES_PASSWORD: dbpass
      POSTGRES_DB: dbname

运行以下命令启动Django项目和PostgreSQL数据库：

docker-compose up -d

3. Vue项目部署

接着，在本地开发环境中将Vue项目打包成Docker镜像，然后上传到Docker Hub。在服务器上使用Nginx将Vue项目部署到网站的根目录下。

以下是一个示例的Nginx配置文件：

server {
    listen 80;
    server_name yourdomain.com;
    root /var/www/html;

    location / {
        proxy_pass http://127.0.0.1:8080;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

运行以下命令启动Vue项目：

docker run -d -p 8080:80 yourusername/yourimagename

4. 配置Supervisor

最后，我们使用Supervisor来维护Django和Vue项目的进程。创建两个配置文件，分别是/etc/supervisor/conf.d/django.conf和/etc/supervisor/conf.d/vue.conf。

以下是配置文件示例：

[program:django]
command=/usr/local/bin/docker-compose -f /path/to/docker-compose.yml up
directory=/path/to/directory
autostart=true
autorestart=true
redirect_stderr=true

[program:vue]
command=docker run -d -p 8080:80 yourusername/yourimagename
directory=/path/to/directory
autostart=true
autorestart=true
redirect_stderr=true

运行以下命令启动Supervisor：