天天看點
傳回

伺服器部署 Vue 和 Django 項目的全記錄

本篇記錄我在一個全新伺服器上部署 Vue 和 Django 前後端項目的全過程，内容包括伺服器初始配置、安裝 Django 虛拟環境、python web 伺服器 uWSGI 和反向代理 Nginx 的使用，以及報錯的糾正等。

若前後端采用的技術棧和我相同，可基本按照本文進行操作；否則可能需要了解所涉及步驟的意義和使用，再結合自己的技術棧進行調整。

本篇記錄我在一個全新伺服器上部署 Vue 和 Django 前後端項目的全過程，内容包括伺服器初始配置、安裝 Django 虛拟環境、python web 伺服器 uWSGI 和反向代理 Nginx 的使用，以及報錯的糾正等。

若前後端采用的技術棧和我相同，可基本按照本文進行操作；否則可能需要了解所涉及步驟的意義和使用，再結合自己的技術棧進行調整。

伺服器預設

租伺服器

各大雲平台，如騰訊雲、阿裡雲、華為雲等，都有學生優惠。我選擇的是騰訊雲，原因：UI好看。

我所租借伺服器的配置如下，僅供參考：

伺服器部署 Vue 和 Django 項目的全記錄
  • 鏡像資訊：CentOS 7.6 64bit
  • 執行個體規格：CPU 1核，記憶體 2GB
  • 磁盤：系統盤 40GB
  • 流量包套餐：帶寬 5Mbps，流量包 1000GB/月（免費）

我使用的是 CentOS，關于 CentOS 和 Ubuntu 鏡像的選擇，可以參考 CentOS、Ubuntu、Debian三個linux比較異同 - 知乎。

很多企業部署在生産環境的伺服器使用的是 CentOS，但對于個人網站或者課内學習之用，我認為可能 Ubuntu 會友善一些也容易上手一些，從實操來看，很多 Ubuntu 能直接 apt 下載下傳的東西，CentOS 要繞不少彎。

如果你選擇的是 Ubuntu，這篇文章也是能給你部署帶來幫助的，因為步驟大同小異

SSH 遠端連接配接

配置 SSH 遠端連接配接，友善本地操作伺服器，而無需每次都登入雲平台。

在控制台中點選登入，進入伺服器終端。第一步需要初始化超級使用者 root 的密碼，進入 superuser 權限。

sudo passwd       # 初始化密碼
su                # 切換到root超級使用者

修改配置檔案，允許密碼或密鑰遠端連接配接。

vim /etc/ssh/sshd_config      # 編輯ssh設定檔案

在打開的檔案中，修改：

RSAAuthentication yes                       # 開啟rsa驗證，需要添加
PubkeyAuthentication yes                    # 開啟公鑰登入，一般被注釋掉了，去掉前面的#就好
AuthorizedKeysFile .ssh/authorized_keys     # 公鑰儲存位置，原來就有
PasswordAuthentication yes                  # 開啟使用密碼登入

儲存退出，重新開機 SSH 服務。

service sshd restart        # 重新開機ssh服務

設定完畢後，即可在本地 powershell 或 git bash 連接配接伺服器。

ssh root@<IP address>       # IP address 為你伺服器的公網IP位址

另外，VScode 的 Remote - SSH 遠端連接配接插件真香。

添加使用者

所有指令都在 root 使用者下執行，這樣是不明智的，是以實作遠端連接配接後，我們在本地終端連接配接伺服器，使用以下指令添加一個新使用者：

adduser <username>

為其指定密碼：

passwd <username>

如果伺服器是本人的，還可以為建立的使用者添加 sudo 權限：

vim /etc/sudoers

将 root 所在行複制後改為使用者的 username，儲存後該使用者則擁有 sudo 權限；另外設定需要密碼才能使用 sudo 權限，則設定後面字段為

ALL

，不需要密碼則為

NOPASSWD:ALL

。修改後大緻為：

root      ALL=(ALL)       NOPASSWD:ALL
hadoop    ALL=(ALL:ALL)   ALL

配置公鑰

配置公鑰後，本地連接配接伺服器，無需每次都輸入密碼。

首先，生成本地電腦的公鑰。

ssh-keygen -t rsa           # 打開cmd或powershell輸入

預設回車即可，成功後在

C:\Users\使用者名\.ssh

檔案夾下會生成

id_rsa

和

id_rsa.pub

，後者就是本地使用者的密鑰。打開該檔案，複制内容。然後使用 ssh 指令登入遠端伺服器，在使用者根目錄下（

~/

）建立 .ssh 檔案夾并進入，再建立 authorized_keys 檔案，将密鑰粘貼進去，之後重新開機 ssh 服務。

service sshd restart        # 重新開機ssh

更新系統軟體包

伺服器的預配置都比較古老，依次輸入以下指令更新軟體包或依賴。

yum update -y                               # 更新系統軟體包
yum -y groupinstall "Development tools"     # 安裝軟體管理包
yum install openssl-devel bzip2-devel expat-devel gdbm-devel readline-devel sqlite-devel psmisc libffi-devel epel-release     # 安裝可能使用的依賴

