Vue3 + Flask 实现 https://个人网站部署

但是当我们将前端页面部署到服务器之后，用户访问 http://domain.cn 就等于从服务器获取页面资源文件（html、css、js）然后在自己的电脑上运行，此时前端发送的请求如果还是 http://localhost:5000 就相当于用户访问的页面在请求用户电脑的 5000 端口，而不是服务器的 5000 端口。，将 https://domain.cn/api 的请求转发到 http://

呢么早

2309人浏览 · 2025-02-26 15:04:26

呢么早 · 2025-02-26 15:04:26 发布

内容前提

前端：Vue3
后端：Python Flask
服务器：Ubuntu 22.04 + Nginx

内容概要

将前端网页挂到服务器上，变成能够访问的网站
将后端程序挂在服务器上，构建动态网页
将购买的域名由 http 变为 https（包括 Nginx 配置）

一、将前端网页挂到服务器上

将网页挂载到服务器上，需要以下几步：

购买阿里云服务器
配置服务器环境
将网页文件进行编译后上传至服务器

以下将详细说明：

1. 购买阿里云服务器

首先，如果你是学生的话，可以在浏览器搜索 阿里云高校云上成长计划——云工开物活动专享 进入并领取学生优惠券。

完成学生认证并领取无门槛代金券。

领取之后，在页面上方点击 产品 - 云服务器 ECS 选购你中意的服务器，记得勾选上使用代金券。

2. 配置阿里云服务器

下载 Termius，登陆自己的服务器安装 Nginx。

Nginx 是一个 Web 服务器。

在安装 Nginx 之前，需要安装一些依赖项，以确保 Nginx 能够正常运行：

sudo apt install -y curl gnupg2 ca-certificates lsb-release

执行以下命令来安装 Nginx：

sudo apt install -y nginx

启动 Nginx 服务：

sudo systemctl start nginx

检查 Nginx 服务状态，如果显示绿色的 Active 表示服务启动成功：

sudo systemctl status nginx

3. 将网页文件进行编译后上传至服务器

进入已经写好的 Vue3 项目目录，输入以下命令，对项目进行打包：

npm run build

接着，项目根目录下会出现 dist 文件夹，dist 文件夹中即为编译后的静态文件，只需要将 dist 文件夹上传到服务器就行（使用 Termius 的 SFTP 进行文件夹传输）。

首先，将 dist 文件夹放在 /var/www/html 目录下。

其次，使用 vim 打开 Nginx 的配置文件：

vim /etc/nginx/nginx.conf

在配置 Nginx 之前，咱先来了解一下 Nginx 配置文件的基本结构：

user www-data;                # 运行用户
worker_processes auto;        # 工作进程数
pid /run/nginx.pid;           # PID文件位置

events {
    worker_connections 768;   # 每个工作进程的最大连接数
}

http {
    # 基础配置
    client_max_body_size 5m;    # 客户端请求体大小限制
    include mime.types;         # MIME类型配置
    
    # 服务器配置
    server {
        listen 80;               # 监听端口
        server_name <example>.cn; # 域名
        
        # 路由配置
        location / {
            root /var/www/html; # 网站根目录
            index index.html;   # 默认页面 - 首页
        }
    }
}

其中 server 块（位于 http 块内），用于对应不同域名或端口；
还有 location 块（位于 server 块内），用于配置具体的 URL 路由规则，处理不同路径的请求。

进入配置文件后输入 i 进入编辑模式（左下角出现 --insert-- 标识）

由于用户访问网站首先访问的是 http://域名，所以我们需要配置好 80 端口的 server 块，复制并修改下面的配置代码到你的配置文件中（在编辑模式中输入 shift + insert 进行粘贴）：

server {
	# 监听的端口
	listen 80;

	# 站点的域名，如果还未购买域名则输入 IP 地址
	server_name <domain>.cn;
	
	# 根目录配置
	location / {
	
		# 网站根目录的位置
		root /var/www/html/dist;
		
		# 默认首页文件名
		index index.html;
	
		# 路由重写规则，确保 Vue Router 的 history 模式正常工作
		try_files $uri $uri/ /index.html;
	}
		
	# 内部错误的反馈页面
	error_page 500 502 503 504 /50x.html;
	
	# 错误页面配置
	location = /50x.html {
	        root /var/www/html/dist;
	}
}

粘贴完成后，按下 esc 退出编辑模式，然后输入 :wq 进行保存并退出。

输入一下命令进行配置文件的语法检查：

nginx -t

如果文件配置正确，则会输出：

root@xxx:~# nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
nginx: configuration file /etc/nginx/nginx.conf test is successful

然后重启 Nginx 服务：

sudo systemctl restart nginx

至此，网页已经可以从浏览器进行访问了，如果你已经购买了域名，直接访问 http://domain.cn 就可以了；如果你还没购买域名，也可以通过 http://服务器ip 来访问你的网页。

如果页面无法访问可能是域名没有备案，或者是阿里云服务的安全组没有开放 80 端口

下面是如何开放 80 端口：

首先，进入阿里云控制台：

点击云服务器进入管理界面：

点击 安全组 ：

点击 快速添加 ：

选中 HTTP(80) 后点击确定：

大功告成。

但是，由于后端还没上传至服务器并运行，所以目前的网页只是静态网页，无法向后端的发送请求，所以接下来进行后端文件在服务器的上传和后台运行。

二、将后端上传至服务器，并在后台运行

这一环节我们需要干三件事：

配置服务器的 Python 环境
将后端文件夹上传至服务器，创建虚拟环境并 pip 下载相关依赖
将后端程序在后台挂起（一直运行）

1. 配置服务器的 Python 环境

