部署前端静态文件的简单步骤

笔者目前使用 Vue 开发，开发完成后需要构建静态文件，部署到服务器上，例如 Nginx, 本文将介绍从构建到部署过程中的步骤，涉及到的一些命令如 tar, ssh, scp, 以及笔者的一些小技巧。

1. 打包构建

执行你项目中的打包命令进行打包即可，也许是yarn build，也许是npm run build, 具体可以看package.json中scripts中的定义。如果没有定义，则翻阅文档找找构建工具的构建命令即可，例如这是Vite的构建部署文档open in new window。

在构建前需要注意的：

最好执行 yarn/npm install 安装当前package.json中指定的最新依赖，避免其他同事更新了依赖，但本地还没更新的问题
也许你需要打上一个版本号，方便跟踪当前的版本。(关于版本号定义，可以参考语义化版本open in new window)
也许你还需要设置一些部署时的环境变量或配置
...

2. tar打包

当执行完构建后，在某个目录下，会生成若干的静态文件，把静态文件上传到服务器上对应的目录，即可以通过服务器访问构建好的静态文件了。

在上传时，如果一个一个文件上传，会有些麻烦，我们可以先将这些静态文件打包成一个 tar 包再一次性上传。

压缩

进入到静态文件所在的目录

cd path/to/dist

将静态文件压缩为一个 tar 包

tar -zcvf build_1.0.tar.gz *

参数解释：

-c 表示创建，等同于--create
-v 显示打包时的详细输出
-z 使用Gzip对打包文件进行压缩
-f 指定打包后的文件名
* 表示打包当前目录下的所有文件，你也可以指定一个一个的文件进行打包

3. scp 上传 tar 包

打包完之后，需要把 tar 包上传到服务器，可以使用 scp 命令，假设要上传到 1.1.1.1 上的 /home 目录, 使用 1.1.1.1 的 root用户。

scp path/to/tar root@1.1.1.1:/home

命令解释：

命令格式: scp source copy 从source传到copy
path/to/tar tar 包所在的路径
root@1.1.1.1:/home 要上传的位置
- root@1.1.1.1 使用root登录1.1.1.1，进行连接
- : 分隔目标机器和目录
- /home 上传到机器上的目录

4. ssh 到目标机器

要解压目标机器上的 tar 包，先要连接到目标机器，可以使用 ssh 命令。

ssh root@1.1.1.1
The authenticity of host '1.1.1.1 (1.1.1.1)' can't be established.
ECDSA key fingerprint is SHA256:2CDXn8/+GTFrUT7ayu0BRrKAVShN7P13wO0bSJdSAW4.
Are you sure you want to continue connecting (yes/no/[fingerprint])?

1
2
3
4

命令解释:

使用root用户通过ssh连接1.1.1.1的机器
这里需要确认服务器的指纹，输入yes就好了 (不过出于安全考虑，你也可以验证一下这个指纹对不对，确定是你要连接的目标机器)
- 这里是因为机器之前没连接过，要把目标机器的公钥存储到下来，用来下次识别目标机器

避免重复输入密码

每次使用 ssh 命令，都要重新输入一次密码，着实麻烦，通过把 ssh 密钥存到服务器上，可以避免每次连接时输入密码。

生成密钥

> ssh-keygen

Generating public/private rsa key pair.
Enter file in which to save the key (path/to/.ssh/id_rsa):
...

1
2
3
4
5

执行完成后，在你指定的路径，如 path/to/.ssh/id_rsa中，会生成一个密钥，接下来把密钥复制到服务器上，那服务器就认识我们的机器，就不需要重复输入密码了。

上传密钥到服务器，让服务器存储起来:

ssh-copy-id -i path/to/.ssh/id_rsa.pub root@1.1.1.1

参数解释：

-i 指定密钥文件，注意，这里的密钥文件对应的是公钥，以.pub结尾的密钥文件
path/to/.ssh/id_rsa.pub 传给服务器的公钥
root@1.1.1.1 要上传的目标机器