配置 Django

本步驟中，我在伺服器上搭建 Django 環境，采用的是 virtualenv 虛拟環境管理器。當然我現在重新配置的話，可能不再會采用該方式了，我更推薦安裝 Anaconda 或者 Miniconda（伺服器比較小型可選擇後者），通過 Conda 來管理 Python 環境會友善一些。

TODO: 也許我什麼時候會想寫篇部落格簡單介紹一下 Conda

安裝 python3.8.4

CentOS 拿到手，發現不自帶高版本 Python 時，我是很懵的，這也是我推薦入門者用 Ubuntu 的原因之一。推薦歸推薦，當初我還是乖乖地給自己安了個 Python 3.8。

在執行以下操作前，請先輸入

python -V

檢視一下本地 Python 版本，如果是 3.x 這一步就不需要做了。

cd /usr/local                   # 我一般喜歡把檔案下載下傳到該目錄下
wget https://www.python.org/ftp/python/3.8.4/Python-3.8.4.tgz
tar -zxvf Python-3.8.4.tgz      # 解壓python包

進入 Python 包路徑，并編譯安裝到指定路徑 /usr/local/python3

cd Python-3.8.4
./configure --prefix=/usr/local/python3
make && make install

安裝成功後，建立軟連結，添加環境變量。因為伺服器系統自帶有 python、python2、python3，是以我命名為 python3.8，避免沖突。但我的伺服器隻有 pip3 沒有 pip，是以我将 pip3.8 的軟連接配接命名為 pip。

ln -s /usr/local/python3/bin/python3.8 /usr/bin/python3.8
ln -s /usr/local/python3/bin/pip3.8 /usr/bin/pip

檢測是否安裝成功。

python3.8 -V
pip -V

安裝虛拟環境

建議安裝虛拟環境 virtualenv，當不同項目要求的 python 版本不同時，不會産生沖突。

pip install virtualenv
pip install virtualenvwrapper       # 管理虛拟環境

下載下傳成功後，建立存儲虛拟環境的目錄。

mkdir ~/.virtualenvs                # 我一般存放在 /root/.virtualenvs，可自行修改

查找

virtualenvwrapper.sh

檔案位置，添加環境。

find / -name virtualenvwrapper.sh

編輯

.bash_profile

檔案，在末尾添加這兩句，其中

source

後的路徑為前面查到的路徑。

export WORKON_HOME=$HOME/.virtualenvs
source  /usr/local/python3/bin/virtualenvwrapper.sh

儲存修改後，更新配置資訊。

source ~/.bash_profile

如果儲存時報錯，在 /etc/profile 中加入下面内容，再

source

。

export VIRTUALENVWRAPPER_PYTHON=/usr/bin/python3.8
export VIRTUALENVWRAPPER_VIRTUALENV=/usr/local/python3/bin/virtualenv

建立虛拟環境

通過 -p 指定使用的Python版本，建立成功後自動進入該虛拟環境。

mkvirtualenv -p python3.8 django        # django為虛拟環境名稱

如果你希望将目前虛拟環境安裝的所有插件配置到新虛拟環境中，可以執行：

pip freeze > requirements.txt           # 導出依賴
pip install -r requirements.txt         # 進入新虛拟環境後再執行

虛拟環境的其它常用指令

  • 檢視建立的全部虛拟環境：

    workon
  • 使用某一虛拟環境：

    workon 虛拟環境名稱
  • 退出目前虛拟環境：

    deactivate
  • 删除虛拟環境：

    rmvirtualenv 虛拟環境名稱

     記得退出再删除

虛拟環境中安裝 Django 和 uWSGI

uWSGI 可以了解為伺服器上持續運作 Django 的代理伺服器，用于與 Django 後端進行資料傳輸等，後續配置需要使用。

進入前面建立的虛拟環境，安裝。

pip install django==3.2         # 可指定版本
pip install uwsgi
uWSGI 要安裝兩次，一次在虛拟環境中，另一次退出虛拟環境進行安裝

建立 uWSGI 的軟連結。

ln -s /usr/local/python3/bin/uwsgi /usr/bin/uwsgi

安裝 Nginx

Nginx 是 Http 反向代理 web 伺服器，同時也提供 IMAP/POP3/SMTP 服務，占用記憶體少，并發能力強。在這裡我們隻需要了解，Nginx 能幫我們在指定端口跑我們的項目就好了。

yum install nginx

安裝成功後，相關的檔案存儲路徑為

  • 安裝成功後，預設的網站目錄為

    /usr/share/nginx/html
  • 預設的配置檔案為

    /etc/nginx/nginx.conf
  • 自定義配置檔案目錄為

    /etc/nginx/conf.d/

在啟動之前，還需確定伺服器的相關端口已打開。http 對應 80 端口，https 對應 443 端口。一般在雲平台租的伺服器，可以在控制台中的防火牆處開啟相應端口。我的設定可供參考。

