前端工程化 -- 上线部署

基本概念

域名

域名俗称网址，是由一串用点分隔的名字组成，用于标识互联网上的计算机。

原本用于标识互联网上计算机使用的是 IP 地址，但是由于 IP 地址不便于记忆，所以人们便设计出来比较容易记忆的域名，然后通过 DNS 将域名和 IP 地址关联，这样人们便可以通过记忆域名直接访问到对应的计算机。

DNS 服务器

DNS (Domain Name System)，可以理解为互联网上的一项服务，他可以将域名转换成其对应的 IP 地址。

可以将其理解为字典，字典中存储的就是域名和 IP 地址一一对应的键值对。

服务器

服务器其实就是一台计算机，但是这台计算机并和我们自己的的 PC 不一样，不是日常使用的，而是提供某项互联网服务的。

比如 web 服务器，能为我们提供网页服务，email 服务器，能为我们提供电子邮件服务，FTP 服务器能为我们提供文件存储服务等等。

为计算机安装不同的服务应用程序，即可提供相应的服务。

常见的web 服务应用程序： Apache、Nginx、IIS、Node.js

本地 hosts 文件

当你的计算机尝试解析一个域名时，它首先会检查 hosts 文件中是否存在相应的映射。如果找到了匹配的 IP 地址，那么它就会直接使用这个 IP 地址；如果没有找到，才会继续通过 DNS 服务器进行解析。

windows: c:\windows\system32\drivers\etc\hosts
mac: /etc/hosts

网站请求流程（简化版）

静态页面

过程：

用户请求：用户在浏览器中输入一个URL或点击一个链接，浏览器向服务器发送一个HTTP请求。
服务器响应：服务器接收到请求后，查找对应的HTML、CSS、JavaScript文件，并将这些文件作为响应返回给浏览器。
浏览器渲染：浏览器接收到响应后，解析HTML文件，并根据HTML文件中的链接加载CSS和JavaScript文件。然后，浏览器根据这些文件渲染页面。

重点：

无数据通信：静态页面不涉及与服务器的任何数据通信，所有内容都是预先写好的。
快速加载：由于没有数据请求，静态页面加载速度较快。
适合简单内容：适合展示静态内容，如公司简介、产品介绍等。

动态页面

过程：

用户请求：用户在浏览器中输入一个 URL 或点击一个链接，浏览器向服务器发送一个 HTTP 请求。
服务器响应：服务器接收到请求后，可能会与数据库或其他服务进行交互，获取动态数据。
生成页面：服务器根据获取的数据动态生成 HTML 页面。
响应返回：服务器将生成的 HTML 页面作为响应返回给浏览器。
浏览器渲染：浏览器接收到响应后，解析 HTML 页面并渲染。

重点：

数据通信：动态页面涉及与服务器的多次数据通信，通常包括数据库查询、API调用等。
内容动态生成：页面内容是根据服务器端的数据动态生成的。
适合复杂应用：适合需要频繁更新内容的应用，如社交网络、电子商务等。

前后端分离的页面

过程：

静态页面请求：

用户请求：用户在浏览器中输入一个 URL 或点击一个链接，浏览器向服务器发送一个 HTTP 请求。
服务器响应：服务器返回一个静态的 HTML 页面，通常只包含基本的 HTML结构和一些 JavaScript 代码。
浏览器渲染：浏览器接收到响应后，解析 HTML 页面并渲染。

Ajax数据请求：

JavaScript发起请求：浏览器中的 JavaScript 代码（通常是使用 Ajax 或 Fetch API）向服务器发送一个数据请求。
服务器处理：服务器接收到请求后，处理请求并返回 JSON 格式的数据。
数据渲染：浏览器接收到数据后，使用J avaScript 动态地将数据渲染到页面上。

重点：

前后端职责分离：前端负责页面渲染和用户交互，后端负责数据处理和业务逻辑。
灵活性高：前端可以独立开发和部署，后端也可以独立开发和部署，两者通过API进行通信。
适合复杂应用：适合需要高度交互性和复杂用户界面的应用，如单页应用（SPA）。

前后端不分离的页面

过程：

用户请求：用户在浏览器中输入一个 URL 或点击一个链接，浏览器向服务器发送一个 HTTP 请求。
服务器处理：服务器接收到请求后，与数据库或其他服务进行交互，获取数据。
生成页面：服务器根据获取的数据动态生成完整的 HTML 页面。
响应返回：服务器将生成的 HTML 页面作为响应返回给浏览器。
浏览器渲染：浏览器接收到响应后，解析 HTML 页面并渲染。

重点：