Ubuntu 一般默认包含稳定版本的 Python。以下是安装步骤：

更新系统包列表：
```
sudo apt update
```
安装 Python3：
```
sudo apt install python3 -y
```
检查 Python3 是否安装成功：
```
python3 --version
```

如果安装成功则会显示 python 的版本号。

2. 将后端文件夹上传至服务器，创建虚拟环境并 pip 下载相关依赖

2.1 将后端文件夹上传至服务器

将后端文件夹上传至根目录下即可。

假如你的后端文件夹叫 backend，在你把整个 backend 文件夹上传到服务器之前，建议先配置好 requirements.txt 文件，即后端有哪些 pip 依赖包需要下载。

2.2 创建虚拟环境

为了方便管理当前后端程序需要的第三方依赖，也为了以后别的依赖和后端程序的依赖不冲突，最好还是创建一个虚拟环境（如果不需要，可以跳过虚拟环境创建的步骤）。

首先下载用于创建虚拟环境的依赖包：

apt install python3.10-venv

创建 Python 虚拟环境：

python3 -m venv <虚拟环境名>

激活虚拟环境：

source <虚拟环境名>/bin/activate

接着安装后端程序所需要的依赖：

pip install -r requirements.txt

如果有些依赖安装失败可能是当前服务器的 Python 版本过低，需要安装更高版本的 Python，版本最好和本地开发的 Python 版本相同。

2.3 将后端程序在后台挂起

进入 backend 文件夹，运行你的后端程序，这里假如后端主程序为 run.py，那么将后端程序在后台挂起的指令为：

nohup python3 run.py &

使用 & 表示在后台启动一个子进程来执行 nohup 后面的命令。

此时，后端程序便能成功运行，但是你会发现前端发送的请求还是失败了，为什么呢？

因为我们在进行本地开发时，前端向后端发起请求使用的 url 是 http://localhost:5000（假如后端运行在 5000 端口）。

但是当我们将前端页面部署到服务器之后，用户访问你部署的网页 http://domain.cn 是从服务器获取页面资源文件（html、css、js）然后在自己的电脑上运行。

此时前端发送的请求如果还是 http://localhost:5000 就等于用户访问的页面在请求用户电脑的 5000 端口，而不是服务器的 5000 端口。

所以此时前端的请求 url 应该修改为 http://domain.cn:5000，把 localhost 改为你的域名 domain.cn

但是如果前端的请求 url 修改为 http://domain.cn:5000，我们就得在阿里云服务器的安全组里面允许所有 ip 对 5000 端口的访问，这样不太安全。

并且后续 http 转 https 后，还会涉及跨域请求等问题，所以建议将前端请求 url 设置为 https://domain.cn/api 然后通过 nginx 反向代理，将 https://domain.cn/api 的请求转发到 http://localhost:5000/api，这些操作下面 Nginx 的配置会说到。

三、将域名由 http 变为 https

http 网页会显示不安全，是因为基于 http 协议的数据传输是明文传输，这些信息在传输过程中很容易被网络中的恶意攻击者截获。

而 https 即 http over ssl，在传输数据的过程中多了加密和解密的过程。

打个比方，如果你给暗恋对象传小纸条直接写文字，被老师截胡，你的小秘密肯定会被一览无余。

但如果你和暗恋对象事先约定了一种加密方式，即使这张纸条被老师截获，他也无法直接读懂内容，因为他们不知道你们之间的加密约定。

1. 安全证书申请

到 FreeSSL 网站白嫖申请免费的证书，不过有效期为90天，过期后再来申请就行了。
传送门：全民 https！使用 FreeSSL 申请免费的 https 证书

申请完成后能拿到公钥文件(.cer/.crt/.pem)和私钥文件(.key)，这两个文件后续需要上传到服务器，然后对 Nginx 进行配置。

2. Nginx 配置

Nginx 的配置包含两个方面：

http 转 https 的配置
后端的反向代理配置（统一端口，避免跨域问题）

2.1 http 转 https 的配置

首先，我们希望当用户访问 http 即 80 端口的时候，自动将 http 请求重写为 https：

# HTTP 服务的监听配置
server {
	# 监听端口
	listen 80; 

	# 站点域名
	server_name domain.cn;

	# 每个连接的请求次数
	keepalive_requests 120;
		
	# 网页的默认字符集
	charset utf-8;

	# 将请求转到 443 端口
	return 301 https://$server_name$request_uri;
}

第二点，前面说过我们需要将公钥和私钥文件上传到服务器，然后配置 Nginx，让 Nginx 知道这两个文件在哪里，否则即使访问的是 https://domain.cn，浏览器还是会报出不安全：

# HTTPS 服务的监听配置
server {
	listen 443 ssl;

	# 域名地址
	server_name domain.cn;
	
	# 公钥(.pem/.cer/.crt)
	ssl_certificate /path/to/your/domain.crt;
	# 私钥
	ssl_certificate_key /path/to/your/domain.key;
}

2.2 后端请求的反向代理
如果想统一端口避免跨域问题，前端发送的后端请求地址必须也是 443 端口，即 https://domain.cn/api/。但是后端在服务器上的 运行端口 不能是 443，因为 443 已经被 Nginx 占用了，所以我们只能通过反向代理将前端的请求转发到后端在服务器上的实际运行端口。

# 后端配置: 将 /api/ 开头的请求转发到后端服务器(反向代理)
location /api/ {
	# 以下三行用于将客户端的一些信息转发到后端服务器
	proxy_set_header Host $host;
	proxy_set_header X-Real-IP $remote_addr;
	proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	
	# 如果后端程序运行的端口为 5000
	proxy_pass http://localhost:5000/api/;
}