Vue3+TypeScript+Django Rest Framework 搭建个人博客（五）：网站部署

时间：2023-04-18 15:06:01 | 来源：网站运营

时间：2023-04-18 15:06:01 来源：网站运营

Vue3+TypeScript+Django Rest Framework 搭建个人博客（五）：网站部署：

博客网站开发完成后，最后一棒是将博客网站部署到公网服务器上，提供域名访问，能通过搜索引擎搜索到的博客网站才是真正的博客网站。

大家好，我是落霞孤鹜，经过几个星期的努力，我们已经完成了博客的开发。这一章我们开始开始部署博客网站，通过公网服务器和域名访问我们的博客网站。

一、准备工作

为了能实现我们的网站能通过域名访问，我们需要具备几个条件：

1. 购买云服务器，这里可以自行选择购买阿里、腾讯、华为、百度，各个平台都有自己特定的优惠，选择合适自己的一个平台即可。
2. 安装服务器的操作系统，作为服务器，一般采用linux系统，ubuntu，cent os，debian都可以
3. 购买一个域名，可以通过云服务器提供商平台上的域名，.cn 和 .com 都可以。
4. 购买域名证书，只有具备了证书后，通过域名访问才会不被浏览器提示存在安全问题。
5. 对网站进行备案，目前备案需要进行两次，一次是在工信部的平台进行 ICP 备案，通过这个备案后，还需要完成公安联网备案。

二、网站部署

在完成了准备工作后，正式开始我们的网站部署。

2.1 Python

由于我们的后端代码是Python编写的，所以在服务器上部署的时候，需要安装Python运行环境。

这里的安装方式，我采用官网的教程，版本是3.7。教程地址：https://docs.python.org/zh-cn/3.7/using/unix.html

安装完成后在命令行中运行如下命令验证是否安装成功

python -Vpip -V

2.2 代码发布

2.2.1 前端代码

2.2.1.1 编译

由于我们采用的是 Vue 和 TypeScript 编写的前端，因此在部署之前，需要编译成原生 Javascript 代码。

在前端代码根目录下，执行如下命令

yarn build执行完成后，会在代码路径下生成 dist文件夹，里面是编译后的代码，文件结构如下图

2.2.1.2 上传

在服务器中，Home目录下，创建一个文件夹blog，在blog下创建文件夹frontend。

cd ~mkdir blogcd blogmkdir frontend然后将本地dist文件夹下的前端文件通过FTP工具上传到~/blog/frontend路径下，前端代码发布完成。

2.2.2 后端代码

由于 Python 是脚本语言，所以代码本身不需要经过编译，直接将源代码上传到服务器对应路径即可。

2.2.2.1 依赖安装

Python 的运行服务器，我们采用 uwsgi，因此需要先在服务器上安装依赖，执行如下命令

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，文件内容如下

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 上传代码

在服务器的~/blog文件夹下，创建backend文件夹

cd ~/blogmkdir backend通过 FTP 工具将后端代码上传到~/blog/backend文件夹下，包括刚刚创建的uwsgi.ini文件然后在backend文件夹下，创建logs文件夹，用来记录日志

mkdir logs至此，后端代码已经部署到位。

2.2.2.4 启动和停止后端服务

通过命令启动后端代码

uwsgi --ini ~/blog/backend/uwsgi.ini测试可以通过日志文件查看启动后的服务器日志

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

uwsgi --stop ~/blog/backend/uwsgi.pid后期如果后端代码更新，则需要先停止uwsgi服务后，再启动代码的更新。

2.3 Nginx

在当前的网站部署中，Nginx作为反向代理服务器部署网站是主流操作，也已经是成熟的网站部署方案。

Nginx在网站部署中， 一般会有以下几个作用：

1. 反向代理，通过代理内网服务器，从而让外网的客户端访问到内网服务器提供的能力和数据。
2. 负载均衡，分担后端服务器的压力
3. HTTP服务器，Nginx本身也是一个静态资源的服务器，且在处理静态资源的请求和响应，比老牌的 Web 服务器更优秀，性能更好。通过 Nginx 实现动态和静态的分离部署。

2.3.1 安装

网上有很多教程，我这里提供一个参考教程 Linux下nginx的安装 - 浊酒尽 - 博客园 (cnblogs.com)

2.3.2 证书文件

