## 运行 js 代码

```go
import (
  "fmt"

  "github.com/robertkrimen/otto"
)

func main() {
  vm := otto.New()
  result, _ := vm.Run(`
      foo = 1 + 2
      console.log(foo)
      result = foo;
  `)
  fmt.Println(result) // 4
}
```

## 调用函数

```go
func main() {
  vm := otto.New()
  vm.Run(`
  function hello(name){
      console.log('hello ' + name)
      return 'OK'
  }
`)

  ret, _ := vm.Call("hello", nil, "kuizuo")
  fmt.Println(ret)
}

```

这里以 go 调用 js 的 CryptoJS 来实现加密演示。

```go
func main() {
  bytes, _ := ioutil.ReadFile("md5.js")
  vm := otto.New()
  vm.Run(string(bytes))

  ret, _ := vm.Call("MD5", nil, "a123456")
  fmt.Println(ret)
}
```

## 封装成 go 函数

不过这样写法不方便，可以将其封装为一个 go 函数来调用。

```go
import (
  "fmt"
  "io/ioutil"

  "github.com/robertkrimen/otto"
)

var vm = otto.New()

func initJs() {
  bytes, _ := ioutil.ReadFile("md5.js")
  vm.Run(string(bytes))
}

func md5(content string) string {
  ret, err := vm.Call("MD5", nil, content)
  if err != nil {
    return ""
  }
  return ret.String()
}

func main() {
  initJs()
  result := md5("a123456")
  fmt.Println(result)
}

```

Go调用js代码

Vercel 除了能部署静态站点外，还能运行 Serverless Functions，也是本次的主题



## 创建接口

