Lab：上线服务

上线服务

我们开发了自己的 Vue 前端或 Express 后端项目，接下来将讲解一种简单的部署上线方法 —— 购买云服务器。

WARNING

重要提示：阅读全文后，再进行实际操作。购买并使用云服务需遵守相关法律法规，确保你的操作和内容合法。使用云服务过程中产生的一切责任与本教程编写者无关。

好贵，能不能不买

如果仅用于测试目的，可以选择以下几种免费方案在公网提供服务：

使用 Sakura FRP 等穿透软件
在自己的电脑上安装 Sakura FRP 或其他穿透软件，选择暴露电脑的某个端口（例如 3000），即可获得一个可访问服务的公网地址。
使用 Cloudflared 创建 Tunnel
在电脑上安装 Cloudflared，创建一个 Tunnel 即可从外部访问。具体步骤是：
- 前往 Cloudflare 官网注册账户。
- 下载并安装 Cloudflared 客户端。
- 使用命令行创建并配置 Tunnel，连接到你的本地服务。
- 参考 Cloudflare 文档来获得教程。
使用 Tailscale 或 ZeroTier 等异地组网工具
这些工具允许你在不同设备间建立虚拟专用网络，仅限自己使用。例如，你可以通过手机流量访问电脑上的网站。

购买云服务

接下来，我们将通过购买云服务器的方式来上线我们的应用。这是一种简单且通用的方法，但未必是最合适的选择。根据需求和成本，你可能需要选择不同的部署方式（如虚拟面板、VPS、CF 函数计算、K8s 集群等）。对于我们的练习来说，购买一台服务器已经完全足够。

注册账户

你可以在大型云服务提供商（如阿里云、腾讯云、华为云）或小型服务商（如雨云、星辰云等）的官网注册一个账户并完成实名认证。大型服务商提供全面的服务和稳定性，且有丰富的教程资源，但价格相对较高；小型服务商价格更为实惠，但服务的稳定性和持续性无法完全保障。这里以阿里云为例，详细介绍注册和购买流程。

步骤如下：

访问阿里云官网。
点击页面右上角的 “免费注册” 按钮。
填写你的手机号码或邮箱地址，设置密码并完成注册。
根据阿里云的要求，完成实名认证流程，上传身份证照片。

选择产品

阿里云为在校学生提供了一张 300 元的无门槛优惠券，你可以通过网络搜索活动入口进行领取。这笔费用足够你购买一年的非大陆地区轻量应用服务器，或半年的国内普通服务器。接下来，我们需要选择服务器的地区。

优缺点：

内地服务器：国内连通性较好，延迟低，但在拉取 Docker 镜像、npm 包、安装各种环境或使用 GitHub 开源软件时会遇到困难。
海外服务器：避免了内地服务器的这些问题，但在国内的连接稳定性可能较差，影响用户体验。

对于内地服务器的不便之处，我们一般有下面几种方法来解决：

在本地下载资源后传输到服务器
你可以在自己的电脑上下载所需的资源，然后通过 SFTP 等方式传输到服务器。但这种方法较为繁琐，且在某些场景下无法使用。
切换软件源
更换为国内的镜像源，可以加快包的下载速度。需要在多个软件中更换源，且部分软件包或版本可能不在国内源中。
使用代理服务器
在拉取需要的文件 URL 前加上代理服务器地址，通过代理进行中转。这需要你拥有一台海外服务器，以覆盖部分场景。
使用霍格沃茨魔法学校授课内容
奇妙的魔力在这个页面上为我们带来了三串奇奇怪怪的字符，我不知道该如何使用它们。以下是这三串字符：

非内地服务器不会遇到上述问题，但在国内的连接稳定性可能较差，影响用户体验。你可以通过 CDN 加速或使用 Cloudflare 等服务优化连接，这里暂不详细展开。

购买

进入阿里云的服务器购买页面后，按照以下步骤选择合适的配置：

选择产品类型
推荐选择 “轻量应用服务器”，适合初学者和小型项目。
选择实例规格
- CPU：2 核
- 内存：2GB
- 带宽：10Mbps
  这样的配置基本可以满足开发需求，可以满足数个人同时浏览我们的网页。可以适当增减配置。
选择地区和可用区
经济不发达地区可能便宜一些，但是延迟可能会稍高。
选择操作系统
推荐选择 Ubuntu 22.04 或 24.04 的 64 位版本。
确认订单并支付

