用uwsgi和nginx 部署 django和vue打造的前后端分離項目

前言

由于現在沒有徹底掌握nginx的使用，部署起來有點磕磕絆絆，為了防止以后再次需要部署的時候無法快速找到適合的資料，以此文章記錄簡單的部署步驟。

項目部署環境

ubuntu16.04

python3.6.8

django 3.0.6

部署步驟

uwsgi部署django項目。

nginx部署vue項目。

配置nginx解決vue前端接口轉發。

步驟１

uwsgi部署django項目。

1.更改django的settings.py文件

• DEBUG=True改為DEBUG=False
• ALLOWED_HOSTS = ["*"]
  ALLOWED_HOSTS是為了限定請求中的host值，以防止黑客構造包來發送請求。只有在列表中的host才能訪問。強烈建議不要使用*通配符去配置，另外當DEBUG設置為False的時候必須配置這個配置。否則會拋出異常。這里暫時以 * 設置，等正式發布之后改成對應的域名。

2.安裝uwsgi

pip3 install uwsgi

3.收集靜態資源

在django的settings.py中增加如下：

# 靜態資源訪問的起始url STATIC_URL = '/static/' # 指定靜態資源所在的目錄 STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static') ] # 設置收集靜態資源的路徑(部署時使用) STATIC_ROOT = os.path.join(BASE_DIR, 'collect_static/')

然后在項目根目錄下(manage.py同級)運行如下命令：

python manage.py collectstatic

4.準備uwsgi的配置文件

假設我項目中的wsgi.py文件的路徑如下。

/home/tk/Project/test_LP100/ThinkCloud/wsgi.py

在項目根目錄下創建一個文件 uwsgi.ini并配置uwsgi.ini文件如下：

[uwsgi] # 監聽的端口 http=0.0.0.0:8080# chdir配置項目的根目錄 chdir=/home/tk/Project/test_LP100/ThinkCloud# 主應用中的wsgi文件 wsgi-file=ThinkCloud/wsgi.py# 代理靜態資源：路徑映射 # 單獨使用uwsgi時可使用這個路徑映射，搭配nginx的話，使用nginx #static-map=/static=/home/tk/Project/test_LP100/ThinkCloud/collect_static# 啟動一個master進程，來管理其余的子進程 master=True processes = 4 threads = 2# 保存主進程的pid，用來控制uwsgi服務 pidfile=/home/tk/Project/test_LP100/ThinkCloud/uwsgi.pid# 設置后臺運行，保存日志 daemonize=/home/tk/Project/test_LP100/ThinkCloud/Logs/uwsgi.log # deamonize=1 ; 用來配置background運行# 設置每個工作進程處理請求的上限，達到上限時，將回收（重啟）該進程。可以預防內存泄漏 max-requests=5000# 服務停止時自動移除unix Socket和pid文件 vacuum=true

5.uwsgi --ini uwsgi.ini 啟動uwsgi服務

進入到uwsgi.ini的所在路徑中執行uwsgi --ini uwsgi.ini命令啟動uwsgi服務，至此django的部署就告一段落。當然如果不進入到配置文件所在目錄中也可以在命令中將路徑直接寫進去也可以。

這個時候可以通過用postman訪問一下服務器上配置的后端是否能被訪問到來測試一下后端的配置是否成功。

步驟二

nginx部署vue項目

先通過npm run build將vue項目打包。打包完成后會在前端項目的根目錄里出現一個dist文件夾。

將第一步打包產生的dist文件夾放入服務器中想放的位置。

安裝nginx

sudo apt update sudo apt install nginx

啟動nginx查看是否安裝成功

systemctl start nginx

用命令啟動nginx服務后，訪問服務器地址，應該可以看到 Welcome to nginx！字樣。這表示安裝和啟動nginx服務成功。

關于sites-available和sites-enabled的介紹

在/etc/nginx路徑下會有兩個文件夾。一個是sites-available和sites-enabled。

sites-available里面放的是一些nginx的配置文件，默認只有一個default。在sites-enabled中也有一個default，是sites-available中的default的軟鏈接。放在sites-enabled中的文件是表示啟用的配置文件，可以在/etc/nginx/nginx.conf文件中看到有如下的一行配置，可以看到sites-enabled中的所有配置文件都被引入進來了。

include /etc/nginx/sites-enabled/*;

開始配置

我們首先將sites-enabled中的default文件刪除（因為只是一個軟鏈接如果有需要可以再建立一個）。

在sites-available中創建一個文件，例如叫lp100.conf。

配置內容如下：

server {# 監聽80端口listen 80;# 這里可以暫時先忽略server_name test.com; # 域名或IP# 當訪問 http://ip地址/ 的時候# 這里是配置的前端項目location / {# root這里寫打包好的前端項目的dist文件夾的路徑(包括dist)root /home/tk/Project/test_LP100/ThinkCloud/dist;# hash模式只配置訪問html就可以了index index.html;# history模式下try_files $uri $uri/ /index.html;} }

在sites-enabled中建立一個剛才創建的nginx配置文件的軟連接到 sites-enabled文件夾中。

cd ../sites-enabled ln -s ../sites-available/lp100.conf

重啟nginx服務，測試vue項目是否部署成功

systemctl restart nginx

訪問 http://[ip地址]:[指定端口]，如果能出現前端頁面則vue項目部署成功。

步驟三

前端的接口請求轉發。

經歷了步驟一和步驟二之后，單獨訪問后端接口和單獨訪問前端頁面都是可行的了，只是前端頁面并不能拿到后端接口中的數據，這是為啥呢？因為前端的接口沒有轉發到后端上呀？本來這個事情在開發的時候是在vue.config.js中配置的，現在在生產環境下，就需要nginx來處理了。

我們重新打開步驟二中的lp100.conf文件，新增配置。這個配置就是和vue項目中的vue.config.js中配置proxy是差不多的，添加完的lp100.conf文件內容如下：

server {# 監聽80端口listen 80;# 這里可以暫時先忽略server_name 192.168.4.117; # 域名或IPcharset utf-8;# 上傳文件大小的限制client_max_body_size 75M;# 靜態文件配置location /static {alias /home/tk/Project/test_LP100/ThinkCloud/collect_static;}location / {root /home/tk/Project/test_LP100/ThinkCloud/dist;include /home/tk/Project/test_LP100/ThinkCloud/uwsgi_params;proxy_pass http://0.0.0.0:8080; # 這里端口必須要和上面uwsgi.ini文件中配置的一樣proxy_set_header Host $host;proxy_set_header X-Forwarded-For $remote_addr;} }

配置完成后重啟nginx服務即可

注：使用uwsgi --ini uwsgi.ini啟動項目時，盡量在虛擬環境里面進行啟動sudo pip install virtualenv # 安裝虛擬環境virtualenv -p /usr/bin/python3.8 venv # 創建指定的python版本虛擬環境source venv/bin/activate # 進入虛擬環境deactivate # 退出虛擬環境

總結

以上是生活随笔為你收集整理的用uwsgi和nginx 部署 django和vue打造的前后端分离项目的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。