在前面的准备工作中，有提到域名证书，此时将域名证书提供商平台上提供的证书文件下载下来，解压后，将 Nginx 的证书上传到服务器的 Nginx 安装路径中的conf文件下。

2.3.3 配置说明

Nginx 的配置文件一般存放在 Nginx 安装路径下的conf文件夹中，名称是 nginx.conf。

2.3.3.1 静态文件代理

这里有两部分静态文件，一部分是前端代码文件，一部分是通过上传接口获得的媒体文件

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里面有很关键的两行配置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 静态文件Gzip压缩

配置Gzip压缩的原因是在前后端分离的场景下，网站首屏需要加载的内容很多，通过缩小网络传输过程中的文件大小，从而加快首屏渲染时的静态文件加载。

# 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 自动转 Https

在访问 80 端口时，重定向到 433 端口中。

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

2.3.3.3 博客文章详情跳转404问题配置

由于我们使用 Vue 框架编写的前端代码，路由模式采用的是 history，这种模式的路由可读性强，但文章详情页面的路由如果通过新开页面的方式，会出现404的问题，因此我们需要对这种情况做处理，配置原理是，访问的路径如果不是文件结尾时，则自动重定向到首页，进入到index.html 后就可以通过路由变动进入到单页应用的路由，从而正确渲染详情页面。Vue-router 官网文档：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; } }}

三、网站的维护

3.1 Nginx的维护

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的维护

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

四、关于数据库

在开发阶段，我们采用的是非常方便的sqlite数据库，但是如果当网站部署到服务器上以后，再采用sqlite就会出现很多问题，比如数据安全问题，数据更新问题等，因此我们在博客部署上线时，需要切换成 Mysql 数据库。

4.1 Mysql 安装

我使用的5.7版本，安装操作，请依据自己的操作系统参考官网教程安装。MySQL :: MySQL 5.7 Reference Manual :: 2 Installing and Upgrading MySQL

4.2 数据库搭建

在服务器上，通过命令行完成数据库的搭建。

4.2.1 root登录

mysql -uroot -p然后输入密码，回车，登录进入数据库。

4.2.2 创建数据库

1. 创建数据库

create database blog character set utf8mb4;

1. 创建用户

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

1. 用户赋权

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

4.3 后端配置调整

4.3.1 生产和开发环境隔离

在开发阶段，通过sqlite数据库，调试方便，访问速度快，而生产环境上，使用 Mysql 会更安全。所以我们希望开发和生产环境使用不同的数据库配置。

因此我们通过在系统中的环境变量来判断是生产环境还是测试环境，此种方式代码可以保持一套，部署时不用做任何调整。

同时需要调整允许访问的 host 信息。

4.3.2 数据库密码保护

由于我们的代码可能会通过代码仓库管理，如果是Github等仓库，可以会泄露自己的数据库密码，因此我们这里通过单独的配置文件来记录数据库账号信息，然后在Python中通过读取数据库账号配置文件来获取信息，从而实现数据库密码保护。

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') # 这个文件的内容在下一步会创建，至于路径是哪里都可以，只要下一步创建的文件是在这里写的路径下即可 DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME': cf.get('db', 'database'), 'USER': cf.get('db', 'user'), # 从配置文件中获取数据库用户名 'PASSWORD': cf.get('db', 'password'), # 从配置文件中获取数据库密码 'HOST': 'localhost', 'PORT': '3306' } } DEBUG = False # 生产环境下关闭debug模式else: DATABASES = { 'default': { 'ENGINE': 'django.db.backends.sqlite3', 'NAME': os.path.join(BASE_DIR, 'data/db.sqlite3'), } } DEBUG = True

4.3.3.2 配置环境变量

通过修改环境变量管理文件，设置环境变量，输入命令vi ~/.bashrc，在里面添加一行：export PYTHON_ENV=production，然后按 esc，输入：:wq 保存

最后输入source ~/.bashrc

4.3.3.3 增加数据库账号配置文件

在~/blog下新增文件vi db.cnf，然后增加如下内容：

[db]database = bloguser = blogpassword = 12345678default-character-set = utf8数据库、账号、密码和上面的数据库信息保持一致。

恭喜你，至此，博客网站部署完成，可以通过域名来访问你的博客网站了。

下一篇我将总结一下在整个博客开发过程中遇到的问题和解决方案。