伺服器部署 Vue 和 Django 項目的全記錄

接下來啟動 Nginx

systemctl start nginx

啟動成功後，浏覽器搜尋伺服器 IP 位址，就能通路到 Nginx 首頁了。

伺服器部署 Vue 和 Django 項目的全記錄

部署項目

上傳項目

Django 後端項目檔案，直接上傳至伺服器即可。Vue 架構寫的前端，需要使用

npm run build

指令進行打包，再将生成的 dist 目錄上傳。

這裡推薦軟體 FileZilla，用于本地與伺服器檔案傳輸十分友善。

配置 uWSGI

建立檔案 uwsgi.ini，我習慣放置于 Django 項目的根目錄下，用于指定項目路徑、最大程序數、運作端口等。我的配置參數可供參考。

[uwsgi]
socket = 127.0.0.1:8080
chdir = /root/Ops/django
wsgi-file = /root/Ops/django/django3/wsgi.py
master = true 
enable-threads = true
processes = 8
buffer-size = 65536
vacuum = true
daemonize = /root/Ops/django/uwsgi.log
virtualenv = /root/.virtualenvs/django
uwsgi_read_timeout = 600
threads = 4
chmod-socket = 664

簡要介紹該檔案的配置資訊：

  • [uwsgi]

     ：必須有這個[uwsgi]，不然會報錯

  • socket

     ：該端口為後端 Django 的運作端口，可自定義，但須與後面 Nginx 的配置一緻

  • chdir

     ：django 項目路徑

  • wsgi-file

     ：django 項目的 wsgi.py 檔案路徑

  • master

     ：開啟主程序

  • processes

     ：最大程序數量

  • vacuum

     ：當伺服器退出的時候自動删除 unix socket 檔案和 pid 檔案

  • daemonize

     ：輸出日志，有報錯時可檢視

  • virtualenv

     ：項目虛拟環境路徑

切換目前路徑到 uwsgi.ini 檔案所在目錄，啟動 uWSGI。

uwsgi --ini uwsgi.ini

使用

ps

指令檢視程序，檢測是否成功。

ps -aux | grep uwsgi
伺服器部署 Vue 和 Django 項目的全記錄

配置 Nginx

這裡我部署的是域名而非IP，IP配置與域名的差別在于，不需要SSL證書字段。

首先，删除

/etc/nginx/nginx.conf

檔案中

server{...}

部分的代碼。當然，如果怕出錯，也可先将原本的 nginx.conf 檔案備份一下。

接下來，在

/etc/nginx/conf.d

檔案夾中修改預設檔案

default.conf

（若不存在則建立一個），檔案内容如下：

server {
    listen 80;
    listen 443 ssl;
    server_name  zewan.top www.zewan.top;

    location / {
        root /root/Ops/vue/dist;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
    }

    location /api {        
        include /etc/nginx/uwsgi_params;
        uwsgi_pass 127.0.0.1:8080;                                                               
    }

    ssl_certificate /etc/nginx/ssl/zewan.top.crt;
    ssl_certificate_key /etc/nginx/ssl/zewan.top.key;
    ssl_session_timeout  5m;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4:!DH:!DHE;
    ssl_prefer_server_ciphers  on;

    error_page 497  https://$host$uri?$args;
}

簡要說明檔案内容的作用：

  • listen

     後接端口，即設定通路的端口，此處同時開放 80 和 443

  • server_name

     為通路域名

  • location /

     後描述前端 dist 項目檔案夾的存放位址，需根據自身情況修改，注意 dist 即為前端項目的根目錄

  • location /api

     後為後端項目運作端口，注意

    uwsgi_pass

     後須與之前 uWSGI 的配置保持一緻

  • ssl_certificate[_key]

     為 SSL 證書存儲路徑

重要提醒

采用

location /api

與 uWSGI 連接配接，最終将後端運作在

:443/api/

。需保證後端的路由都是

api/*

，即 Django 項目的

urls.py

檔案所有路由前需加

api/

。

運作項目

檢測 Nginx 配置是否有誤，成功後重新開機 Nginx 服務。

nginx -t                # 測試
nginx -s reload         # 重新加載

注意，若修改了後端 Django 内容或其它内容，須重新開機 uWSGI 和 Nginx 服務，否則不生效！

ps -ef | grep uwsgi         # 檢視uWSGI程序
killall -9 uwsgi            # 用kill方法把uwsgi程序殺死
uwsgi --ini uwsgi.ini       # 重新開機uwsgi
nginx -s reload             # nginx平滑重新開機

另外，如果你的項目檔案存放于 root 使用者目錄下，通路網站時可能出現 500 或 403 Forbidden 權限報錯，此時需修改

/etc/nginx/nginx.conf

，将檔案首行的

user nginx

修改為

user root

。

至此網站已部署完畢。項目問卷系統已開源，歡迎交流學習！

django nginx vue web 部署
上一篇: Vue 和 Django 實作 Token 身份驗證
下一篇: IIS配置PHP環境（快速最新版）

繼續閱讀