一次请求完成：整个页面的生成和渲染都在服务器端完成，浏览器只需要接收并显示最终的HTML页面。
适合简单应用：适合不需要频繁更新内容的简单应用，如企业官网、博客等。
SEO友好：由于页面内容在服务器端生成，搜索引擎可以更好地抓取和索引页面内容。

跨域问题解决

如果协议，域名，端口号，都相同，那么就是同源，可以正常访问，否则就是跨域。

网页请求：一般是 nginx 监听 80/443 端口，然后在服务器查找对应网站根目录，返回对应数据接口请求：一般是约定一个其他端口号，服务器通过 nodejs（或其他语言）监听，然后和数据库交互返回数据

这里就出现了端口号不一致，浏览器默认不允许跨域，需要解决跨域问题

解决方式：
- JSONP：要求较高，需要前后端配合，但可以解决跨域问题
- CORS：通过配置响应头，可以解决跨域问题，但存在安全问题
- 反向代理：我们访问网页请求可以使用 xxx.com 访问接口请求可以使用 xxx.com/api ,然后都让 nginx 来监听，nginx 监听到带有 /api 的请求，就转发到接口服务器，这样就解决了跨域问题

网站上线部署流程

服务器购买

国内服务器：阿里云 ECS(Elastic Compute Service)，腾讯云 CVM(Cloud Virtual Machine) 等

国外服务器：日本 Vultr, 美国 Linode, 谷歌云，微软 Azure，亚马逊 AWS 等

这一步需要创建好服务器实例，分配好外网 IP 地址。

域名购买

国内：万网（阿里）、腾讯等

国外： Godaddy

域名解析（配置 DNS）

注册好域名之后需要将域名映射到自己服务器对应的 IP 地址，这样别人才能通过域名访问到我们的服务器。

这个步骤叫做域名解析，通过域名服务商提供的后台就可以操作，一般域名解析都会有延迟，不是即时生效的。

服务器环境搭建

配置服务器，Mac 系统下直接用终端就ok

windows下需要用到 git bash, 或者别的工具（Putty）

需要用到的 Linux 系统操作命令

连接命令

bash

# 远程连接命令
ssh root@域名

# 展示当前文件夹路径
pwd

# 切换文件夹目录
cd 目录路径

# 展示当前文件夹中内容
ls

# 编辑文件
vim 文件路径

# 传输文件 
scp 本地文件路径 root@域名:远程路径

# 解压文件命令
unzip

配置免密登陆

bash

# 在自己电脑上 生成本地 秘钥对  如果之前有可以直接用之前的公钥
ssh-keygen -t rsa 

# 生成的位置
# mac 在 ~/.ssh
# windows 在 C:\users\你的用户名\.ssh

# 在服务器创建了一个.ssh 文件夹
mkdir .ssh

# 切换到这个文件夹
cd .ssh

# 创建了一个文件
touch authorized_keys

# 我们把自己电脑上的 id_rsa.pub 文件中的内容 放到 authorized_keys文件中
echo "xxxxxxxx" >> authorized_keys

# 查看 authorized_keys 文件内容
cat authorized_keys

# 退出服务器，下次直接就能免密登陆了
exit

安装Nginx

bash

# 更新 Ubuntu
sudo apt-get update 
sudo apt-get upgrade 
# 安装 Nginx
sudo apt install nginx
# 启动 Nginx
nginx
# 重启 Nginx
sudo systemctl start nginx
# 检查Nginx状态：
sudo systemctl status nginx
# 查看端口占用情况
sudo lsof -i :80
# 防火墙设置
sudo apt install ufw
sudo ufw status
sudo ufw enable
sudo ufw allow http
sudo ufw allow https

安装Node.js

bash

# 安装 Node.js
sudo apt install nodejs npm

# 安装完成之后使用如下指令测试安装是否成功
node -v

# 安装pm2 node.js程序管理工具
npm i pm2 -g

# 使用pm2 启动node.js项目
pm2 start 文件名

# 停止
pm2 stop 文件名或者id

# 从pm2的管理列表中删除
pm2 delete 文件名或者id

pm2作用

应用守护：PM2可以确保你的Node.js应用始终处于运行状态。如果应用因某种原因崩溃或终止，PM2会自动重启应用，保证服务的连续性。
负载均衡：PM2可以轻松实现负载均衡，将多个应用实例分配到多个CPU核心上，以提升性能。
日志管理：PM2可以记录应用日志，方便调试和排查问题。
监控：PM2可以实时监控应用运行情况，包括内存占用、CPU使用率等。
进程管理：PM2可以轻松管理多个应用实例，包括启动、停止、重启等。
配置文件管理：PM2可以管理应用配置文件，包括环境变量、端口、代理等。
自动化部署：PM2支持自动化部署，可以通过Git等版本控制系统直接部署应用到服务器上。

安装mysql

bash

