Vue3+TypeScript+Django Rest Framework 搭建個人博客（五）：網(wǎng)站部署

時間：2023-04-18 15:06:01 | 來源：網(wǎng)站運營

時間：2023-04-18 15:06:01 來源：網(wǎng)站運營

Vue3+TypeScript+Django Rest Framework 搭建個人博客（五）：網(wǎng)站部署：

博客網(wǎng)站開發(fā)完成后，最后一棒是將博客網(wǎng)站部署到公網(wǎng)服務(wù)器上，提供域名訪問，能通過搜索引擎搜索到的博客網(wǎng)站才是真正的博客網(wǎng)站。

大家好，我是落霞孤鶩，經(jīng)過幾個星期的努力，我們已經(jīng)完成了博客的開發(fā)。這一章我們開始開始部署博客網(wǎng)站，通過公網(wǎng)服務(wù)器和域名訪問我們的博客網(wǎng)站。

一、準(zhǔn)備工作

為了能實現(xiàn)我們的網(wǎng)站能通過域名訪問，我們需要具備幾個條件：

1. 購買云服務(wù)器，這里可以自行選擇購買阿里、騰訊、華為、百度，各個平臺都有自己特定的優(yōu)惠，選擇合適自己的一個平臺即可。
2. 安裝服務(wù)器的操作系統(tǒng)，作為服務(wù)器，一般采用linux系統(tǒng)，ubuntu，cent os，debian都可以
3. 購買一個域名，可以通過云服務(wù)器提供商平臺上的域名，.cn 和 .com 都可以。
4. 購買域名證書，只有具備了證書后，通過域名訪問才會不被瀏覽器提示存在安全問題。
5. 對網(wǎng)站進(jìn)行備案，目前備案需要進(jìn)行兩次，一次是在工信部的平臺進(jìn)行 ICP 備案，通過這個備案后，還需要完成公安聯(lián)網(wǎng)備案。

二、網(wǎng)站部署

在完成了準(zhǔn)備工作后，正式開始我們的網(wǎng)站部署。

2.1 Python

由于我們的后端代碼是Python編寫的，所以在服務(wù)器上部署的時候，需要安裝Python運行環(huán)境。

這里的安裝方式，我采用官網(wǎng)的教程，版本是3.7。教程地址：https://docs.python.org/zh-cn/3.7/using/unix.html

安裝完成后在命令行中運行如下命令驗證是否安裝成功

python -Vpip -V

2.2 代碼發(fā)布

2.2.1 前端代碼

2.2.1.1 編譯

由于我們采用的是 Vue 和 TypeScript 編寫的前端，因此在部署之前，需要編譯成原生 Javascript 代碼。

在前端代碼根目錄下，執(zhí)行如下命令

yarn build執(zhí)行完成后，會在代碼路徑下生成 dist文件夾，里面是編譯后的代碼，文件結(jié)構(gòu)如下圖

2.2.1.2 上傳

在服務(wù)器中，Home目錄下，創(chuàng)建一個文件夾blog，在blog下創(chuàng)建文件夾frontend。

cd ~mkdir blogcd blogmkdir frontend然后將本地dist文件夾下的前端文件通過FTP工具上傳到~/blog/frontend路徑下，前端代碼發(fā)布完成。

2.2.2 后端代碼

由于 Python 是腳本語言，所以代碼本身不需要經(jīng)過編譯，直接將源代碼上傳到服務(wù)器對應(yīng)路徑即可。

2.2.2.1 依賴安裝

Python 的運行服務(wù)器，我們采用 uwsgi，因此需要先在服務(wù)器上安裝依賴，執(zhí)行如下命令

pip install uwsgi安裝完成后，通過命令驗證是否安裝成功

uwsgi --version

2.2.2.2 編寫 uwsgi配置文件

在后端代碼項目路徑下新建文件uwsgi.ini，我們通過socket的方式連接后端接口，配置信息如下：

[uwsgi]socket = 127.0.0.1:8000# 可以理解為此文件的絕對路徑chdir = ~/blog/backend/# wsgi與chdir的相對路徑wsgi-file = project/wsgi.pyprocesses = 4# 日志daemonize = ~/blog/backend/logs/uwsgi.logpidfile = ~/blog/backend/uwsgi.pidmaster = True在后端代碼項目路徑下新建文件uwsgi.param，文件內(nèi)容如下

