博客摘录「云服务器部署Django+React Web项目」2024年4月8日

本文链接：https://blog.csdn.net/William600227/article/details/137506117

本文详细描述了在腾讯云环境中部署React前端和Django后端项目的经历，包括环境配置（MySQL、Python、Node.js、React、Nginx、uWSGI和Git的安装）以及项目启动（Django与Nginx的启动配置）。

摘要由CSDN通过智能技术生成

前言
本文記錄了一次在騰訊雲端伺服器部署Web專案的經歷，專案前端使用React，後端使用Python的Django框架；

前端透過向後端連接埠發送請求呼叫後端API，資料透過json交換，使用Nginx分別部署前端和後端；

文章主要內容分為兩部分：環境配置與專案啟動，大致內容如下，可透過的目錄查看指定內容；

環境配置
1.設定Django環境：依序安裝MySQL資料庫，Python，建立專案運行虛擬環境，安裝uWSGI用來啟動Django專案；
2、設定React環境：安裝Node.js，安裝React，安裝Nginx；
3.安裝Git用來推送代碼；
項目啟動
1.使用uWSGI啟動Django項目，包含數據庫建立與配置，配置uwsgi.ini檔案啟動Django項目；
2、使用Nginx啟動前端項目，包含前端React項目打包，和nginx .conf檔案配置；
環境配置
1、MySQL數據庫
因為Django專案使用Mysql數據庫，所以首先需要在Linux系統下安裝Mysql服務並啟動，然後根據專案設定檔建立數據庫與用戶；

安裝Mysql伺服器：
-- 安裝服務
yum install mariadb-server -y
-- 安裝客戶端
yum install mariadb -y
啟動與登錄
-- 啟動與停止
systemctl start mariadb
systemctl stop mariadb -- 設定開機啟動與登錄-- 啟動與停止systemctl start mariadb systemctl stop mariadb
-- 設定開機啟動
enable mariadb
--初始登入
mysql -u root -p
資料庫建立、使用者配置與Django項目資料遷移參考項目啟動部分的資料庫配置部分；
2、安裝Python
要運行Django項目，首先需要安裝Python環境，運行Django4.1版本需要Python版本在3.8以上，具體安裝可以參考以下這兩篇文章，這裡只做簡單介紹：

Django官方檔案：如何安裝Django | Django 檔案| Django
在Linux安裝Python環境：Linux上Python環境配置- 碼農教學
以python3.9為例，在Linux上安裝Python環境的大致步驟如下：

1.安裝下載工具與依賴
-- 安裝wget檔案下載工具
yum -y install wget
-- 安裝gcc:程式語言編譯器
yum -y install gcc
-- 安裝依賴
yum -y install zlib zlib-devel
yum -y install bzip2 bzip2-devel
yum -y install openssl openssl-devel
yum -y install ncurses ncurses-devel
yum -y install sqlite sqlite-devel
yum -y install readline readline-dedbvel
yum -y install tk-deinstall ginstallm-dellline-
dedbm devel
yum -y install xz lzma xz-devel
yum -y install libffi-devel
yum -y install mysql-devel
yum -y install python-devel yum -y install libffi-devel 2、install python-devel
yum -y install libffi-devel
2、下載Python-3.9.壓縮安裝
-- 下載Python-3.9.5.tgz
wget https://www.python.org/ftp/python/3.9.5/Python-3.9.5.tgz
-- 解壓縮安裝套件
tar -zxvf Python-3.9. 5.tgz
-- 在home目錄下，建立python3資料夾
mkdir -p /home/python3
-- 進入解壓縮後python3.9.5目錄
cd Python-3.9.5
-- 設定安裝目錄為/home/python3
./configure - -prefix=/home/python3
-- 編譯&編譯安裝
make && make install
3、設定環境變數
mv /usr/bin/python3 /usr/bin/python3.bak
ln -s /home/python3/bin/python3.9 /usr/bin/python
4.設定pip豆瓣來源（選購）
-- 設定預設下載來源
pip3 config set global.index-url https://mirrors.aliyun.com/pypi/simple
-- 或pip安裝套件時，新增連結
pip3 install package -i http://pypi.douban.com/simple/ --trusted-host pypi.douba.com
3.創建虛擬環境
使用virtualenv用於創建多個獨立的Python環境，用於運行不同的項目

1.安裝virtualenv
pip3 install virtualenv
2、創建虛擬環境
-- 在主目录下创建envs文件夹，在该文件夹下创建不同的环境
mkdir envs
virtualenv /envs/test --python=python3.9
3、一些其他操作命令
-- 激活虚拟环境
source /envs/test/bin/activate
workon:列出虚拟环境列表
lsvirtualenv:同上
mkvirtualenv :新建虚拟环境
workon [虚拟环境名称]:切换虚拟环境
rmvirtualenv :删除虚拟环境
deactivate: 离开虚拟环境
4.安裝Git
使用Git進行程式碼管理，方便將本地代碼推動至伺服器

安裝Git
pip3 install git
國內可以使用Gitee作為程式碼託管平台，具體使用方法可以參考官方文件：Gitee 幫助中心| Gitee 產品文檔
以下為一些Git基礎操作指令：
git clone SSH：线上库克隆到仓库
git checkout -b 分支名：新添加分支
git switch 切换分支
git branch 查看分支