# 搜索mysql
sudo apt search mysql-server
# 安装mysql
sudo apt install -y mysql-server
# 启动mysql
sudo systemctl start mysql
# 设置为开机自启动
sudo systemctl enable mysql
# 检查MySQL状态
sudo systemctl status mysql
# 连接到MySQL数据库，修改密码
mysql -uroot -p

ALTER USER 'root'@'localhost' IDENTIFIED BY 'xxxxxxx';
# 退出
quit

上传网站资源

可以使用 scp 命令，也可以安装 FTP （vsftpd）工具。

# 上传文件到服务器
scp 本地文件 root@域名:远程路径
scp dist.zip root@lliuhuakawaii.icu:~/ 

# 在服务器创建文件夹
mkdir /home/nginx/

# 把网页文件移动到创建好的文件夹里
mv ./dist.zip /home/nginx/

# 解压压缩文件
cd /home/ningx
unzip ./dist.zip

# 修改文件夹名字
mv dist ilovefe
# 结果就是  /home/nginx/ilovefe  这个文件夹中放的就是我们的网页文件了

配置 nginx

创建一个ilovefe.conf文件

cd /etc/nginx/conf.d
# 创建配置文件
touch ilovefe.conf
vim ilovefe.conf
# 按i键 进出插入模式
# 复制下面的内容，粘贴进去
server {
    listen 80;
    server_name liuhuakawaii.icu www.liuhuakawaii.icu;
    
    root /home/nginx/liuhuakawaii;
    index index.html index.htm;

    location / {
        try_files $uri $uri/ =404;
    }

    access_log /var/log/nginx/liuhuakawaii.access.log;
    error_log /var/log/nginx/liuhuakawaii.error.log;
}
# 保存退出
# 按一下esc退出编辑模式
# 然后输入 下面的内容 敲回车
:wq

接口项目部署步骤

上传项目压缩文件到服务器
在服务器上解压项目文件到 /home/nginx/ilovefeadmin
为项目安装依赖项 npm i
修改mysql数据库密码规则(本项目需要兼容旧版数据库)

use mysql;
ALTER USER 'root'@'localhost' IDENTIFIED BY 'Duyi_666duyi' PASSWORD EXPIRE NEVER;
ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY 'Duyi_666duyi';

# 查看是否已经修改成功
select user,host,plugin from user where user='root';

创建新的数据库

# 此项目使用到了 vuesql 数据库
CREATE DATABASE vuesql;

启动项目 pm2 start index.js
在之前的 nginx 配置文件中添加反向代理的配置：

# 配置文件位置
cd /etc/nginx/conf.d/

# 编辑文件
 vim ilovefe.conf

ilovefe.conf 文件内容如下：

server {
    listen       80;
    server_name  liuhuakawaii.icu;

        location / {
          root   /home/nginx/ilovefe;
          index  index.html index.htm;
    }
    # 添加的后端配置
  location ^~ /api/ {
        rewrite  ^/api/(.*)$ /$1 break;
        proxy_pass  http://127.0.0.1:3000;
  }
}

重启 nginx 服务 sudo systemctl restart nginx
ilovefeamdin.conf

server {
    listen       80;
    server_name  admin.ilovefe.com;
    
    location / {
    	proxy_pass  http://127.0.0.1:3000;
		}
}

部署出现的问题

80端口占用的问题

# 检查是否有其他进程占用80端口
sudo lsof -i :80
sudo netstat -tuln | grep :80

# 尝试停止所有可能使用80端口的服务
sudo fuser -k 80/tcp
sudo fuser -k 8080/tcp

# 确保Nginx有权限绑定到80端口
sudo getcap /usr/sbin/nginx
# 如果没有输出，运行
sudo setcap cap_net_bind_service=+ep /usr/sbin/nginx

# 打开Nginx主配置文件 确保文件开头有类似这样的行 user www-data;
sudo nano /etc/nginx/nginx.conf

# 检查Nginx状态：
user www-data;

# 尝试完全停止Nginx，然后重新启动：
sudo systemctl stop nginx
sudo systemctl start nginx

# 检查错误日志：
sudo tail -f /var/log/nginx/error.log

网站升级https

要将你的 Nginx 配置从 HTTP 升级到 HTTPS，你需要几个额外的步骤，包括获取 SSL 证书并配置 Nginx 以使用这些证书。以下是详细步骤： 1. 获取 SSL 证书 你可以使用 Let's Encrypt 提供的免费 SSL 证书。推荐使用 Certbot 工具来自动获取和安装证书。

# 安装 Certbot
sudo apt-get update
sudo apt-get install certbot python3-certbot-nginx

