django + Vue项目上线部署

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

django + Vue项目上线部署

0.安装包下载linux系统

  • node.js

    wget https://nodejs.org/download/release/v10.16.2/node-v10.16.2-linux-x64.tar.gz
    # 解压node包
    tar -zxvf node-v8.6.0-linux-x64.tar.gz
    # 配置环境变量，修改/etc/profile,可以直接使用npm和node命令
    PATH=$PATH:/opt/node-v10.16.2-linux-x64/bin
    # 验证node npm
    node -v
    npm -v

  • linux与windows互传文件工具

    yum -y install lrzsz

  • zip包解压工具

    yum -y install unzip

1.Vue部署

1.将vue项目router 下index.js的mode改为'history'
2.将封装axios模块的请求ip更改：
	- windows可以直接修改
	- linux修改：sed -i 's/127.0.0.1/182.92.100.141/g' /opt/vue_project/westmanager/src/plugins/http.js
3.项目打包：
	windows：npm run build
	linux: npm run build
4.生成dist文件将，dist文件压缩zip包，拽入虚拟机，执行：unzip dist.zip
5.等待nginx配置

2.python安装

1.安装python前库的环境
yum install gcc patch libffi-devel python-devel zlib-devel bzip2-devel openssl-devel ncurses-devel sqlite-devel readline-devel tk-devel gdbm-devel db4-devel libpcap-devel xz-devel -y
2.下载解压python安装源码包
wget https://www.python.org/ftp/python/3.6.9/Python-3.6.8.tar.xz
xz -d Python-3.6.8.tar.xz
tar -xf Python-3.8.9.tar
3.编译安装，cd到python源码包目录执行：
./configure --prefix=/opt/python3/
make && make install
4.配置python3的环境变量，cd /etc/profile
export PATH=/opt/python3/bin:$PATH
source /etc/profile

3.虚拟环境配置

1.下载虚拟环境安装包
pip3 install -i https://pypi.tuna.tsinghua.edu.cn/simple virtualenv
2.创建一个叫west_env虚拟环境
virtualenv --python=python3 west_env
3.进入虚拟环境相关操作：
	#激活虚拟环境
    source west_env/bin/activate
    #退出虚拟环境
    deactivate
4.在虚拟环境中下载项目依赖包
	- 首先导出项目依赖包，在所在项目中：
	pip3 freeze > requirements.txt
	- 然后将requirements.txt拽入虚拟机中
	- 在虚拟环境执行pip3 install -r requirements.txt

4.django项目

1.settings更改配置：
	ALLOW_HOSTS = ['*']
	DEBUG = False
2.项目压缩zip,拽入虚拟机，执行unzip 项目名   解压

5.uwsgi配置

1.虚拟环境中下载uwsgi
	pip3 install -i https://pypi.douban.com/simple uwsgi
2.创建uwsgi.ini文件
	touch uwsgi.ini
3.配置uwsgi
[uwsgi]
# Django-related settings
# the base directory (full path)
# 指定项目的绝对路径的第一层路径(很重要)
chdir = /opt/west_coast__company_project
# Django's wsgi file
# 指定项目的 wsgi.py文件
# 写入相对路径即可，这个参数是以chdir参数为相对路径
module = west_coast__company_project.wsgi
# the virtualenv (full path)
# 写入虚拟环境解释器的绝对路径
home = /opt/west_env
# process-related settings
# master
master = true
# maximum number of worker processes
# 指定uwsgi启动的进程个数(机器配置好的话可以写多点)
processes = 2
# the socket (use the full path to be safe
#socket指的是:uwsgi启动一个socket连接，当你使用nginx+uwsgi的时候，使用socket参数
socket = 0.0.0.0:9000
# 这个参数是uwsgi启动一个http连接，当你不用nginx只用uwsgi的时候，使用这个参数
#http = 0.0.0.0:9000
# ... with appropriate permissions - may be needed
# chmod-socket    = 664
# clear environment on exit
vacuum = true
#日志记录配置
daemonize = uwsgi.log
4.启动uwsgi,在uwsgi.ini目录下：uwsgi --ini  uwsgi.ini

6.redis配置

1.下载redis
	yum install redis
2.redis.conf配置，如果需要远程连接
	- 将 bind 127.0.0.1 注释掉
	- protected-mode 将yes改成no
3.启动redis
	systemctl start redis

7.Mysql配置

1.下载数据库
	yum install mariadb-server mariadb -y
2.将windows数据库备份到一个文件中：
	mysqldump -uroot -p123 库名 > J:\自己起名.sql
3.将导出备份文件west.sql拽入虚拟机内
4.启动数据库：systemctl start mariadb
5.进入数据库给数据库root设置密码123
set password for root@localhost = password("123");
6.创建一个库，要求名字与项目连接库名字一样
	create database 库名
	use 库名
7.导入数据表，数据
	source /opt/自己起名.sql

8.nginx配置

1.下载nginx：
	yum install nginx
2.更改nginx文件：vim /etc/nginx/nginx.conf
3.配置：
server {
    	#监听80端口
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  182.92.100.141;
        root         /usr/share/nginx/html;
        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;
        location / {
            	# 指定vue打包dist文件路经
                root /opt/dist;
                index index.html;
            	# 保证页面刷新时候，不会出现404
                try_files $uri $uri/ /index.html;
        }
        error_page 404 /404.html;
            location = /40x.html {
        }
        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
    }
server {
    	#监听8000端口 前端发送ajax请求就用8000端口
        listen 8000;
        # 本机公网ip
        server_name 182.92.100.141;
        location / {
            # 转到后端配置端口，也就是uwsgi配置端口
            uwsgi_pass 127.0.0.1:9000;
            include    uwsgi_params;
        }
    }
4.启动nginx
	/usr/sbin/nginx
	# 停止
	/usr/sbin/nginx -s stop
    # 重启
    /usr/sbin/nginx -s reload

  • 遇到坑：开发环境下通过 django-cors-headers 解决跨域问题，但是部署完之后又出现跨域问题,就可以解决了。

    1.在Vue前端封装axios加一个头参数
    axios.defaults.headers['Access-Control-Allow-Origin'] = '*'
    2.后端配置允许头参数
    CORS_ALLOW_HEADERS = (
    	...,
    	'Access-Control-Allow-Origin'
    )

  • nginx解决跨域问题配置

    转载nginx配置跨域请求

以上是 django + Vue项目上线部署 的全部内容， 来源链接： utcz.com/z/377781.html

回到顶部