TIP

注意：像阿里云这样的云服务商还会区分性能突发型实例、抢占型实例等多种产品。请务必阅读选购页面的详细说明！某些实例在满足特定条件后（例如长时间空闲）可能会被销毁。

配置

购买并获取服务器后，按照以下步骤进行配置，你可能会遇到网络困难，请回头阅读 “选择产品” 章节。

连接服务器

获取公网 IP 地址 登录阿里云控制台，在服务器实例详情中找到你的公网 IP 地址。
使用 SSH 客户端连接 你可以使用 Xshell、Termius 或 OpenSSH 等工具连接服务器。
- 使用 Xshell：
  - 打开 Xshell，点击 “新建”。
  - 输入主机 IP 地址、端口号（默认 22），并选择 SSH 协议。
  - 点击 “连接”，输入你在购买服务器时设置的密码或使用密钥登录。
- 使用 Termius：
  - 下载并安装 Termius 客户端。
  - 添加新主机，填写服务器 IP、用户名（通常为 root ）和密码或密钥。
  - 连接服务器。
- 使用 OpenSSH（适用于 Linux 和 macOS 终端）：
  bash
```
ssh root@您的公网IP
```
  1
  输入密码或使用密钥文件登录。

安装 Nginx

更新软件包列表
bash
```
sudo apt update
```
1
安装 Nginx
bash
```
sudo apt install nginx -y
```
1

启动并设置 Nginx 开机自启

bash

sudo systemctl start nginx
sudo systemctl enable nginx

配置 Nginx

备份默认配置文件

bash

sudo cp /etc/nginx/sites-available/default /etc/nginx/sites-available/default.bak

编辑 Nginx 配置文件
使用文本编辑器（如 nano）打开配置文件：
bash
```
sudo nano /etc/nginx/sites-available/default
```
1

修改配置文件
将默认配置修改为以下内容（假设前端静态文件位于 /var/www/myapp/html ，Express 后端运行在端口 3000）：

nginx