# 获取并安装证书
sudo certbot --nginx -d liuhuakawaii.icu -d www.liuhuakawaii.icu
# 按照提示完成证书的获取和安装过程。Certbot 会自动修改你的 Nginx 配置文件，添加必要的 SSL 配置。

2. 手动配置 Nginx（如果 Certbot 没有自动修改） 编辑你的 Nginx 配置文件，通常位于 /etc/nginx/sites-available/your-site 或 /etc/nginx/conf.d/your-site.conf

server {
    listen 80;
    server_name liuhuakawaii.icu www.liuhuakawaii.icu;

    # Redirect HTTP to HTTPS
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name liuhuakawaii.icu www.liuhuakawaii.icu;

    root /home/nginx/liuhuakawaii;
    index index.html index.htm;

    ssl_certificate /etc/letsencrypt/live/liuhuakawaii.icu/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/liuhuakawaii.icu/privkey.pem;

    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_prefer_server_ciphers on;
    ssl_ciphers 'ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384';

    location / {
        try_files $uri $uri/ =404;
    }

    access_log /var/log/nginx/liuhuakawaii.access.log;
    error_log /var/log/nginx/liuhuakawaii.error.log;
}

3. 测试配置

# 在重新加载 Nginx 之前，先测试配置文件是否有语法错误：
sudo nginx -t
# 重新加载 Nginx
sudo systemctl reload nginx

4. 设置自动续期 Certbot 提供了一个内置的命令 certbot renew，用于自动续期证书。你可以通过系统的定时任务管理工具（如 cron 或 systemd）来设置自动续期任务。

使用 cron

编辑 crontab 文件

sudo crontab -e

在文件末尾添加以下行：

0 2 * * * /usr/bin/certbot renew --quiet

这行命令的意思是每天凌晨 2 点执行 certbot renew --quiet 命令。--quiet 参数表示在没有错误的情况下不输出任何信息。

使用 systemd

创建 systemd 服务文件：创建一个新的 systemd 服务文件，例如 /etc/systemd/system/certbot-renew.service

sudo nano /etc/systemd/system/certbot-renew.service

添加以下内容：

[Unit]
Description=Renew Let's Encrypt certificates
After=network.target

[Service]
Type=oneshot
ExecStart=/usr/bin/certbot renew --quiet

创建 systemd 定时任务文件：创建一个新的 systemd 定时任务文件，例如 /etc/systemd/system/certbot-renew.timer：

sudo nano /etc/systemd/system/certbot-renew.timer

添加以下内容：

[Unit]
Description=Run Certbot renewal weekly

[Timer]
OnCalendar=weekly
Persistent=true

[Install]
WantedBy=timers.target

启用并启动定时任务：启用并启动定时任务

sudo systemctl enable certbot-renew.timer
sudo systemctl start certbot-renew.timer

无论哪种方法，最后都可以测试续期命令以及重新加载 Nginx

# 如果命令成功运行且没有错误输出，说明配置正确。
sudo certbot renew --dry-run

sudo systemctl reload nginx

自动化部署

自动部署（又叫持续部署 Continuous Deployment，英文缩写 CD）一般有两种触发方式：

定时触发

定时触发，就是构建软件每隔一段时间自动执行打包、部署操作。

这种方式不太好，很有可能软件刚部署完开发就改代码了。为了看到新的页面效果，不得不等到下一次构建开始。另外还有一个副作用，假如开发一天都没更改代码，构建软件还是会不停的执行打包、部署操作，白白的浪费资源。

监听 webhook 事件

webhook 钩子函数，就是在你的构建软件上进行设置，监听某一个事件（一般是监听 push 事件），当事件触发时，自动执行定义好的脚本。

例如 Github Actions，就有这个功能。

基本概念 ​

域名 ​

DNS 服务器 ​

服务器 ​

本地 hosts 文件 ​

网站请求流程（简化版） ​

静态页面 ​

动态页面 ​

前后端分离的页面 ​

前后端不分离的页面 ​

跨域问题解决 ​

网站上线部署流程 ​

服务器购买 ​

域名购买 ​

域名解析（配置 DNS） ​

服务器环境搭建 ​

上传网站资源 ​

配置 nginx ​

接口项目部署步骤 ​

部署出现的问题 ​

80端口占用的问题 ​

网站升级https ​

自动化部署 ​

定时触发 ​

监听 webhook 事件 ​

基本概念

域名

DNS 服务器

服务器

本地 hosts 文件

网站请求流程（简化版）

静态页面

动态页面

前后端分离的页面

前后端不分离的页面

跨域问题解决

网站上线部署流程

服务器购买

域名购买

域名解析（配置 DNS）

服务器环境搭建

上传网站资源

配置 nginx

接口项目部署步骤

部署出现的问题

80端口占用的问题

网站升级https

自动化部署

定时触发

监听 webhook 事件