映像档（Image）相关指令​

容器（Container）相关指令​

资料卷（Volume）与网路 相关指令​

系统与其他 相关指令​

Docker Compose 相关指令​

补充常用参数​

• -d：背景执行（detached）
• -p <主机 port>:<容器 port>：port对映
• -v <主机路径>:<容器路径>：挂载资料卷
• --name <名称>：自订容器名称
• --rm：容器停止后自动移除
• -e <环境变数>=<值>：指定环境变数

以下内容适用 windows 的环境

下载 nvm-windows​

前往 GitHub 官方页面下载安装程式 🔗 https://github.com/coreybutler/nvm-windows/releases 下载 nvm-setup.exe 安装即可。

安装其他版本 NodeJS​

选择要安装的其他版本 Node.js，ex 我想装和线上环境同样版本的 18.x

打开 Command Prompt 或 PowerShell 输入：

nvm install 18.20.8

切换成其他版本 NodeJS​

nvm use 18.20.8

确认目前版本​

node -v

应该会显示类似：

v18.20.8

查询已安装版本​

nvm list

范例输出：​

 * 18.20.8 (Currently using 64-bit executable)
 22.14.0

• * 表示目前正在使用的版本
• 每一行显示的是透过 nvm 安装过的版本

用 iptables 封锁 IP​

sudo iptables -A INPUT -s <攻击者IP> -j DROP

范例：

sudo iptables -A INPUT -s 192.168.1.100 -j DROP

这会阻止该 IP 的任何连线进入 Server，包括 HTTP、SSH 等。

封锁之后确认：​

sudo iptables -L -n

如果想解除封锁：​

sudo iptables -D INPUT -s 192.168.1.100 -j DROP

储存规则（不然重启会失效）​

sudo service iptables save

只确定在 CentOS 可以执行，其他系统要再查

查询时间

timedatectl

这时会看到像这样的结果

               Local time: Mon 2025-02-10 01:19:25 UTC
           Universal time: Mon 2025-02-10 01:19:25 UTC
                 RTC time: Mon 2025-02-10 01:19:25    
                Time zone: Etc/UTC (UTC, +0000)       
System clock synchronized: yes                        
              NTP service: active                     
          RTC in local TZ: no

列出所有可用时区，查询台北时间的名称

timedatectl list-timezones ## 列出全部时区
timedatectl list-timezones | grep Taipei ## 列出台北时区

会看到结果如下

Asia/Taipei

执行

sudo timedatectl set-timezone Asia/Taipei

重新查询时间

timedatectl

重新得到结果

               Local time: Mon 2025-02-10 09:20:09 CST
           Universal time: Mon 2025-02-10 01:20:09 UTC
                 RTC time: Mon 2025-02-10 01:20:09    
                Time zone: Asia/Taipei (CST, +0800)   
System clock synchronized: yes                        
              NTP service: active                     
          RTC in local TZ: no

就可以看到 Time zone 更改为 Asia/Taipei (CST, +0800)，Local time 也成功更改为台北时间了

原 Line Notify 程式​

会看这篇文章的，应该都是原Line Notify 的用户，对Line Notify 就不多做介绍了，有兴趣可以看旧文：【Line Notify 测试笔记】，然后同样用Google Apps Script 来做测试，先来看一下旧程式，详细内容也可以参考旧文：【[Google Apps Script 测试笔记，实作监控网站发送Line Notify](/blog/google -app-script-monitor)】

/**
 * 發送 Line Notify 訊息
*/
function sendLineNotify(lineToken, message) {
  let lineUrl = 'https://notify-api.line.me/api/notify';
  let option = {
    method: 'post',
    headers: { Authorization: 'Bearer ' + lineToken },
    payload: {
      message: message
    }
  };
  UrlFetchApp.fetch(lineUrl, option);
}

从这个程式来看，程式很简单，只需要取得 line notify 的 token (权杖) 就可以了

改写后的 Messaging API​

也不难，直接贴程式码