-- 代码推送
git status: 查看当前状态
git add --a：添加全部文件到仓库
git add 单个文件：添加单个文件到仓库
git commit -m "":提交推送说明
git push origin master:推送代码到分支

-- 代码下载
git pull origin master:下载分支代码到本地
5.安裝React
首先要安裝Node.js, 安裝步驟如下：

建立並進入到node目錄
mkdir /usr/local/node && cd /usr/local/node
下載node.js（以node-v16.17.0為例）
curl -O https://nodejs.org/dist/v16.17.0/node-v16.17.0-linux-x64.tar.xz
解壓縮文件
tar -vxf node-v16.17.0-linux-x64.tar.xz
cd node-v16.17.0-linux-x6
配置環境變數
ln -s /usr/local/node/node-v16.17.0-linux-x64/bin/npm /usr/local/bin
ln -s /usr/local/node/node-v16.17.0-linux-x64/bin/node /usr/local/bin
測試，若正常顯示版本號，則安裝成功
node -v
npm -v
接下來安裝React

安裝React：
npm install -g create-react-app
npm install react react-dom
關於React的簡介，專案建立啟動等，可以參考官方文檔，這裡不做過多介紹，快速入門– React 中文文檔
6、安裝uwsgi
在Django專案測試與開發中，常用自備的runserver方法啟動項目，在專案真正部署時，常用uwsgi啟動Django項目，uwsgi安裝步驟如下：

下載與安裝
-- 可以先激活虚拟环境，在虚拟环境下安装

-- 1.安装：
pip3 install uwsgi

-- 2.建立软链接
ln -s /usr/local/python3/bin/uwsgi /usr/bin/uwsgi

-- 3.查看uwsgi版本
uwsgi --version
7.安裝Nginx
在Web專案部署時，使用Nginx接收並處理靜態請求，一旦收到動態請求，則轉送uWSGI，再由uWSGI交給Django進行處理

nginx安裝步驟如下：
-- 1、安装
yum install nginx -y

-- 2.查看nginx版本
nginx -v
專案啟動
1.使用uwsgi啟動後端
在專案根目錄下建立uwsgi.ini文件，設定uwsgi屬性，檔案配置參考：
[uwsgi]
#配置和nginx连接的socket连接
socket=127.0.0.1:8080
#http=127.0.0.1:8080
#配置项目路径，项目的所在目录
chdir=/data/Code/my_web/backend
#配置wsgi接口模块文件路径,也就是wsgi.py这个文件所在的目录名
wsgi-file=my_blog/wsgi.py
# 要是用的WSGI模块
module=log_analysis.wsgi
#配置启动管理主进程
master=True
#配置启动的进程数
processes=2
#配置每个进程的线程数
threads=2
#配置存放主进程的进程号文件
pidfile=uwsgi.pid
#配置dump日志记录
daemonize=uwsgi.log
#虚拟环境地址
virtualenv=/envs/blog
#新增：设置最大缓冲区为32K
buffer-size=32768

使用：
-- 啟動uwsgi
uwsgi --ini uwsgi.ini--
停止
執行uwsgi，透過包含主進程編號的檔案設定停止項目
uwsgi --stop uwsgi.pid xxx--
重啟
uwsgi
uwsgi --reload uwsgi.pid xxx--
查看
進程
ps -ef | grep uwsgi
kill -9 pid--
查看
日誌
tail -20f uwsgi.log
2.使用Nginx啟動前端
打包前端項目，並將打包後的結果配置在nginx.conf檔案中
配置/etc/nginx/nginx.conf文件，文件語法參考：nginx.conf配置文件語法詳解_nginx.conf nginx.conf.default 區別-CSDN博客
# ginx進程數，建議設置為等於CPU總核心數
worker_processes 2 ;
events
{
# 一個worker_processe 允許的最大並發連線數量
worker_connections 1024;
}
http
{
include mime.types; default_type
application/octet-stream;
sendfile on;
keepalive_timeout 65;
server {
#enxx
;
自己的域名，沒有網域修改為本機IP位址
server_name 127.0.0.1;
charset utf-8;
#
設定預設靜態檔案目錄
location / {
# 定義伺服器預設網站根目錄位置，將打包好React的目錄放在這裡
root /data/Code/my_web/frontend/build;;
# 定義首頁索引檔案的名稱
index index.html index.htm;
# 頁面刷新時根據url位址尋找頁面
try_files $uri $uri/ /index.html;
}

location ~ /api/* {
# 設定關聯uwsgi
include uwsgi_params;
# 埠要和uwsgi裡配置的一樣
uwsgi_pass 127.0.0.1:8080;
client_max_body_size 100m
; proxy_connect_xyout 20time proxy_body_size 100m
; proxy_connect_xyout 20time_xy_xy 503 504 /50x. html; location = /50x.html { root html; } } }使用：-- 啟動nginx nginx--查看nginx狀態systemctl status nginx -- 開啟nginx服務systemctl start nginx-- 關閉nginx服務systemctl stop nginx- - 關閉nginx nginx -s stop--重啟nignx systemctl restart nginx -- 查看nginx進程ps -ef | grep nginx ————————————————