django + 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配置跨域請求