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

执行你项目中的打包命令进行打包即可，也许是 yarn build ， 也许是 npm run build 。

具体可以看 package.json 中 scripts 中的定义。

如果没有定义，则翻阅文档找找构建工具的构建命令即可，例如这是 Vite的构建部署文档。

在构建前需要注意的：

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

当执行完构建后，在某个目录下，会生成若干的静态文件。

把静态文件上传到服务器上对应的目录，即可以通过服务器访问构建好的静态文件了。

在上传时，如果一个一个文件上传，会有些麻烦， 我们可以将这些静态文件打包成一个 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 上传到机器上的目录

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

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

命令解释:

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

当上传到服务器上后，需要把静态文件从 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;
    }

    ...

进入到对应的目录

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 -

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

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 Actions， Travis CI 等。

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

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

• ssh 教程
• Bash 脚本教程
• Effective Shell
• How to avoid ssh from prompting key passphrase for passwordless logins