/**
 * Messaging API 發送訊息到 Line 群組
*/
function sendLineGroupMsg(accessToken, groupId, messageText) {
    const lineUrl = 'https://api.line.me/v2/bot/message/push';
    const headers = {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${accessToken}`
    };
    const messageData = {
        to: groupId,
        messages: [
            {
                type: "text",
                text: messageText
            }
        ]
    };
    let option = {
        method: 'post',
        headers: headers,
        payload: JSON.stringify(messageData)
    };
    UrlFetchApp.fetch(lineUrl, option);
}

注意一下，这支程式是传送讯息到「群组」的，如果是要传到个人的话，请改成 userId 即可，程式其实是一样的

然后他和原来 Line Notify 的差别主要是它需要两个参数：accessToken 和 groupId，所以基本上只要知道这两个参数该怎么找到，把 function 换掉就完工了

Channel Access Token​

请参考【Line Bot Messaging API 测试笔记】这篇文章，需要先注册 Line 官方帐号，然后到 Line Developers 就能取得该官方帐号的 channel access token 了

Group ID / User ID​

这个比较麻烦一点，用过Line 官方帐号的人应该知道官方帐号是看不到会员名单的(我还是不理解他们的理由)，所以就需要从webhook 的程式着手，同样参考【Line Bot Messaging API 测试笔记】这篇文章，我们先把原来的程式增加一行log

// event handler
function handleEvent(event) {
  console.log(event);
}

基本上只要有什么动作，就可以看到这一行印出讯息

将官方帐号加入好友会看到

{
  type: 'follow',
  webhookEventId: '',
  deliveryContext: { isRedelivery: false },
  timestamp: 1730174569813,
  source: { type: 'user', userId: '使用者ID' },
  replyToken: '',
  mode: 'active'
}

将官方帐号邀请到群组会看到

{
  type: 'join',
  webhookEventId: '',
  deliveryContext: { isRedelivery: false },
  timestamp: 1730174437255,
  source: { type: 'group', groupId: '群组ID' },
  replyToken: '',
  mode: 'active'
}

手动的记录一下 userId 和 groupId 或写支程式去 parser json 就可以取得资料，发送讯息给个人或群组了

其他设定​

请到 Line 官方帐号，在帐号设定将加入群组或多人聊天室改成「接受邀请」，要不然是没有办法将官方帐号邀请到群组的

结论​

Line Messaging API 要完全取代Line Notify 看起来应该是没有问题，转换过程还算顺利，主要的差别就只有费用，Line Notify 是免费服务，Messaging API 的免费额度则只有200则/月，再来就要付费了，不过使用者付费其实还算合理啦，如果真的还是要找免费服务，大概就只能换Telegram 或Discord 了，但我没打算试就是

一开始接触Line Bot 可能会让人有点困惑的是有不同的入口，一般的区分Line 官方帐号是给一般管理者使用的，Line Developers 则是开发者专用，但是有部份功能会同时重覆出现在这两个网站，这篇文章简单的做了一下使用Line Bot Messagin API 会用到的功能

Line 官方帐号​

https://tw.linebiz.com/

这个介面是给一般使用者管理官方帐号，但是要使用 Line Bot Messaging API 要有官方帐号，所以需要先建立一个官方帐号

在建立好官方帐号后，点「聊天」的 Tab，点选后选取「前往回应设定页面」

选单选取「Messaging API」，然后点选「启用 Messaging API」

就会看到以下的画面，这里的重点是「Channel secret」，后面会用到，然后是「Webhook 网址」，我们会需要写支程式，后面再说

先点下面的「Line Developers」进行其他设定，这时就会跳到 Line Developers 这个网站

Line Developers​

https://developers.line.biz/

第一个印象就是没有中文版本，语言只有英文和日文可以选

一样选到「Messaging API」的 tab

拉到最下方，找到最重要的 「Channel access token」，有了这个 token 才能发送讯息

Line Webhook 做什么用的？怎么写？​

Webhook 是一种通知机制，当用户在 LINE 上与 bot 进行互动时，LINE 平台会将这些事件（如讯息、加入、离开等）以 HTTP POST 请求的形式推送至设定的 Webhook URL。透过 Webhook，后端应用可以接收到事件并作出对应的回应或动作，例如自动回覆讯息。

这里用 NodeJS 加上 Express 写一个简单的范例

请先安装 @line/bot-sdk

npm install express body-parser @line/bot-sdk

范例档如下，这里会需要「Channel access token」和「Channel secret」，分别在前面的说明可以取得

import * as line from '@line/bot-sdk'
import express from 'express'

const CHANNEL_ACCESS_TOKEN = 'YOUR_CHANNEL_ACCESS_TOKEN';
const CHANNEL_SECRET = 'YOUR_CHANNEL_SECRET';

// create LINE SDK config from env variables
const config = {
    channelSecret: CHANNEL_SECRET,
};

// create LINE SDK client
const client = new line.messagingApi.MessagingApiClient({
    channelAccessToken: CHANNEL_ACCESS_TOKEN
});

// create Express app
const app = express();

// register a webhook handler with middleware about the middleware, please refer to doc
app.post('/callback', line.middleware(config), (req, res) => {
    Promise
        .all(req.body.events.map(handleEvent))
        .then((result) => {
            // 設置 response header
            res.set('ngrok-skip-browser-warning', 'true'); // 忽略 ngrok 警告
            res.json(result);
        })
        .catch((err) => {
            console.error(err);
            res.status(500).end();
        });
});

// event handler
function handleEvent(event) {
		console.log(event);
    if (event.type !== 'message' || event.message.type !== 'text') {
        // ignore non-text-message event
        return Promise.resolve(null);
    }

    // create an echoing text message
    let reply = "您說了：" + event.message.text;
    const echo = { type: 'text', text: reply };

    // use reply API
    return client.replyMessage({
        replyToken: event.replyToken,
        messages: [echo],
    });
}

// listen on port
const port = 3000;
app.listen(port, () => {
    console.log(`listening on ${port}`);
});

这支 webhook 做的事相当简单，只有在收到文字讯息，ex: 收到「hello」，然后回传「您说了: hello」

要注意的是webhook 必须要有个公开的URL，在开发的时候，建议可以使用ngrok 来测试，正式环境的话，可以参考【如何使用Serverless Framework 将Express 部署到AWS Lambda】使用AWS Lambda 或自行架设express server

有了 webhook 公开的 URL 后，回到刚才 Line 官方帐号，将 URL 填入

然后到「回应设定」，将「Webhook」打开和预设开启的「自动回应讯息」关闭

这时候直接从 Line 传一则讯息，就可以看到回应的结果了

再来就可以做不同的运用，像是比较常见的接 OpenAI 的 API，马上就可以变成 AI 聊天机器人了…

到目录 C:\Users\你的帐号\AppData\Local\Atlassian，会看到如下截图的目录

再往下点名称比较长的目录，会看到如下截图，将红框的 Composition.cache 这个快取档案删除，然后重新启动 SourceTree 就可以了

同样的状况又再发生一次，这次删 Composition.cache 没用，改删掉 user.config 重新启动 SourceTree 就可以了

如果不放心直接删除 user.config 的话可以先备份，不过我删是没事，会看到再重新生成一个 user.config 档

以下记录包括安装 Docker、安装 Docker Compose，以及如何使用 docker-compose.yml 启动 container、如何停止及删除 docker-compose.yml 启动的 container

步骤 1：安装 Docker (旧版)​

1.1. 更新​

sudo apt update

1.2. 安装 dependencies​

sudo apt install apt-transport-https ca-certificates curl software-properties-common

1.3. 添加 Docker 的官方 GPG 密钥​

curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /usr/share/keyrings/docker-archive-keyring.gpg

1.4. 设置 Docker 官方稳定版 lib​

echo "deb [arch=$(dpkg --print-architecture) signed-by=/usr/share/keyrings/docker-archive-keyring.gpg] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable" | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

1.5. 安装 Docker​

sudo apt update
sudo apt install docker-ce docker-ce-cli containerd.io

1.6. 启动 Docker 并设置开机自动启动​

sudo systemctl start docker
sudo systemctl enable docker

1.7. 验证 Docker 是否安装成功​

通过以下命令检查 Docker 版本，确认是否安装成功：

docker --version

如果看到类似于 Docker version 2x.xx.x, build xxxxx 的讯息，表示 Docker 安装成功。

步骤 1：安装 Docker (新版)​

1.1. 更新​

sudo apt update

1.2. 安装 dependencies​

sudo apt install apt-transport-https ca-certificates curl software-properties-common

1.3. 建立目录存放 GPG 金钥​

sudo mkdir -p /etc/apt/keyrings

1.4. 添加 Docker 的官方 GPG 密钥​

curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo gpg --dearmor -o /etc/apt/keyrings/docker.gpg

1.5. 设置 Docker 官方稳定版 lib​

echo "deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.gpg] https://download.docker.com/linux/ubuntu $(lsb_release -cs) stable " | sudo tee /etc/apt/sources.list.d/docker.list > /dev/null

1.6. 安装 Docker​

sudo apt update
sudo apt install docker-ce docker-ce-cli containerd.io

1.7. 启动 Docker 并设置开机自动启动​

sudo systemctl start docker
sudo systemctl enable docker

1.8. 验证 Docker 是否安装成功​

通过以下命令检查 Docker 版本，确认是否安装成功：

docker --version

如果看到类似于 Docker version 2x.xx.x, build xxxxx 的讯息，表示 Docker 安装成功。

步骤 2：安装 Docker Compose​

2.1. 下载 Docker Compose​

下载最新版本的 Docker Compose。使用以下命令来下载并安装：

sudo curl -L "https://github.com/docker/compose/releases/download/$(curl -s https://api.github.com/repos/docker/compose/releases/latest | grep 'tag_name' | cut -d\" -f4)/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

2.2. 为 Docker Compose 文件设置可执行权限​

sudo chmod +x /usr/local/bin/docker-compose

2.3. 验证 Docker Compose 是否安装成功​

检查 Docker Compose 的版本：

docker-compose --version

如果安装成功，应该看到类似于 Docker Compose version 2.xx.x 的讯息。

步骤 3：执行 docker-compose.yml​

假设已经有一个 docker-compose.yml 文件，可以按照以下步骤来启动 Docker container。

3.1. 将 docker-compose.yml 文件放在项目目录中​

首先，将 docker-compose.yml 文件放到一个新的项目目录中，比如：

mkdir my_project
cd my_project

3.2. 启动 Docker Compose​

在 docker-compose.yml 文件所在的目录中执行以下命令，这会启动 docker-compose.yml 中定义的所有服务：

sudo docker-compose up

这个命令会下载所有需要的 Docker image，并启动对应的 container。

• 如果你希望在后台运行 Docker Compose，使用 -d 参数：

sudo docker-compose up -d

3.3. 检查运行中的 container​

使用 docker ps 命令来检查哪些 container 正在运行：

docker ps

3.4. 停止并删除 container​

如果想停止运行的服务，可以使用以下命令停止 Docker Compose：

sudo docker-compose down

如果你想删除所有 container 和 volume，可以使用：

sudo docker-compose down -v

什么是 Serverless Framework​

【Serverless Framework 官网】

Serverless Framework 是一个 open source 工具，用于简化开发、部署和管理 serverless 应用。

虽然在官网首页上就写着 Zero-Friction Serverless Apps on AWS Lambda，但其实和 AWS 官方并没有关系，就是个第三方的工具。

测试记录​

Step 1 申请 AWS 帐号及安装 AWS CLI​

这个就不多说了，要测试 AWS Lambda 当然要先有 AWS 帐号，也请先安装 AWS CLI

Step 2 安装 Serverless Framework​

使用 npm 安装

npm i serverless -g

如果之前安装过，先请先 update 到最新的版本

serverless update

建议在安装后，直接执行 login

serverless login

选择「Login/Register」

会在浏览器开一个网页导到 https://app.serverless.com/ ，先把帐号注册好

Step 3 建立专案​

先建立空目录，以下测试目录名称为 test-express-aws，然后进到新建的目录

mkdir test-express-aws
cd test-express-aws

直接执行 serverless

serveless

有很多选项可以选，请依照想要建立的专案种类决定，这个测试范例选择「Node.js / Express API」

输入 project 和 app 名称，如果之前有建过其他 app，可以直接选或者再重新建立一个新的 app

执行完后，会发现执行的目录下多了一个刚才建的 project 名称的目录，底下有几支由程式新增的档案

学过 node js 应该就不陌生了，看一下 package.json 已经帮我们写好 dependencies，有 express 和 serverless-http

{
 "name": "test-project-0910",
 "version": "1.0.0",
 "description": "",
 "dependencies": {
 "express": "^4.19.2",
 "serverless-http": "^3.2.0"
 }
}

也自动生成了一支简单的 express 程式 handler.js

const serverless = require("serverless-http");
const express = require("express");
const app = express();

app.get("/", (req, res, next) => {
 return res.status(200).json({
 message: "Hello from root!",
 });
});

app.get("/hello", (req, res, next) => {
 return res.status(200).json({
 message: "Hello from path!",
 });
});

app.use((req, res, next) => {
 return res.status(404).json({
 error: "Not Found",
 });
});

exports.handler = serverless(app);

直接在专案下执行 npm install 安装 dependencies library，大致上就可以用了

npm install

Step 4 部署到 AWS Lambda​

执行

serverless deploy

成功后会显示 endpoint 网址

直接用浏览器点选网址，可以看到 handler.js 写的内容就在这边，之后要修改内容，就直接改 handler.js 这支程式就可以

登入到 AWS Lambda，也可以看到原来在 local 的档案，已经被上传上来了

可以看到自动连结到 API Gateway，不需要自己设定

到 应用程式->监控 就可以看到这支 API 的使用状况了

其实还算好理解为什么 Line 还什么要做自己的浏览器，差别在

• 使用 Line 内建浏览器，使用者还会留在 Line，当看完网页内容，按个 X，就会回到 Line
• 使用外部(预设)浏览器，使用者就直接去 Chrome、Safari，看完网页内容可能就去做别的事了

所以希望 Line 修改不太实际，如果希望朋友能够直接使用外部(预设)浏览器开启网址还是自己调整连结比较快，修改方法其实很简单，只需要在网址加上

?openExternalBrowser=1

就可以了，ex 要分享

https://tech.havocfuture.tw/blog/line-open-external-browser

改成

https://tech.havocfuture.tw/blog/line-open-external-browser?openExternalBrowser=1

这样用 Line 开启连结时，就不会呼叫 Line 的内建浏览器，而使用使用者习惯的 Chrome、Safari 了

不同的环境有不同的环境变数值是很正常的，ex 开发环境连开发环境的后端，正式环境连正式的环境的后端，开发环境有开发环境的api key，正式环境有正式环境的api key， 之前用过 npm-config，处理过类似的需求，不过 Vite 自己就内建处理这类需求的方法

.env 文件​

vite 预设有两种环境：development(开发环境)、production(正式环境)，先在根目录下建立两支程式 .env.development、.env.production，如下图

.env 的内容大概长这样，内容就是在不同环境会不一样，要自行定义的值

注意，key 值需要用 VITE_ 开头 才会读的到

内建环境变量​

Vite 有几个内建的环境变量

• import.meta.env.MODE: {string} 应用运作的模式。
• import.meta.env.BASE_URL: {string} 部署应用程式时的基本 URL。 他由base 配置项决定。
• import.meta.env.PROD: {boolean} 应用是否运行在生产环境（使用 NODE_ENV='production' 运行开发伺服器或建置应用程式时使用 NODE_ENV='production' ）。
• import.meta.env.DEV: {boolean} 应用是否运行在开发环境 (永远与 import.meta.env.PROD相反)。
• import.meta.env.SSR: {boolean} 应用程式是否运行在 server 上

直接来测试，在开发环境执行 npm run dev，用 console.log 将这些值印出来

就可以看到这是在 development 环境，如果是在正式环境就可以看到 import.meta.env.MODE 的值是 production

读取设定值​

举例我要取得 .env.development 的 VITE_API_HOST 这个值

const apiHost = import.meta.env.VITE_API_HOST; // http://localhost:8085

这样就简单可以取得值

Build​

一般执行

npm run build

建置后的结果是读取 .env.production 这个档案的环境变量

如果要建置读取 .env.development 开发环境，可以执行

npm run build -- --mode development

两个以上的环境​

如果有两个以上的环境，像是 qa 测试环境

• 建立 .env.qa 档案
• 执行 npm run build -- --mode qa

这样就会加载 .env.qa 的环境变量

什么是 Google Apps Script​

Google Apps Script是一种基于云的脚本语言，允许你自动化和扩展Google Workspace（包括Gmail、Calendar、Drive、Sheets、Docs等）以及其他Google服务的功能。 它提供了一种简单的方式来进行自动化处理、集成外部API和创建自定义函数、菜单和扩展功能，无需安装任何软体。

以上是 ChatGPT4 说的，不过这篇文章没那么复杂，也没要连动 Google 的其他服务，只要是用 Line Notify 发个告警而已

测试执行 Google Apps Script​

首先先连到网址：Google Apps Script

如果之前没使用过的话，可以先开个新专案，之后会看到像这样的画面

在 Google Apps Script 程式码用的是 gs，但体感上和 javascript 很像，在 javascript 能跑的语法大致上都能用

简单写了两个 function ，会发现下拉式选单可选择要执行哪一个

点选执行后，可以看到执行结果

监控网站发送 Line Notify 程式码​

简单写了支程式如下

/**
 * 排程
*/
function doMonitorCrontab() {
    let lineToken = '您的 line token';
    let monitors = [
      'https://havocfuture.tw',
      'https://tech.havocfuture.tw'
    ]
    doMonitor(monitors,lineToken);
}

/**
 * 執行監控網站
*/
function doMonitor(monitors, lineToken) {
  for(var i = 0, len = monitors.length; i < len; i++) {
    let monitorRes = monitorUrl(monitors[i]);
    if (monitorRes.status !== 'success') {
      sendLineNotify(lineToken, monitorRes.msg);
    }
  }
}

/**
 * 監控網站 URL
*/
function monitorUrl(url) {
  let res = {status: 'none', msg: ''};
  try {
    let fetchUrlCode = UrlFetchApp.fetch(url).getResponseCode();
    if (fetchUrlCode !== 200) {
      res = {status: 'fail', msg: url + '\n回應碼異常：' + fetchUrlCode};
    } else {
      res = {status: 'success', msg: ''};
    }
  } catch (e) {
    res = {status: 'fail', msg: url + '\n異常：' + e};
  }
  console.log('[' + res.status + ']', url, res.msg);
  return res;
}

/**
 * 發送 Line Notify 訊息
*/
function sendLineNotify(lineToken, message) {
  let option = {
    method: 'post',
    headers: { Authorization: 'Bearer ' + lineToken },
    payload: {
      message: message
    }
  };
  UrlFetchApp.fetch('https://notify-api.line.me/api/notify', option);
}

程式很简单，大致说明如下

• function sendLineNotify 负责放送 Line Notify，当然首先需要有 Line Token，如何取得 Line Token 可以参考之前的文章：【Line Notify 测试笔记】
• UrlFetchApp.fetch 在 GAS 上直接就可以使用，不用再 import 其他的 library
• 在 function doMonitorCrontab 填入 lineToken 和要监控的网站 URL Array 后，点选执行就可以看到结果，如果网站有 exception 或回传码不是 200，就可以在 Line 的群组收到告警通知

在 Google Apps Script 设立排程​

在左侧 menu 的「触发条件」，点选「新增触发条件」

填写排程内容，以下设定为每小时执行一次 doMonitorCrontab 这个 function

执行后就可以看到结果了

结论是 Google Apps Script 是好东西，相当简单也相当实用，至于如何连动处理 Google 其他服务的资料就改天再研究了

Gemini 是 Google AI 于 2023 年 12 月推出的多模态大型语言模型（LLM）。 它是在大量的文字、代码、影像、音讯和影片数据集上进行训练的。 Gemini 可以生成文字、翻译语言、编写不同类型的创意内容，并以信息丰富的方式回答您的问题。

Gemini 的主要功能包括：

• 生成文字：Gemini 可以生成各种风格的文字，包括新闻报导、诗歌、小说、代码、脚本、音乐作品、电子邮件、信件等。
• 翻译语言：Gemini 可以翻译 100 多种语言。
• 编写不同类型的创意内容：Gemini 可以编写各种不同类型的创意内容，包括诗歌、小说、脚本、音乐作品等。
• 以信息丰富的方式回答您的问题：Gemini 可以以信息丰富的方式回答您的问题，即使这些问题是开放式的、具有挑战性的或奇怪的。

Gemini 的优势包括：

• 它可以访问和处理来自 Google 搜索的信息：这意味着 Gemini 可以提供更广泛的知识。
• 它可以生成各种创意内容：这使得 Gemini 具有更广泛的应用范围。
• 它仍在开发中：这意味着 Gemini 还有很大的改进空间。

Gemini 的局限性包括：

• 它需要付费使用：这可能限制了一些用户的使用。
• 它仍在开发中：这意味着 Gemini 可能不总是能够提供准确或可靠的信息。

总体而言，Gemini 是一个强大的语言模型，具有广泛的功能和应用范围。 它仍在开发中，但它已经具有了很大的潜力。

好的以上是我用 Gemini 请它自我介绍它的回答

简单的说，这一年多来 Google 应该是感受到 Microsoft + OpenAI 强大的压力，不得不推出对应的工具来应战，简单的测试一些问题，看看两者回答上有什么落差

先声明一下，因为我没买 Gemini Advanced，所以用的是免费的 Gemini，免费版对上付费版的 ChatGPT4 可能有点不公平，加上测试只是好玩为主，之间的差距就大家自行评量吧

ChatGPT4 vs Google Gemini​

• 问题一：ChatGPT4 和 Google Gemini 谁比较厉害

ChatGPT4：

Gemini：

• 问题二：请简单介绍「老哈的量化投资笔记」这个网站

ChatGPT4：

Gemini：

• 问题三：分析图片

ChatGPT4：

Gemini： 同样一张图

结论​

就好玩为主，非常不精确的测试，但从这几题还看，Gemini 和ChatGPT4 还有不小的差距，但就如同前面说的，用免费版比付费版其实有点不公平，如果是免费 版互比的话，Gemini 就比ChatGPT 3.5 强多了，毕竟ChatGPT 3.5 连搜寻都做不到，总之Gemini 只是刚起步，再看看Google 还能不能端出什么黑科技出来吧

新建 React 专案​

现在主流大致上就是以【Create React App】 或【Vite】 来建置，这篇文章的范例是使用Vite，如果是使用Create React App 麻烦自行做对应的调整

新建测试专案 test-vite-docker，执行指令

npm create vite@latest

大家很熟的东西就不再多说

Docker 设定​

新增 Dockerfile​

在新建的 React 专案目录下新增一支 Dockerfile 档案，内容如下

FROM node:20.11-alpine as build

WORKDIR /app
COPY . /app

RUN npm install
RUN npm run build

FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx","-g","daemon off;"]

简单说明一下，这里node 用的版本是20.11.0 LTS，如果需要用别的版本请自行更换，docker image 用的都是alpline，其实我一直搞不懂差在哪里，只知道档案比较小，跑起来没什么问题就一直用下去了

docker 是使用 multi-stage builds 的语法，简单说就是将拆成两个 stage

• node stage：build react 专案
• nginx stage：将 node build 后的结果复制到 nginx，然后执行

multi-stage builds 的详细说明，可参考官方文件【Multi-stage builds】

新增 .dockerignore​

在 Dockerfile 同一个目录下增加一支 .dockerignore 档案，作用很像 git 的 .gitignore，在上传 docker 时会忽略掉这些目录和档案，内容如下，可以自行新增或减少内容

build
dist
node_modules
package-lock.json
README.md

建立 Docker Image 档案​

范例 image 名称叫做 test-vite-docker

docker build -t test-vite-docker .

建立 Docker Container 且执行​

范例 container 名称也叫 test-vite-docker，port 改成 8081

docker run --name test-vite-docker -p 8081:80 test-vite-docker

然后点选浏览器，port 用 8081 就可以看到测试网页了

解决 Nginx 配置正确处理 Router 的 history 模式​

不过 deploy 后有点问题，直接在浏览器点连结时会出现 404 (从首页的连结点击就会正常)，同时记录一下解决方法

在根目录增加一支档案 nginx.conf，内容如下：

server {
 listen 80;
 server_name localhost;
 root /usr/share/nginx/html;
 index index.html;

 location / {
 try_files $uri $uri/ /index.html;
 }
}

然后修改 Dockerfile，增加一行如下

FROM node:20.11-alpine as build

WORKDIR /app
COPY . /app

RUN npm install
RUN npm run build

FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/conf.d/default.conf # 增加这一行
EXPOSE 80
CMD ["nginx","-g","daemon off;"]

重新建立 Docker Image 档案和建立 Docker Container 且执行，问题解决

网址：https://notify-bot.line.me/zh_TW/

请先登入自己的帐号

登入后选择「个人页面」

选择「发行存取权杖(开发人员用)」

填写权杖名称和要接受的聊天室

点选「发行」后，会取得一个权杖，请 复制并储存下来

这时手机会出现「Line Notify」这个官方帐号，讯息显示已发行个人权杖，然后 请将这个帐号邀请至刚才发行权杖时的群组聊天室

测试方法 可以使用 postman 来测试

URL 输入 https://notify-api.line.me/api/notify ，方法选用「POST」，Headers 填入 Key: Authorization，Value：Bearer + 刚才的权杖，截图如下

Body 选 form-data，Key: message，Value 写要传的讯息，截图如下

成功就会看到群组收到刚才的发送讯息

GA 设定​

请先申请好GA 的评估ID，可参考GA 申请流程

然后只需要在 docusaurus.config.js 增加 gtag 的 trackingID，将刚才 GA 产生的 评估ID 填入就可以 (或者填 GTM 的 容器ID 也有一样效果)

module.exports = {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        gtag: {
          trackingID: [
            'G-<YOUR-NEW-GA4-ID>'
          ],
        },
      },
    ],
  ],
};

主色系调整​

预设的主色系为绿色 #25c2a0 ，设定在/src/css/custom.css 这一个档案中

要置换的话，可以先去挑选一个自己喜欢的颜色，可参考 色码转换器

然后到 docusaurus 的工具：Styling your site with Infima

贴上你挑的颜色后，会产生像以下的 code

:root {
  --ifm-color-primary: #6c7a69;
  --ifm-color-primary-dark: #616e5e;
  --ifm-color-primary-darker: #5c6859;
  --ifm-color-primary-darkest: #4c554a;
  --ifm-color-primary-light: #778673;
  --ifm-color-primary-lighter: #7c8c79;
  --ifm-color-primary-lightest: #8e9c8c;
}

复制后置换掉原来 /src/css/custom.css 档案内容即可

修改 i18n 预设语系为中文​

预设的语系是英文，docusaurus.config.js 的设定是

i18n: {
  defaultLocale: 'en',
  locales: ['en'],
},

如果没有网站没有多国语系的话，其实可以不用修改，但缺点是很多讯息就会是英文，

如果希望讯息也是中文的话，先执行

npm run write-translations -- --locale zh-hans

执行后会出现 /i18n/zh-hans 的目录，再来修改设定成中文就可以

i18n: {
  defaultLocale: 'zh-hans',
  locales: ['zh-hans'],
},

移除网址最后的斜线​

预设的 sitemap 产生出来的网址预设会有个斜线，个人习惯会在 docusaurus.config.js

增加一行

trailingSlash: false

可参考文件 trailingSlash

部落格侧边栏显示数目​

预设只有 5 笔，个人觉得有点少，习惯改成 10 笔，在 docusaurus.config.js 增加 blogSidebarCount 属性

export default {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        blog: {
          blogSidebarCount: 10,
        },
      },
    ],
  ],
};

可参考文件 Blog sidebar

数学公式​

docusaurus 支援 KaTeX，如果希望在页面上呈现像以下的效果

CAGR $= \large\left(\frac{FV}{PV}\right)^{\frac{1}{n}} \normalsize- 1$

就会需要先安装 remark-math、remark-math，注意一下版本，

docusaurus 3 安装

npm install --save remark-math@6 rehype-katex@7

在 docusaurus.config.js 增加以下设定，这个范例是在 /docs 下可以使用 KaTex，如果在 /blog 或 /pages 要使用也要有同样的设定

import remarkMath from 'remark-math';
import rehypeKatex from 'rehype-katex';

export default {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {
          remarkPlugins: [remarkMath],
          rehypePlugins: [rehypeKatex],
        },
      },
    ],
  ],
};

然后还要增加一段 CSS

stylesheets: [
  {
    href: 'https://cdn.jsdelivr.net/npm/katex@0.13.24/dist/katex.min.css',
    type: 'text/css',
    integrity:
      'sha384-odtC+0UGzzFL/6PNoE8rX/SPcQDXBJ+uRepguP4QkPCm2LBxH3FA3y+fKSiJ+AmM',
    crossorigin: 'anonymous',
  },
],

可参考文件 数学公式

docusaurus 2 则要安装旧版

npm install --save remark-math@3 rehype-katex@5

印象中 docusaurus.config.js 设定语法和新版有点不一样，还在使用 docusaurus 2 就麻烦自己找一下

大概就这样吧，有想到再补充

Google Analysis (简写 GA)​

什么是 GA​

简单的说就是google 提供的网站数据分析工具，网站安装GA 后可以知道有多少人来过你的网站，从什么管道找到你的网站…etc，比较需要注意的有新旧版之分，新版GA叫GA4，请记得使用新版，GA4 使用「评估ID」，格式像G-XXXXXXXXXX

使用 GA 需要在网站放一小段 javascript，有一些平台会简化这个流程，直接在设定填入 评估ID 即可

如何申请 GA​

网址：https://analytics.google.com/

建立「帐户」(已有帐户可使用旧帐户) 和「资源」

请先评估要使用旧有帐户或新建帐户，原则上同一群管理者管理的资源可用同一帐户，管理者可能不同，就用不同帐户，一个资源对应到一个网站

建立「帐户」和「资源」​

基本上就是填写基本资料，然后一直按下一步就可以，建立完成后会看到刚才建立的帐户和资源

建立「资料串流」​

在刚才建立的资源选 「资料串流」-> 「网站」 (这里的范例是网站，当然有手机的需求就是选 Android 或 iOS)

填写「网站网址」和「串流名称」

这时就可以取得 评估ID，基本上只要在网站设定好这个 评估ID，就可以在网站搜寻资讯了

如何在网站埋 GA code​

可以直接看 GA 网站上的「查看代码操作说明」教学

分为「手动安装」或「透过网站制作工具或 CMS 置入」，手动就是直接在网站写 javascript，但一般常见的平台通常都会提供简单置入 GA code 的方法，也可以见各平台的教学

Google Tag Manager (简写 GTM)​

什么是 GTM​

很多新手搞不懂什么是GTM 和GA 的差别，简单说GTM 是google 的代码管理工具，可以管理多个追踪码，像是GA 、FB pixel … etc，有了GTM 后，只需要在网站埋GTM code，之后其他的代码就可以直接在GTM 设定，不再需要动到网站程式了

网址：https://tagmanager.google.com/

到底需不需要 GTM​

同样是很多新手的疑惑，简单说，如果你的网站很单纯只有GA，其实是不需要安装GTM 的，但如果你的网站有其他行销的需求，或者想保留扩充的弹性，就还是会建议要安装GTM

这篇文章算新手入门篇，就不介绍如何安装 GTM 了…

Google Search Console (简称 GSC)​

什么是 GSC​

简单说 GSC 可以查看「google 搜寻」使用者造访网站的数据，同时藉由申请 GSC，google 搜寻引擎可以知道这边有个新网站上线，让搜寻引擎更快的建立网站索引

GSC 不需要在网站埋程式码，但必须对网站 domain 有所有权才可以设定，会在 DNS 要求认证

如何申请 GSC​

网址：https://search.google.com/search-console/

点选「新增资源」

依需求选择「网域」或「网址前置字元」，以全新网站的话，选择「网域」就可以了

新网域使用 DNS 验证，在 DNS 托管的地方加入一笔 TXT 记录，等 DNS 生效，点选验证即可

成功后大概要等个一、两天才会看到 GSC 的数据出现

提交 sitemap​

非必要，但一个新上线的网站建议提交一下 sitemap，可以加速网站被 google 搜寻引擎找到的时间

如何知道自己的网站被 google 收录了​

除了看 GSC 的数据外，还有个比较简单的方法，举例要看这个网站有多少页面被 google 收录，直接在浏览器网址打

site:tech.havocfuture.tw * (请自行替换自己的网域)

就可以看到有多少页面被收录和搜寻结果了

因为我是统计系毕业的，坦白说快被朋友问的烦死了，每一个人问就要解释一遍，加上又不好解释，决定直接写一篇文章来说明。我会尽量的减少数学公式，用白话文来说明谁对谁错

先打个预防针，虽然我是统计系毕业的，但毕业没碰统计十几年了，可能有些专用名词会用词不太精准，如果有错误也麻烦留言反应给我知道

误差范围就是 ±3% 吗？​

这个问题比较单纯：不是，误差范围会随着样本大小改变

对民调有点概念的都听过 1068 份样本，误差范围 ±3% 这个数字，我们先来看这个数字怎么来的

公式：在 95% 的信心水准下

$moe = 1.96 * \sqrt{p(1-p)/n}$

在一般情况下，p 会简化为 0.5，当 n = 1068 时，误差为 ±3%，而当 n = 3000 时，误差会降低为 ±1.79%

所以当 n (样本数) 愈大，moe (误差范围) 就会愈小

这里有一个重点叫 在 95% 的信心水准下，这关系到公式中的 1.96，不想复杂化，直接列表

一般统计会用就是 90%，95%，99% 三种信心水准，信心水准愈高，误差范围愈大

这次的蓝白合的第一个问题就是没有提到信心水准，不过以他们的数字很明显信心水准指的是 95%

误差范围 ±3% 指的是真实值和估计值的误差​

同样以民调为例，有一个真实的得票率(现在不知道，要等明年的1月13日才知道)，所以我们透过抽样预估出一个估计值，比较这个真实值和估计值用的就是这个±3% 误差范围

什么叫在95% 的信心水准下，误差范围为±3%，可以不精准的解释为假设估计值为40%，则真实值有95% 的机率会落在37% ~ 43% 之间(37% ~ 43% 称为信赖区间)，至于5% 会小于37% 或大于43% 则被我们容许，因为抽样本来就不会完全正确

为什么国民党的算法一定是错的？​

国民党的说法是假设A 是40%，B 是34%，则A 的信赖区间是37% ~ 43%， B 的信赖区间是31% ~ 37%，因为37% 同时存在两个信赖区间，所以在误差范围内

其实错误很明显

1. 这两个都是估计值，没有真实值
2. 如果要满足A - B > 6% 的话，机率远低于5%，假设为常态分布的话，A < 37% 为2.5%，B > 37% 为2.5%，同时满足还要相乘，已经不符合一开始的95% 的信心水准下的前提了

所以到底该怎么算？​

其实这次的争执国民党和民众党算法不一样，国民党比较的是「侯柯」和「柯侯」的支持度，民众党比较的是「侯柯和赖萧」和「柯侯和赖萧」的差距，但不管是哪一种，比的都是两个估计值之间的差距

先声明以下的计算都是国民党版本「侯柯」和「柯侯」的支持度，因为民众党的算法会更复杂，饶了我这个十几年没碰统计的人吧.. Orz

「侯柯 vs 柯侯」 和 「侯 vs 柯」 误差范围不同​

在开始计算之前先请大家想一下「侯柯 vs 柯侯」 和 「侯 vs 柯」，先不考虑谁比较高，大家认为哪一个差距会比较大？

这个应该很直觉「侯vs 柯」差距会比较大，其实统计已经把这个考虑进去了，「侯vs 柯」和「侯柯vs 柯侯」误差范围是不一样的，「侯vs 柯」会较大，为什么？

正确的算法应该是计算两个估计值之间的差距是否显著，我们来计算一下差距的变异数和标准差

公式：

Var(X-Y)=Var(X)+Var(Y)-2rho_{X,Y}*(Var(X)Var(Y))^0.5

其中 rho_{X,Y} 是 X,Y 的相关系数

好啦，我知道大家不想看数学公式，所以我直接把结果计算出来了，为了方便理解起见，我仍然用的是原来 1068 份样本的版本

误差范围会介于 0%~6%，重点在相关系数​

什么是相关系数？​

简单来说就是两者之间相关的程度，这个值介于-1 到1 之间，只要有raw data 的数据，是可以算的出来的，不过这次并没有公布，我们先来看几个极端值和特殊值

完全负相关，相关系数 -1​

什么叫完全负相关，简单说就是非A即B，非黑即白，如果把「侯柯vs 柯侯」印在同一张选票上，然后只能选一个，而且一定要选一个，相关系数就会是-1，做出来的结果就会是80% : 20%、55% : 45% 这样的数据

在这个前提下，误差范围就是 6%，假设柯侯大于 53%，这时侯柯一定小于 47%，我们就可以认定两者有显著差异，国民党的说法仅适用这种情况

完全正相关，相关系数 1​

什么叫完全正相关，简单说A就是B，如果把「侯柯、柯侯」印在同一张选票上，两者为复选题，投侯柯的选民都会投柯侯，投柯侯的选民也都会投侯柯， 这时侯柯和柯侯的支持度相等，误差范围为 0%

独立事件，相关系数为 0​

简单说就是投侯柯和投柯侯是独立事件，彼此完全不相关，这时的误差范围为 4.24%

所以到底是 5:1 还是 3:3​

其实把 raw data 公布出来，直接计算就知道了，我一直不懂为什么不做这个动作

不过以经验法则「侯柯、柯侯」在蓝白选民还没吵翻之前一定是高度正相关，也就是支持侯柯的人大部份都支持柯侯，同时支持柯侯的人也大部份支持侯柯 (吵翻后就不一定了)，合理估计在0.6~0.8 之间，很难低于0.5，这样的话误差范围不仅不会是6%，还会小于3%，结果就会是3:3

结论​

• 以上的计算为国民党版本「侯柯 vs 柯侯」的计算，不考虑赖萧的对比
• 这题有标准答案，但真正的结果需要 raw data 的相关系数资料
• 在假设相关系数大于0.5的前提下，结果为 3:3

再打一支预防针，我只是统计系毕业，但是十几年没碰统计的人，不是什么统计专家，如果有算错的话，批小一点，麻烦留言给我知道

然后我不相信连我都会的东西，两个政党的统计专家会不懂？请让政治归政治，不要让正在学统计和教统计的人无所适从

简单说免费信箱没了，之后一个信箱每个月要 126 台币，虽然说不算贵，但能省则省，测试成功使用 Gmail 收发个人网域的电子邮件的方法，简单做了笔记

Step 1 转址信件到 Gmail​

以下截图是 Gandi 的服务，如果网域托管在其他地方，就麻烦自行找一下

设定成功后，以后寄到 service@havocfuture.tw 的信就会被转到 havocfuture@gmail.com，但这样问题只有解决一半，信件只能收，不能寄

Step 2 DNS 设定 TXT record​

到网域托管 DNS 记录增加一笔 TXT record

v=spf1 include:_spf.google.com ~all

Step 3 Google 帐户取得应用程式密码​

申请应用程式密码：【连结】，完成后可以拿到一个密码

这个服务需要启用两阶段验证，如果你看的是「您的帐户无法使用这项设定」，代表你未启用或已停用，请先启用并完成两阶段验证

Step 4 Gmail 设定 选择寄件地址​

到 Gmail 的设定，「帐户和汇入」=>「选择寄件地址」=>「新增另一个电子邮件地址」

• 电子邮件：个人网域的 Email
• SMTP 伺服器：smtp.gmail.com
• 通讯埠：587
• 使用者名称：Gmail
• 密码：刚才拿到的应用程式密码

选择「采用 TLS 加密连线」后按下「新增帐户」送出，这时会收到一封验证信，点信中验证连结就完成了

之后在 Gmail 寄信，寄件者旁会有下接式选单，就可以选择用哪个信箱寄信了

然后为了要测试多国语系，又买了另一个网域【Toolser Net】，这时已经有点奇怪， toolser.net 和tools.havocfuture.tw 这两个网站内容其实是重复的，主要差在语系，但分别在不同网域。 更重要的原因是多国语系的SEO 一直没有玩不起来，tools.havocfuture.tw 的流量有起来，但toolser.net 一直没有起色，就兴起把tools.havocfuture.tw 移回toolser.net 网域的念头， 看看能不能将 toolser.net 这个网域权重提高一点，达到帮助提升原 Toolser Net 的 SEO 搜寻排名的目的

实测网站搬家，更换网域​

这次测试的是将 tools.havocfuture.tw 更换网域为 tw.toolser.net，网站内容完全不动，开始搬家时间为 2023/08/19

进行工作如下：

设定 301 转址​

我的网域是在 gandi 买的，gandi 的 DNS 管理介面就提供 301 转址的功能，到红框的地方，设定「永久」转址就可以

其他 DNS 管理服务应该都有类似的功能，ex: Cloudflare 的介面

可以从「规则」->「网页规则」，然后就可以设定 301 转址

如果不是用这两个介面的话，就麻烦自己找看看了...

设定 Google Search Console 变更网址​

Google Search Console 的设定中有一个「变更网址」的选项，直接去设定完成后会出现如下「这个网站目前正在迁移至 xxx」，截图如下

至于 Google Analytics 则什么事都不用做，因为 GA 看的是程式中的 GA code，不看网域，搬家前后的资料会在同样的报表中

Google Analytics 数据​

报表时间：07/23(日) ~ 09/16(六)，就是从 08/19(六) 往前和往后各加四个礼拜

这个网站之前主要的流量来源就是自然搜寻(Organic Search)，在转换前，一天约 400~500 人左右，转换后几天因为旧网站还搜寻的到，流量并没有下降， 大概在一个礼拜左右后，旧网站的搜寻结果消失，但是新的网站并没有马上接上来，所以有明显的断层， 两个礼拜后排名慢慢有回来，但并没有回到转换之前的水准，一天约 300~400 人

Google Search Console 数据​

报表时间：07/23(日) ~ 09/16(六)，就是从 08/19(六) 往前和往后各加四个礼拜，和上面一样

tools.havocfuture.tw (旧)

tw.toolser.net (新)

和GA 看到的数据大致是相同的，旧网站大致在8/25 (约一个礼拜后) 开始搜寻不到，新网站约在9/1 (约两个礼拜后) 开始拿回原来的自然搜寻排名

搜寻排名对照​

捉几个比较主要的关键字，比较一下新旧网站的排名，报表时间取两个礼拜

旧：08/06(日) ~ 08/19(六)
新：09/03(日) ~ 09/16(六)

排名其实算都回来了，只是都有不同幅度的下跌

结论​

老实说比我预期的好多了，原本估计会有一到三个月的阵痛期，结果两个礼拜就结束了， 排名下降其实也可以理解，毕竟两个主网域权重有不小的落差( havocfuture.tw 好歹也是个有稳定 5~7 万月流量的网站 )， 成功分家后，就是要努力经营两个网域了...

所以请大家继续支持搬家后的【Toolser Net 工具网】 ... XD