server {
    listen 80;
    server_name your_domain_or_IP;

    # 前端静态文件
    location / {
        root /var/www/myapp/html;
        try_files $uri $uri/ /index.html;
    }

    # 后端API代理
    location /api/ {
        proxy_pass http://localhost:3000/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

将 your_domain_or_IP 替换为你的域名或服务器 IP 地址。

保存并退出编辑器
在 nano 中，按 Ctrl + O 保存，按 Ctrl + X 退出。
测试 Nginx 配置
bash
```
sudo nginx -t
```
1
如果配置正确，你将看到 syntax is ok 和 test is successful 的提示。
重启 Nginx 服务
bash
```
sudo systemctl restart nginx
```
1

安装其他环境

根据项目需求，安装 Node.js 和 MongoDB。

安装 Node.js
选择适合的 Node.js 版本（如 LTS 版本）。以下以安装 Node.js 18 为例：
bash
```
curl -fsSL https://deb.nodesource.com/setup_18.x | sudo -E bash -
sudo apt-get install -y nodejs
```
1
2
验证安装：
bash
```
node -v
npm -v
```
1
2

安装 MongoDB

bash

sudo apt update
sudo apt install -y mongodb

启动并设置 MongoDB 开机自启：

bash

sudo systemctl start mongodb
sudo systemctl enable mongodb

验证 MongoDB 状态：

bash

sudo systemctl status mongodb

配置安全策略

在阿里云的服务器后台管理页面，设置安全策略，允许 80，443，22 等我们需要用到的端口进行通信（有的服务商默认允许，但还是建议检查一下）。

构建前端项目

按照以下步骤构建并部署你的 Vue 前端项目：

在本地构建项目 确保你已经在本地环境中完成前端项目的开发，并且能够成功运行。然后执行构建命令：
bash
```
pnpm run build
```
1
构建完成后，项目会生成一个 dist 文件夹，其中包含构建后的静态文件。
本地预览构建结果
使用 VSCode 打开 dist 文件夹（注意，仅打开 dist 文件夹，不要打开整个前端项目），右键点击 index.html ，选择 “Open with Live Server” 进行预览。如果浏览器显示空白，可能需要进行以下调整：
- 修改 vite.config.js 
  在 vite.config.js 中添加 base 配置：
  javascript
```
export default defineConfig({
    base: './',
    // 其他配置项
});
```
  1
  2
  3
  4
- 修改路由配置
  在路由配置文件中使用 Hash 模式：
  javascript
```
import { createRouter, createWebHashHistory } from 'vue-router';

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    // 你的路由配置
  ],
});

export default router;
```
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
如果问题依旧，可以按 F12 打开浏览器开发者工具，查看控制台报错信息，并根据错误提示在网上寻找解决方案。
上传构建后的静态文件到服务器
使用 SFTP 工具（如 FileZilla、WinSCP）或 SSH 软件自带的文件传输功能（如 Termius、Tabby）将 dist 文件夹中的所有文件上传到服务器的 /var/www/myapp/html 目录。具体步骤如下：
- 使用 SFTP 工具：
  - 打开你的 SFTP 客户端，连接到服务器。
  - 导航到 /var/www 目录，如果 myapp 文件夹不存在，创建一个：
    bash
```
sudo mkdir -p /var/www/myapp/html
```
    1
  - 设置适当的权限：
    bash
```
sudo chown -R $USER:$USER /var/www/myapp/html
```
    1
  - 上传 dist 文件夹中的所有文件到 /var/www/myapp/html 。
设置正确的权限
确保 Nginx 可以访问这些文件：
bash
```
sudo chmod -R 755 /var/www/myapp/html
```
1
重启 Nginx 服务
bash
```
sudo systemctl restart nginx
```
1
访问前端应用
在浏览器中访问 http://您的公网IP ，应该能够看到你的前端应用。如果一切配置正确，页面将正常显示。

运行后端项目

接下来，部署并运行 Express 后端项目：

上传后端项目文件到服务器
使用 SFTP 工具将后端项目文件夹上传到服务器的 /home/您的用户名 目录下。例如：
- 登录服务器，进入主目录：
  bash
```
cd /home/your_username
```
  1
- 创建项目目录：
  bash
```
mkdir mybackend
```
  1
- 使用 SFTP 工具将后端项目文件上传到 /home/your_username/mybackend 。
安装项目依赖
进入项目目录并安装依赖：
bash
```
cd mybackend
pnpm install
```
1
2
启动后端服务
运行后端项目：
bash
```
node server.js
```
1
此时，Express 后端应在端口 3000 上运行。
设置始终运行后端服务
为了确保后端服务在服务器重启或进程终止后自动运行，可以使用 pm2 进行管理。
- 安装 pm2
  bash
```
sudo npm install -g pm2
```
  1
- 使用 pm2 启动后端项目
  bash
```
pm2 start server.js --name mybackend
```
  1
- 设置 pm2 开机自启
  bash
```
pm2 startup
pm2 save
```
  1
  2
这样，后端服务将始终运行，并在服务器重启后自动启动。
验证后端服务
在浏览器中访问 http://您的公网IP/api/ ，应能看到后端服务的响应。

使用安全链接 HTTPS

为了确保数据传输的安全性，建议为你的网站配置 HTTPS。以下是通过购买域名和使用 Cloudflare 实现 HTTPS 的步骤。

购买域名

选择域名注册商 你可以在阿里云、腾讯云等平台购买域名。以阿里云为例：
- 登录阿里云官网。
- 在搜索栏输入你想要的域名，检查其可用性。
- 选择可用的域名并完成购买。

注册 Cloudflare 账户并添加域名

注册 Cloudflare 账户
访问 Cloudflare 官网并注册一个免费账户。
添加域名到 Cloudflare
- 登录 Cloudflare 后，点击 “添加站点”。
- 输入你购买的域名，点击 “添加站点”。
- 选择合适的计划（免费版即可满足基本需求），点击 “确认计划”。
配置 DNS 记录
- Cloudflare 会自动扫描现有的 DNS 记录。确认无误后，点击 “继续”。
- 添加 A 记录，将 www.yourdomain.com 解析到你的服务器公网 IP。
- 如有需要，可以添加其他子域名的 DNS 记录。
更改 DNS 服务器
- Cloudflare 会提供新的 DNS 服务器地址。
- 登录阿里云域名管理控制台，找到你的域名管理页面。
- 修改域名的 DNS 服务器地址为 Cloudflare 提供的地址。
- 保存更改后，等待 DNS 解析生效，通常需要几分钟到 24 小时。

申请和配置 SSL 证书

在 Cloudflare 中启用 SSL
- 在 Cloudflare 控制台，选择你的域名。
- 点击 “SSL/TLS” 标签。
- 选择 “完全（严格）” 模式，确保数据在 Cloudflare 和服务器之间也是加密的。

安装 Certbot 并申请 Let's Encrypt 证书

安装 Certbot

bash

sudo apt update
sudo apt install -y certbot python3-certbot-nginx

申请证书

bash

sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com

按照提示完成域名验证和证书申请。

自动续签证书 Certbot 会自动为你配置续签任务，但你可以手动测试：
bash
```
sudo certbot renew --dry-run
```
1

修改 Nginx 配置以支持 HTTPS

Certbot 在申请证书时通常会自动修改 Nginx 配置以支持 HTTPS。如果需要手动配置，请按照以下步骤：

编辑 Nginx 配置文件

bash

sudo nano /etc/nginx/sites-available/default

修改配置文件
将 server 块修改为以下内容：

nginx

server {
	#http跳https
    listen 80;
    server_name yourdomain.com www.yourdomain.com;
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name yourdomain.com www.yourdomain.com;

    ssl_certificate /etc/letsencrypt/live/yourdomain.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/yourdomain.com/privkey.pem;

    # 前端静态文件
    location / {
        root /var/www/myapp/html;
        try_files $uri $uri/ /index.html;
    }

    # 后端API代理
    location /api/ {
        proxy_pass http://localhost:3000/;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

测试并重启 Nginx

bash

sudo nginx -t
sudo systemctl restart nginx

访问你的网站
在浏览器中访问 https://yourdomain.com ，应能通过 HTTPS 安全访问你的网站。

完成

至此，你已经成功部署了自己的 Vue 前端和 Express 后端应用，并通过购买域名和配置 HTTPS 保障了连接的安全性。你拥有了一个属于自己的、安全的在线网站，并可以在此基础上进行更多的扩展和优化。

WARNING

法律声明：根据中国法律，所有在中国大陆提供内容的服务器和网站均需进行备案（ICP 备案）。未备案的网站可能会被服务器提供商关闭或受到法律处罚。使用海外服务器可以避免备案问题，但依然需要确保你的网站内容符合相关法律法规。

备案相关注意事项：

备案需要提供真实的身份信息和网站信息。
购买国内大厂服务器才能备案。
未备案域名禁止绑定内地内网穿透等服务，但可以绑定海外的。
备案过程可能需要几周时间，请提前规划。
备案完成后，务必在阿里云控制台或其他服务商平台完成相关配置。

‍

4.2.1 导读模块

4.2.2 前端三件套基础

4.2.3 现代前端技术栈

4.3.1 引入

4.3.2 week-1 前端三件套

4.3.3 week-2 Git初步

4.3.4 week-3 DOM操作 Node基础

4.3.5 week-4 Vue入门 Express路由

4.3.6 week-5 Vue路由 POST请求处理

4.3.7 week-6 Axios请求数据库操作

4.3.8 week-7 JWT认证上线服务

Lab：上线服务

上线服务

好贵，能不能不买

购买云服务

注册账户

选择产品

购买

配置

连接服务器

安装 Nginx

配置 Nginx

安装其他环境

配置安全策略

构建前端项目

运行后端项目

使用安全链接 HTTPS

购买域名

注册 Cloudflare 账户并添加域名

申请和配置 SSL 证书

修改 Nginx 配置以支持 HTTPS

完成

Lab：上线服务 ​

上线服务 ​

好贵，能不能不买 ​

购买云服务 ​

注册账户 ​

选择产品 ​

购买 ​

配置 ​

连接服务器 ​

安装 Nginx ​

配置 Nginx ​

安装其他环境 ​

配置安全策略 ​

构建前端项目 ​

运行后端项目 ​

使用安全链接 HTTPS ​

购买域名 ​

注册 Cloudflare 账户并添加域名 ​

申请和配置 SSL 证书 ​

修改 Nginx 配置以支持 HTTPS ​

完成 ​

Lab：上线服务

上线服务

好贵，能不能不买

购买云服务

注册账户

选择产品

购买

配置

连接服务器

安装 Nginx

配置 Nginx

安装其他环境

配置安全策略

构建前端项目

运行后端项目

使用安全链接 HTTPS

购买域名

注册 Cloudflare 账户并添加域名

申请和配置 SSL 证书

修改 Nginx 配置以支持 HTTPS

完成