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

[NOTE] Updated May 31, 2023. This article may have outdated content or subject matter.

前端项目开发完成后构建静态文件，之后一般要部署到服务器上。

例如 Nginx，本文将介绍从构建到部署过程中的步骤，

涉及到的一些命令如 tar ， ssh ， scp ，以及笔者的一些小技巧。

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

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

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

在构建前需要注意的：

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

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

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

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

压缩

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

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

`1`	`tar -zcvf build_1.0.tar.gz *`

参数解释：

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

打包完之后，需要把 tar 包上传到服务器，可以使用 scp 命令。

假设要上传到 1.1.1.1 上的 /home 目录，使用 1.1.1.1 的 root 用户，可以执行如下命令：

命令解释：

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

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

  ssh [email protected]
  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 就好了 (不过出于安全考虑，你也可以验证一下这个指纹对不对，确定是你要连接的目标机器)
- 这里是因为机器之前没连接过，要把目标机器的公钥存储到下来，用来下次识别目标机器

避免重复输入密码

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

生成密钥

  > ssh-keygen

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

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

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

参数解释：

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

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

移除过期的指纹

前面使用 ssh 连接的时候，需要确认 fingerprint ，一般会被保存在 ~/.ssh/known_host 文件下。

（笔者是 Mac 系统，不同系统存放位置可能有差异。）

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

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

当上传到服务器上后，需要把静态文件从 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`	`cd path/to/static_file_folder`

执行解压命令

`1`	`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 [email protected] "tar -C /home/hello-world -xz -f-" < build.tar.gz

  echo 'upload & untar done'

  cd -

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

ssh [email protected] 连接机器
"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 实现了博客的自动部署，也许可以给你一些参考。

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

Author Spike Leung

LastMod 2023-05-31 (1ef6a30)

License CC BY-NC-ND 4.0

Contents

压缩

避免重复输入密码

移除过期的指纹