> To deploy Serverless Functions without any additional configuration, you can put files with extensions matching [supported languages](https://vercel.com/docs/concepts/functions/supported-languages) and exported functions in the `/api` directory at your project's root.

vercel 约定在目录下 api 下创建接口路径，这里创建 api/hello.js 文件，当然也支持 ts 以及 ESmodule 写法

```javascript title='api/hello.js'
export default function handler(request, response) {
  const { name } = request.query
  response.status(200).send(`Hello ${name}!`)
}
```

此时通过`vc --prod`生产环境部署后，在浏览器请求 vercel 提供的二级域名/api/hello?name=vercel 便可得到文本`Hello vercel`，而其函数写法与 express 类似

接口信息可以在 Functions 中查看

![image-20220512155341109](https://img.kuizuo.cn/image-20220512155341109.png)

### 使用 typescript

不过上面是使用 js 写法，vercel 更推荐[使用 TypeScript](https://vercel.com/docs/concepts/functions/serverless-functions/supported-languages#using-typescript)

安装 `@vercel/node`

```
npm i -D @vercel/node
```

将上面的 hello.js 改为 hello.ts，内容为

```typescript title='api/hello.ts'
import type { VercelRequest, VercelResponse } from '@vercel/node'

export default (request: VercelRequest, response: VercelResponse) => {
  const { name } = request.query
  response.status(200).send(`Hello ${name}!`)
}
```

此外还可以使用其他语言，这里为 Vercel 所支持的[语言](https://vercel.com/docs/concepts/functions/serverless-functions/supported-languages#supported-languages:)

### 开发环境

上面创建的例子是在生产环境下进行的，vercel 官方非常贴心的提供了 vercel dev 来用于开发环境（本地调试）。

```
vercel dev
```

执行后，将会默认开启 3000 端口来启动服务，此时访问 http://localhost:3000/api/hello 就可调用该接口

## vercel.json

在根目录创建[vercel.json](https://vercel.com/docs/project-configuration)，用于设置 Vercel 项目配置 ，其配置结构与 Nextjs 的 next.config.js 大体一致。

### headers

vercel 允许响应携带自定义的协议头，例如设置允许跨域的协议头。

```json title='vercel.json' icon='logos:vercel-icon'
{
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        {
          "key": "Access-Control-Allow-Origin",
          "value": "*"
        },
        {
          "key": "Access-Control-Allow-Headers",
          "value": "content-type"
        },
        {
          "key": "Access-Control-Allow-Methods",
          "value": "DELETE,PUT,POST,GET,OPTIONS"
        }
      ]
    }
  ]
}
```

### rewrites

Vercel 支持路由重写功能，因此我们可以实现反向代理。

例如将前缀为/proxy 的所有请求都代理到 ，其写法如下

```json title='vercel.json' icon='logos:vercel-icon'
{
  "rewrites": [
    {
      "source": "/proxy/:match*",
      "destination": "http://127.0.0.1:5000/:match*"
    }
  ]
}
```

请求`/proxy/hello` 将会请求到 `http://127.0.0.1:5000/hello`（不带有`/proxy`）

:::warning 注意：无法代理前缀为 `/api` 的接口，即使设置了也无效。

:::

#### redirects 和 rewrites 区别

除了 rewrites 还有一个 redirects，也就是重定向，response 返回 3xx 的状态码和 location 头信息。

而 rewrites 重写内部转发了请求，地址栏不会发生改变，并且状态码由转发的请求决定。

并且 redirects 是先被调用的，而 rewrites 是后被调用的。

### functions

可以设置指定接口分配的内存以及最大执行时间。默认下

- Memory: 1024 MB (1 GB)
- Maximum Execution Duration: 5s (Hobby), 15s (Pro), or 30s (Enterprise)

个人用户接口超时时间最长为 5 秒。

## 部署 Node 项目

可以使用 vercel.json 配置来覆盖 vercel 默认行为，也就能使用 Vercel 部署 Node 项目。

假设要部署一个 Express 项目，则配置如下

```json title='vercel.json' icon='logos:vercel-icon'
{
  "builds": [
    {
      "src": "app.js",
      "use": "@vercel/node"
    }
  ]
}
```

安装 `@vercel/node`包

```bash
npm i @vercel/node -D
```

然后运行 vercel，而不是~~vercel --prod~~

### 部署 Nest.js

这里有个部署 Nest.js 项目的教程 [基于 Vercel+Github Action 部署 Nest.js 项目 - 掘金 (juejin.cn)](https://juejin.cn/post/7023690214803505166)

其 vercel.json 如下

```json title='vercel.json' icon='logos:vercel-icon'
{
  "builds": [
    {
      "src": "dist/main.js",
      "use": "@vercel/node"
    }
  ],
  "routes": [
    {
      "src": "/(.*)",
      "dest": "dist/main.js"
    }
  ]
}
```

然后执行 vercel --prod（因为 nest 项目需要 build 打包）

## 最后

Vercel 十分良心，为个人用户提供了免费的爱好者计划，每个月提供 100G 流量，构建时间是 100 小时，50 个根域名绑定。

Vercel部署Serverless

![image-20220511170700075](https://img.kuizuo.cn/image-20220511170700075.png)

:::tip 观前提醒

[Vercel](https://vercel.com/) 部署静态资源网站极其**简单方便**，并且有可观的**访问速度**，最主要的是**免费部署**。

如果你还没有尝试的话，强烈建议去使用一下。

:::

[vercel 介绍](https://zhuanlan.zhihu.com/p/452654619)

与之相似的产品 [Netfily](https://netlify.com)，如果你想部署私有化，推荐 [Coolify](https://coolify.io)

如果你想搭建一个类似这样的站点，不妨参考我的 [Docusaurus 主题魔改](/docs/docusaurus-guides)

:::danger DNS 污染

由于某些原因，vercel.app 被 DNS 污染（即被墙），目前在国内已经无法打开，除非你有自己的域名，通过 CNAME 解析访问你的域名。

**因此想要在国内访问，建议不要使用 Vercel 部署了，最好选用 Netlify。**

:::



## 注册账号

进入 [Vercel](https://vercel.com) 官网，先去注册一个账号，建议注册一个 [Github](https://github.com/) 账号后，使用 Github 账号来登录 Vercel。

## 部署网站

进入 [Dashboard](https://vercel.com/dashboard)

![image-20220511170233559](https://img.kuizuo.cn/image-20220511170233559.png)

点击 [New Project](https://vercel.com/new)

![image-20220511165902993](https://img.kuizuo.cn/image-20220511165902993.png)

这里可以从已有的 git repository 中导入，也可以选择一个模板。

这里登录我的 Github 账号选择仓库，然后点击 blog 仓库旁的 Import 即可。当然，你也可以直接拉取我的仓库，仓库地址：[kuizuo/blog](https://github.com/kuizuo/blog)

![image-20220511165513526](https://img.kuizuo.cn/image-20220511165513526.png)

点击 Deploy，然后静等网站安装依赖以及部署，稍后将会出现下方页面。

![image-20220511170700075](https://img.kuizuo.cn/image-20220511170700075.png)

此时网站已经成功搭建完毕了，点击图片即可跳转到 vercel 所提供的二级域名访问。

是不是极其简单？**甚至不需要你输入任何命令，便可访问构建好的网站。**

## 自定义域名

如果有自己的域名，还可以在 vercel 中进行设置。

首先进入 blog 的控制台，在 Settings -> Domains 添加域名。

![image-20220511171144240](https://img.kuizuo.cn/image-20220511171144240.png)

接着提示域名需要 DNS 解析到 vercel 提供的记录值

![image-20220511171359148](https://img.kuizuo.cn/image-20220511171359148.png)

登录所在的域名服务商，根据 Vercel 提供的记录值 cname.vercel-dns.com，添加两条记录

![image-20220511172741663](https://img.kuizuo.cn/image-20220511172741663.png)

此时回到 Vercel，可以看到记录值成功生效。

![image-20220511172027570](https://img.kuizuo.cn/image-20220511172027570.png)

此时访问自己的域名，同样也能访问到页面，同时还有可观的访问速度。

### 自动颁发 SSL 证书

默认状态下，Vercel 将会颁发并自动更新 SSL 证书。（着实方便，不用自己手动去申请证书，配置证书）

![image-20220511172240999](https://img.kuizuo.cn/image-20220511172240999.png)

## 持续集成（CI）/持续部署（CD）

> To update your Production Deployment, push to the "main" branch.

当主分支有代码被推送，Vercel 将会重新拉取代码，并重新构建进行单元测试与部署（构建速度可观）

![image-20220511173442694](https://img.kuizuo.cn/image-20220511173442694.png)

## Serverless

同时 vercel 还支持 serverless，也就是说，不仅能部署静态站点，还能部署后端服务，不过肯定有一定的限制。

[Vercel 部署 Serverless](/blog/vercel-deploy-serverless)

## Edge Functions

翻译过来叫边缘函数，你可以理解为在 Vercel 的 CDN 上运行的函数，可以在 Vercel 的 CDN 上运行代码，而不需要在服务器上运行。

由于这类函数和静态资源一样，都通过 CDN 分发，因此它们的执行速度非常快。

官网介绍：[Edge Functions](https://vercel.com/docs/concepts/functions/edge-functions)

## Vercel CLI

有时候并不想登录网页，然后新建项目，选择仓库，拉取部署，而是希望直接在项目下输入命令来完成部署。vercel 自然肯定提供相对应的脚手架 **[CLI](https://vercel.com/docs/cli)** 供开发者使用。

安装

```
npm i -g vercel
```

在项目根目录中输入

```
vercel --prod
```

第一次将进行登录授权，选择对应平台，将会自动打开浏览器完成授权，接着将会确认一些信息，一般默认回车即可，下为执行结果

```
Vercel CLI 24.2.1
? Set up and deploy “F:\Project\React\online-tools”? [Y/n] y
? Which scope do you want to deploy to? kuizuo
? Link to existing project? [y/N] n
? What’s your project’s name? online-tools
? In which directory is your code located? ./
Auto-detected Project Settings (Create React App):
- Build Command: react-scripts build
- Output Directory: build
- Development Command: react-scripts start
? Want to override the settings? [y/N] n
🔗  Linked to kuizuo12/online-tools (created .vercel and added it to .gitignore)
🔍  Inspect: https://vercel.com/kuizuo12/online-tools/6t8Vt8rG3waGVHTKU7ZzJuGc6Hoq [2s]
✅  Production: https://online-tools-phi.vercel.app [copied to clipboard] [2m]
📝  Deployed to production. Run `vercel --prod` to overwrite later (https://vercel.link/2F).
💡  To change the domain or build command, go to https://vercel.com/kuizuo12/online-tools/settings
```

执行完毕后，将会在根目录创建.vercel 文件夹，其中 project.json 中存放 orgId 和 projectId，下面将会用到。此时在[dashboard](https://vercel.com/dashboard)中也能看到该项目被部署了。

不过这样部署上去的代码，并不会连接 git 仓库，需要到控制台中选择仓库即可。

如果想在 github actions 中使用，则新建一个 steps，设置好对应的变量。

```
	- name: Deploy to Vercel
        run: npx vercel --token ${{VERCEL_TOKEN}} --prod
        env:
            VERCEL_TOKEN: ${{ secrets.VERCEL_TOKEN }}
            VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
            VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
```

还有一个 VERCEL_TOKEN 需要到 [Vercel Settings Tokens](https://vercel.com/account/tokens) 新建一个 Token。

## 总结

没什么好总结，直接上手使用，相信你会爱上 Vercel，以及他旗下的产品，[Next.js](https://github.com/vercel/next.js) 和 [Turbo](https://github.com/vercel/turbo) 等等。

Vercel部署个人博客

如果有写过项目的经历，就免不了将代码上传到服务器上，安装依赖，然后输入启动命令的步骤。但是有的项目往往需要经常性的改动，如果还是照着上面的方式进行部署的话。先不说这样操作的效率，操作个几次就想罢工了。并且上面这样操作的往往容易误操作。而 Github Actions 正是该问题的良药。



## 介绍

Github Actions 是 Github 提供的免费自动化构建实现，特别适用于持续集成和持续交付的场景，它具备自动化完成许多不同任务的能力，例如构建、测试和部署等等。

## 概念

在进行操作前，先对 Github Actions 基础知识进行补充，具体可查看 [GitHub Actions 入门教程 阮一峰](https://www.ruanyifeng.com/blog/2019/09/getting-started-with-github-actions.html)

可以在 [GitHub Marketplace · Actions to improve your workflow](https://github.com/marketplace?type=actions) 中找到所有的 Actions。

## 实例：将 VIte 项目发布到 GitHub Pages

第一步：创建一个 Vite 工程，可在[官网](https://cn.vitejs.dev/guide/#scaffolding-your-first-vite-project)中查看如何安装

```
pnpm create vite
```

选择对应的项目名（vite-project）与模板（vue-ts）

第二步：打开`package.json`文件，加一个`homepage`字段，表示该应用发布后的根目录（参见[官方文档](https://create-react-app.dev/docs/deployment#building-for-relative-paths)）。

```
"homepage": "https://[username].github.io/vite-project",
```

上面代码中，将`[username]`替换成你的 GitHub 用户名。

第三步：在这个仓库的`.github/workflows`目录，生成一个 workflow 文件，名字可以随便取，这个示例是`ci.yml`。

workflow 文件如下

```yml
name: Build and Deploy
on:
  push:
    branches:
      - master
jobs:
  build-and-deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - name: Install and Build
        run: |
          yarn install
          yarn run build

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3
        with:
          personal_token: ${{ secrets.ACCESS_TOKEN }}
          publish_dir: ./dist
```

上面这个 workflow 文件的要点如下

1. 整个流程在`master`分支发生`push`事件时触发。
2. 只有一个`job`，运行在虚拟机环境`ubuntu-latest`。
3. 第一步是获取源码，使用的 action 是`actions/checkout`。
4. 第二步是安装依赖与构建，`yarn install`和`yarn run build`
5. 第三步是部署到 Github Page 上，使用的 action 是 [peaceiris/actions-gh-pages@v3](https://github.com/marketplace/actions/github-pages-action)。其中需要设置 secrets.ACCESS_TOKEN

第四步：将项目上传置 Github 仓库中，

该 peaceiris/actions-gh-pages 支持三种 Token，这里使用 personal_token，其生成教程在[官方文档](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token)中有详细图文，这里就不贴其生成的图了。**不过记得权限过期以及勾选上 workflow**

:::tip Tip

token 只会在生成的时候显示一次，如需要再次显示，则可以点击，但使用此令牌的任何脚本或应用程序都需要更新！

:::

然后在**Settings -> Secrets -> Actions 中 New repository secret**中便可添加 secret。

![image-20220511122017247](https://img.kuizuo.cn/image-20220511122017247.png)

这时候只要一调用 git push，就会触发对应的 workflows 文件配置。点击 Actions 便可看到 jobs 工作。

![image-20220511122420135](https://img.kuizuo.cn/image-20220511122420135.png)

此时访问https://kuizuo.github.io/vite-project就可呈现vite项目（不过我已经把仓库给关闭了），但进入会白屏，控制台提示

![image-20220511122914534](https://img.kuizuo.cn/image-20220511122914534.png)

很显然，需要静态资源请求的路径错了，正确的应该是https://kuizuo.github.io/vite-project/assets/index.2435d274.js，根据Vite中的[构建生产版本](https://www.vitejs.net/guide/build.html#public-base-path) 通过命令行参数 `--base=/vite-project/`

稍加操作在 Install and Build 加上 base 参数

```
      - name: Install and Build
        run: |
          yarn install
          yarn run build --base=/vite-project/
```

git push 后，稍等片刻再次访问便可得到如下页面

![image-20220511125536189](https://img.kuizuo.cn/image-20220511125536189.png)

## FTP发布到自有服务器上

那么现在在 Github Page 上搭建好了，但还要将编译后的文件还可以通过 FTP 协议添加自己的服务器上，这里我就以我的博客为例。

在服务器中开启 FTP，并添加一个用户名,密码以及根目录(这里我问选择为项目目录)

workflow 要做的就是新建一个 steps，这里选用 [FTP-Deploy-Action](https://github.com/SamKirkland/FTP-Deploy-Action)，以下是我的完整配置内容

```yml
name: FTP Deploy

on: [push]

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - name: Use Node.js 16
        uses: actions/setup-node@v3
        with:
          node-version: '16.x'

      - name: Build Project
        run: |
          yarn install
          yarn run build

      - name: FTP Deploy
        uses: SamKirkland/FTP-Deploy-Action@4.0.0
        with:
          server: ${{ secrets.ftp_server }}
          username: ${{ secrets.ftp_user }}
          password: ${{ secrets.ftp_pwd }}
          local-dir: ./build/
          server-dir: ./
```

相信第一个实例中的 workflow 应该已经明白了，其中 ftp_server，ftp_user，ftp_pwd 都是私密信息，所以需要 New repository secret 设置这三个变量。

但由于 build 下存在大量文件夹与文件，所以 FTP 速度上传速度堪忧，最终耗时 17 minutes 38.4 seconds。这里只是作为 FTP 演示。

## SCP发布到自有服务器上

FTP 传输文件着实过慢，所以可以通过 SCP 的方式来传输文件，这里用到了[ssh deploy · Actions](https://github.com/marketplace/actions/ssh-deploy)，以下是示例

```yaml
name: ci

on:
  push:
    branches:
      - main

jobs:
  build-and-deploy:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout
        uses: actions/checkout@v3

      - name: Use Node.js 16
        uses: actions/setup-node@v3
        with:
          node-version: '16.x'

      - name: Build Project
        run: |
          yarn install
          yarn run build

      - name: SSH Deploy
        uses: easingthemes/ssh-deploy@v2.2.11
        env:
          SSH_PRIVATE_KEY: ${{ secrets.PRIVATE_KEY }}
          ARGS: '-avzr --delete'
          SOURCE: 'build'
          REMOTE_HOST: ${{ secrets.REMOTE_HOST }}
          REMOTE_USER: 'root'
          TARGET: '/www/wwwroot/blog'
```

其中 **PRIVATE_KEY** 为服务器SSH登录的私钥，**REMOTE_HOST** 就是服务器的ip地址。当然，这些参数也都作为私密信息，也是要通过New repository secret来设置的。

## 总结

从上面的演示便可看出 Github Actions 的强大，但其实我挺早之前就了解到它能做这些事情，但迟迟没有动手尝试一番，因为这些自动化操作用人工也是能完成的。也许当时的我认为，用人工所花费的时间远比自动化操作的学习时间来的长，可又随着自己的个人应用增加，每次都需要手动发布，而此时前者的时间已远远大于后者，所以才会想去学习。

明知该技术是一定会接触的，为何不趁现在去了解学习呢？

使用Github Action自动化部署

## Linux

### 查看端口占用情况

```bash
lsof -i:端口号
```

#### 实例

```bash
[root@VM-4-5-centos]# lsof -i:5002
COMMAND   PID USER   FD   TYPE   DEVICE SIZE/OFF NODE NAME
node    15196  www   25u  IPv6 63810147      0t0  TCP *:rfe (LISTEN)
```

更多 lsof 的命令如下：

```bash
lsof -i:8080：查看8080端口占用
lsof abc.txt：显示开启文件abc.txt的进程
lsof -c abc：显示abc进程现在打开的文件
lsof -c -p 1234：列出进程号为1234的进程所打开的文件
lsof -g gid：显示归属gid的进程情况
lsof +d /usr/local/：显示目录下被进程开启的文件
lsof +D /usr/local/：同上，但是会搜索目录下的目录，时间较长
lsof -d 4：显示使用fd为4的进程
lsof -i -U：显示所有打开的端口和UNIX domain文件
```

### netstat

**netstat -tunlp** 用于显示 tcp，udp 的端口和进程等相关情况。

netstat 查看端口占用语法格式：

```
netstat -tunlp | grep 端口号
```

- -t (tcp) 仅显示 tcp 相关选项
- -u (udp)仅显示 udp 相关选项
- -n 拒绝显示别名，能显示数字的全部转化为数字
- -l 仅列出在 Listen(监听)的服务状态
- -p 显示建立相关链接的程序名

### 结束进程

```bash
kill -9 PID
```

[Linux 查看端口占用情况 | 菜鸟教程 (runoob.com)](https://www.runoob.com/w3cnote/linux-check-port-usage.html)

## Windows

### 查看端口占用的 PID

```bash
netstat -ano | findstr "端口号"
```

例

```bash
  netstat -ano | findstr "8080"
  TCP    0.0.0.0:8080           0.0.0.0:0              LISTENING       18180
  TCP    192.168.123.210:14075  115.236.121.240:8080   ESTABLISHED     14060
  TCP    [::]:8080              [::]:0                 LISTENING       18180
```

### 查看指定 PID 的进程

如果想看占用进程，可以继续输入命令：

```bash
tasklist|findstr "PID"
```

例

```bash
tasklist|findstr "18180"
java.exe                     18180 Console                    1    852,996 K
```

### 结束进程

```bash
taskkill /T /F /PID PID
```

例

```bash
taskkill /T /F /PID 8080
```

强制（/F 参数）杀死 pid 为 8080 的所有进程包括子进程（/T 参数）