uwsgi_param QUERY_STRING $query_string;uwsgi_param REQUEST_METHOD $request_method;uwsgi_param CONTENT_TYPE $content_type;uwsgi_param CONTENT_LENGTH $content_length;uwsgi_param REQUEST_URI $request_uri;uwsgi_param PATH_INFO $document_uri;uwsgi_param DOCUMENT_ROOT $document_root;uwsgi_param SERVER_PROTOCOL $server_protocol;uwsgi_param REQUEST_SCHEME $scheme;uwsgi_param HTTPS $https if_not_empty;uwsgi_param REMOTE_ADDR $remote_addr;uwsgi_param REMOTE_PORT $remote_port;uwsgi_param SERVER_PORT $server_port;uwsgi_param SERVER_NAME $server_name;

2.2.2.3 上傳代碼

在服務(wù)器的~/blog文件夾下，創(chuàng)建backend文件夾

cd ~/blogmkdir backend通過 FTP 工具將后端代碼上傳到~/blog/backend文件夾下，包括剛剛創(chuàng)建的uwsgi.ini文件然后在backend文件夾下，創(chuàng)建logs文件夾，用來記錄日志

mkdir logs至此，后端代碼已經(jīng)部署到位。

2.2.2.4 啟動和停止后端服務(wù)

通過命令啟動后端代碼

uwsgi --ini ~/blog/backend/uwsgi.ini測試可以通過日志文件查看啟動后的服務(wù)器日志

tail -f ~/blog/backend/logs/uwsgi.log停止命令如下：

uwsgi --stop ~/blog/backend/uwsgi.pid后期如果后端代碼更新，則需要先停止uwsgi服務(wù)后，再啟動代碼的更新。

2.3 Nginx

在當(dāng)前的網(wǎng)站部署中，Nginx作為反向代理服務(wù)器部署網(wǎng)站是主流操作，也已經(jīng)是成熟的網(wǎng)站部署方案。

Nginx在網(wǎng)站部署中， 一般會有以下幾個作用：

1. 反向代理，通過代理內(nèi)網(wǎng)服務(wù)器，從而讓外網(wǎng)的客戶端訪問到內(nèi)網(wǎng)服務(wù)器提供的能力和數(shù)據(jù)。
2. 負(fù)載均衡，分擔(dān)后端服務(wù)器的壓力
3. HTTP服務(wù)器，Nginx本身也是一個靜態(tài)資源的服務(wù)器，且在處理靜態(tài)資源的請求和響應(yīng)，比老牌的 Web 服務(wù)器更優(yōu)秀，性能更好。通過 Nginx 實現(xiàn)動態(tài)和靜態(tài)的分離部署。

2.3.1 安裝

網(wǎng)上有很多教程，我這里提供一個參考教程 Linux下nginx的安裝 - 濁酒盡 - 博客園 (cnblogs.com)

2.3.2 證書文件

在前面的準(zhǔn)備工作中，有提到域名證書，此時將域名證書提供商平臺上提供的證書文件下載下來，解壓后，將 Nginx 的證書上傳到服務(wù)器的 Nginx 安裝路徑中的conf文件下。

2.3.3 配置說明

Nginx 的配置文件一般存放在 Nginx 安裝路徑下的conf文件夾中，名稱是 nginx.conf。

2.3.3.1 靜態(tài)文件代理

這里有兩部分靜態(tài)文件，一部分是前端代碼文件，一部分是通過上傳接口獲得的媒體文件

location / { root ~/blog/frontend/dist; index index.html index.htm; if (!-e $request_filename) { rewrite ^/(.*) /index.html last; break; }}location /upload/ { root ~/blog/backend/; expires 24h;}

2.3.3.2 后端接口代理

在location里面有很關(guān)鍵的兩行配置uwsgi_pass blog和include ~/blog/backend/uwsgi.param，明確的是通過uwsgi的方式代理 Python 的接口

# server upstream blog{ server 127.0.0.1:8000; }location /api/ { uwsgi_pass blog; include ~/blog/backend/uwsgi.param; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Host $host; proxy_set_header accept-encodeing 'gzip, deflate'; proxy_set_header content-type 'application/json'; proxy_set_header X-Real-IP $remote_addr; proxy_set_header authorization $http_authorization; proxy_set_header accept '*/*'; proxy_set_header x-bce-date $http_x_bce_date; }

2.3.3.3 靜態(tài)文件Gzip壓縮

配置Gzip壓縮的原因是在前后端分離的場景下，網(wǎng)站首屏需要加載的內(nèi)容很多，通過縮小網(wǎng)絡(luò)傳輸過程中的文件大小，從而加快首屏渲染時的靜態(tài)文件加載。