第一次执行，还需要输入一次命令，后面就不用啦。

移除过期的指纹

前面使用 ssh 连接的时候, 需要确认fingerprint，一般会被保存在 ~/.ssh/known_host 文件下（笔者是Mac系统，不同系统存放位置可能有差异）

有时，目标机器可能重装了，或者目标机器的公钥发生了变化，存储在 ~/.ssh/known_host 的目标机器的公钥就失效了。

解决办法就是打开~/.ssh/known_host，删除掉对应机器的公钥，重新用ssh连接机器，存储一个新的公钥就好了。

5. 解压 tar 包

当上传到服务器上后，需要把静态文件从 tar 包中解压出来，你需要把文件解压到服务器指定的目录下，具体要看你服务器如何配置的。

假设你使用的是 Nginx，查看 Nginx 配置，可以知道要把 tar 包解压到什么目录。

    ...

    server {
        listen       9999;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            # 这里指定了静态文件所在的文件路径
            root /home/hello-world; 
            index index.html index.htm;
            try_files $uri $uri/ /index.html;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

    ...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

进入到对应的目录

cd path/to/static_file_folder

执行解压命令

tar -xvf build.1.0.tar.gz

参数解释：

-x 将 tar 包内容解压，等同于 --extract

至此，静态文件的上传已经完成，你应该能够通过服务器访问到这些静态文件了。

节省手动操作

上面那么多的步骤，每次都要部署都操作一次，也是有些麻烦，那能不能节省这些操作，一步完成呢？

结合 bash 脚本，把上面的命令组合一下，就可以实现了。

如将以下脚本保存为tar.sh, 只要执行./tar.sh即可完成打包部署的步骤。

#!/usr/bin/env sh

# abort on errors
set -e

# install 更新依赖
yarn

# build 构建
yarn build

echo "Build finish!"

# navigate into the build output directory
cd dist/

    echo "tar start"

# 打包压缩构建后的静态文件
tar zcvf build.tar.gz *

echo "tar finish"

echo 'upload to 1.1.1.1 and untar'

# 上传tar包到目标机器，并解压到对应的目录
ssh root@1.1.1.1 "tar -C /home/hello-world -xz -f-" < build.tar.gz

echo 'upload & untar done'

cd -

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

关于 Bash 脚本怎么写，可以看看Bash 脚本教程open in new window，这里解释一下其中的某行脚本：

ssh root@1.1.1.1 "tar -C /home/hello-world -xz -f-" < build.tar.gz

ssh root@1.1.1.1 连接机器, 参考避免重复输入密码设置免密码登录
"tar -C /home/hello-world -xz -f-" 连接机器后执行 tar 解压
- -C 指定解压到什么目录
- -xz 执行解压
- -f 指定解压的tar包
- - 从标准输入中读取, 即读取build.tar.gz
< build.tar.gz 作为tar命令的输入

进一步节省操作

尽管写了bash脚本，简单的执行一下就能完成部署了，但每次还要手动执行一下。

能不能每次提交时执行呢？使用一些CI工具就可以实现了，例如GitHub Actionsopen in new window， Travis CIopen in new window等。

笔者使用GitHub Actions实现了博客的自动部署，也许可以给你一些参考open in new window。

此处不做展开，读者可自行探索 😃

# 部署前端静态文件的简单步骤

# 1. 打包构建

# 2. tar打包

# 压缩

# 3. scp 上传 tar 包

# 4. ssh 到目标机器

# 避免重复输入密码

# 移除过期的指纹

# 5. 解压 tar 包

# 节省手动操作

# 进一步节省操作

# 参考链接

部署前端静态文件的简单步骤

1. 打包构建

2. tar打包

压缩

3. scp 上传 tar 包

4. ssh 到目标机器

避免重复输入密码

移除过期的指纹

5. 解压 tar 包

节省手动操作

进一步节省操作

参考链接