# Gzip gzip on; gzip_min_length 1k; gzip_comp_level 3; gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml; gzip_vary on; gzip_disable "MSIE [1-6]/."; gzip_buffers 32 4k; gzip_http_version 1.0;

2.3.3.3 域名配置

server { listen 80; server_name www.longair.cn; rewrite ^(.*)$ https://${server_name}$1 permanent; }server { listen 443 ssl; server_name www.longair.cn; root html; index index.html index.htm;}

2.3.3.3 Https證書文件配置

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

2.3.3.3 Http 自動轉(zhuǎn) Https

在訪問 80 端口時，重定向到 433 端口中。

server { listen 80; server_name www.longair.cn; rewrite ^(.*)$ https://${server_name}$1 permanent; }

2.3.3.3 博客文章詳情跳轉(zhuǎn)404問題配置

由于我們使用 Vue 框架編寫的前端代碼，路由模式采用的是 history，這種模式的路由可讀性強，但文章詳情頁面的路由如果通過新開頁面的方式，會出現(xiàn)404的問題，因此我們需要對這種情況做處理，配置原理是，訪問的路徑如果不是文件結(jié)尾時，則自動重定向到首頁，進(jìn)入到index.html 后就可以通過路由變動進(jìn)入到單頁應(yīng)用的路由，從而正確渲染詳情頁面。Vue-router 官網(wǎng)文檔：HTML5 History 模式 | Vue Router (vuejs.org)

location / { root ~/blog/frontend/dist; index index.html index.htm; if (!-e $request_filename) { rewrite ^/(.*) /index.html last; break; } }

2.3.4 完整配置

完整配置如下：

user root;worker_processes 1;events { worker_connections 1024;}http { include mime.types; default_type application/octet-stream; keepalive_timeout 65; client_max_body_size 200M; # Gzip gzip on; gzip_min_length 1k; gzip_comp_level 3; gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml; gzip_vary on; gzip_disable "MSIE [1-6]/."; gzip_buffers 32 4k; gzip_http_version 1.0; # server upstream blog{ server 127.0.0.1:8000; } # blog http server { listen 80; server_name www.longair.cn; rewrite ^(.*)$ https://${server_name}$1 permanent; } server { listen *:80; listen *:443 ssl; listen [::]:80; listen [::]:443 ssl; server_name longair.cn; ssl_certificate /etc/nginx/longair.cn_nginx/server.crt; ssl_certificate_key /etc/nginx/longair.cn_nginx/server.key; return 301 https://www.longair.cn$request_uri; } # blog https server { listen 443 ssl; server_name www.longair.cn; root html; index index.html index.htm; ssl_certificate /etc/nginx/longair.cn_nginx/server.crt; ssl_certificate_key /etc/nginx/longair.cn_nginx/server.key; ssl_session_timeout 5m; ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4; ssl_protocols TLSv1 TLSv1.1 TLSv1.2; ssl_prefer_server_ciphers on; location / { root ~/blog/frontend/dist; index index.html index.htm; if (!-e $request_filename) { rewrite ^/(.*) /index.html last; break; } } location /upload/ { root /blog/backend/; expires 24h; } location /api/ { uwsgi_pass blog; include ~/blog/backend/uwsgi.param; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_set_header Host $host; proxy_set_header accept-encodeing 'gzip, deflate'; proxy_set_header content-type 'application/json'; proxy_set_header X-Real-IP $remote_addr; proxy_set_header authorization $http_authorization; proxy_set_header accept '*/*'; proxy_set_header x-bce-date $http_x_bce_date; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } location = /50x.html { root ~/blog/frontend/dist; } }}

三、網(wǎng)站的維護(hù)

3.1 Nginx的維護(hù)

3.1.1 啟動命令

/usr/local/nginx/sbin/nginx -s start

3.1.2 停止命令

/usr/local/nginx/sbin/nginx -s stop

3.3.3 重啟命令

/etc/nginx/sbin/nginx -s reload

3.3.4 日志查看命令

tail -f /etc/nginx/logs/access.logtail -f /etc/nginx/logs/error.log

3.2 UWSGI的維護(hù)

3.2.1 啟動命令

uwsgi --ini ~/blog/backend/uwsgi.ini

3.2.2 停止命令

uwsgi --stop ~/blog/backend/uwsgi.pid

3.3.3 日志查看命令

uwsgi --stop ~/blog/backend/uwsgi.pid

四、關(guān)于數(shù)據(jù)庫

在開發(fā)階段，我們采用的是非常方便的sqlite數(shù)據(jù)庫，但是如果當(dāng)網(wǎng)站部署到服務(wù)器上以后，再采用sqlite就會出現(xiàn)很多問題，比如數(shù)據(jù)安全問題，數(shù)據(jù)更新問題等，因此我們在博客部署上線時，需要切換成 Mysql 數(shù)據(jù)庫。

4.1 Mysql 安裝

我使用的5.7版本，安裝操作，請依據(jù)自己的操作系統(tǒng)參考官網(wǎng)教程安裝。MySQL :: MySQL 5.7 Reference Manual :: 2 Installing and Upgrading MySQL

4.2 數(shù)據(jù)庫搭建

在服務(wù)器上，通過命令行完成數(shù)據(jù)庫的搭建。

4.2.1 root登錄

mysql -uroot -p然后輸入密碼，回車，登錄進(jìn)入數(shù)據(jù)庫。

4.2.2 創(chuàng)建數(shù)據(jù)庫

1. 創(chuàng)建數(shù)據(jù)庫

create database blog character set utf8mb4;

1. 創(chuàng)建用戶

create user 'blog'@'%' identified by '12345678';

1. 用戶賦權(quán)

grant all privileges on blog.* to 'blog'@'%';flush privileges;

4.3 后端配置調(diào)整

4.3.1 生產(chǎn)和開發(fā)環(huán)境隔離

在開發(fā)階段，通過sqlite數(shù)據(jù)庫，調(diào)試方便，訪問速度快，而生產(chǎn)環(huán)境上，使用 Mysql 會更安全。所以我們希望開發(fā)和生產(chǎn)環(huán)境使用不同的數(shù)據(jù)庫配置。

因此我們通過在系統(tǒng)中的環(huán)境變量來判斷是生產(chǎn)環(huán)境還是測試環(huán)境，此種方式代碼可以保持一套，部署時不用做任何調(diào)整。

同時需要調(diào)整允許訪問的 host 信息。

4.3.2 數(shù)據(jù)庫密碼保護(hù)

由于我們的代碼可能會通過代碼倉庫管理，如果是Github等倉庫，可以會泄露自己的數(shù)據(jù)庫密碼，因此我們這里通過單獨的配置文件來記錄數(shù)據(jù)庫賬號信息，然后在Python中通過讀取數(shù)據(jù)庫賬號配置文件來獲取信息，從而實現(xiàn)數(shù)據(jù)庫密碼保護(hù)。

4.3.3 配置

4.3.3.1 project/settings.py

ALLOWED_HOSTS = ['www.longair.cn', '127.0.0.1', 'localhost', ]ENV_PROFILE = os.getenv("PYTHON_ENV")if ENV_PROFILE == "production": import configparser cf = configparser.ConfigParser() cf.read('/blog/db.cnf') # 這個文件的內(nèi)容在下一步會創(chuàng)建，至于路徑是哪里都可以，只要下一步創(chuàng)建的文件是在這里寫的路徑下即可 DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': cf.get('db', 'database'), 'USER': cf.get('db', 'user'), # 從配置文件中獲取數(shù)據(jù)庫用戶名 'PASSWORD': cf.get('db', 'password'), # 從配置文件中獲取數(shù)據(jù)庫密碼 'HOST': 'localhost', 'PORT': '3306' } } DEBUG = False # 生產(chǎn)環(huán)境下關(guān)閉debug模式else: DATABASES = { 'default': { 'ENGINE': 'django.db.backends.sqlite3', 'NAME': os.path.join(BASE_DIR, 'data/db.sqlite3'), } } DEBUG = True

4.3.3.2 配置環(huán)境變量

通過修改環(huán)境變量管理文件，設(shè)置環(huán)境變量，輸入命令vi ~/.bashrc，在里面添加一行：export PYTHON_ENV=production，然后按 esc，輸入：:wq 保存

最后輸入source ~/.bashrc

4.3.3.3 增加數(shù)據(jù)庫賬號配置文件

在~/blog下新增文件vi db.cnf，然后增加如下內(nèi)容：

[db]database = bloguser = blogpassword = 12345678default-character-set = utf8數(shù)據(jù)庫、賬號、密碼和上面的數(shù)據(jù)庫信息保持一致。

恭喜你，至此，博客網(wǎng)站部署完成，可以通過域名來訪問你的博客網(wǎng)站了。

下一篇我將總結(jié)一下在整個博客開發(fā)過程中遇到的問題和解決方案。