2020/05 Cola Daily Build

Daily Build
#1

05/04

  • debug web at mac osx & 免插線

    • ios，setting app → Safari → Advances
      啟用 web inspector

      640×1136 55.3 KB

    • osx，打開 safari -> Preferences → Advanced
      啟用 Show Develop menu in menu bar

      1764×1136 291 KB

    • 第一次連接手機與電腦必須使用實體連結線，插上線後可以在 develop menu 裡看見你的行動裝置，這時候在 ios 用 safari 打開網頁，就能在 osx 點擊你想 debug 的頁面了

    • 如果不想使用連接線…
      勾選 Develop → <Your device name> → Connect via Network
      之後就可以透過網路 debug 了
      ps:

  • 電腦與手機需在同個 wifi 網路下
  • 網路不順暢的情況下，debug 訊息會延遲
    image
    image2484×578 162 KB

source: https://apple.stackexchange.com/questions/333873/wirelessly-debug-safari-web-app-running-on-ios-using-safari-on-macos

#2

05/04

#3

05/05

#4

05/06

  • article: cache, css, AA Accessibility Approval
#5

phpWrapper

for mac osx user

使用 docker 時，如果讓容器內 php 曝露，使其本機 php 版本與容器內相同

首先~

php 7 容器建立方式略過，請參考任一方法

確認 php 容器啟行中

docker-compose ps
# 或 
docker ps

建立 phpWrapper (bash)

內容為

#!/bin/bash

docker run --rm -i \
    -v ~/Projects:/var/www \
    cscolabear/7.2-fpm php "$@"

替換上述值，對應你自己的系統:

  • ~/Projects，本機的專案目錄
  • /var/www， 容器內的專案目錄
  • cscolabear/7.2-fpm，你的 php docker image 名稱

接著將 phpWrapper 設定為可執行

chmod +x phpWrapper

試著在同目錄下執行

./phpWrapper -v

取得 docker 容器內的 php 版號

preview:

image
image2072×470 188 KB

接著讓全系統都能使用這個方法~

# 切換目錄至 
cd /usr/local/bin/

# 查看目前的 php 使用路徑
ll | grep php

# 若己存在，可以先備份或是刪除

# 新設定 php 並指向 phpWrapper 所在目錄
ln -s /Users/cola/DockerDev/phpWrapper php

# 查看是否連結成功
php -v

preview:

image
image2340×808 346 KB

之後在另何情況下 php 都會使用 docker 容器內的版本

如果 docker 容器未啟用，系統將自動使用原生~

#6

05/07

  • assist teammate

  • extract docker dev out Projects

  • create react app

    • npm run start，可以在指令集內變更 port
"start": "PORT=3006 react-scripts start",
  • 另外可以安裝 npm watch 設定監聽變更，但是效率、編譯較差，所以還是建議用 run start，監聽效率最好

可以用 nginx 反向代理的方式指向這個 npm server
以下為 nginx conf 範例

server {
    server_name local.react;

    listen 80;
    listen 443 ssl http2;

    access_log /var/log/local.react-access.log;
    error_log /var/log/local.react-error.log;

    location / {
        proxy_pass http://WORKSPACE:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}
#7

05/08

  • assist teammate
  • local docker dev refactor
  • Elasticsearch & docker study
#8

05/09

elastics search

setup docker

真心建議用 docker 安裝，編譯什麼的太累了 QQ

兩個 servcie: elastics search, kibana 視覺化 dashboard

配合 https://github.com/cscolabear/docker-dev
`docker-compose.yml

.
.
.
ELASTICSEARCH:
    hostname: docker-es
    build:
      context: ./Dockerfiles/elasticsearch
    image: cscolabear/elasticsearch:latest
    environment:
      - node.name=es01
      - 'discovery.type=single-node'
      - cluster.name=es-docker-cluster
      - bootstrap.memory_lock=true
      - 'http.host=0.0.0.0'
      - 'transport.host=127.0.0.1'
      - 'ES_JAVA_OPTS=-Xms512m -Xmx512m'
      # - 'ES_JAVA_OPTS=-Xms128m -Xmx128m'
      - 'xpack.security.enabled=false'
      - 'ACCESS_TOKEN=e-D9WyQzxfRbpdFvFdhQ'
    ports:
      - '9200:9200'
      - '9300:9300'
    volumes:
      - ./Database/elasticsearch/index:/usr/share/elasticsearch/data:delegated
      - ./Dockerfiles/elasticsearch/custom-dict.txt:/usr/share/elasticsearch/config/analysis-ik/custom/custom-dict.dic:ro
      - ./Dockerfiles/elasticsearch/synonym.txt:/usr/share/elasticsearch/config/analysis/synonym.txt:ro
    deploy:
      restart_policy:
        condition: on-failure
    networks:
      app_net:
        ipv4_address: 172.16.1.90

  KIBANA:
    image: kibana:7.6.2
    hostname: docker-kibana
    environment:
      SERVER_NAME: kibana-server
      ELASTICSEARCH_URL: http://127.0.0.1:9200
    depends_on:
      - ELASTICSEARCH
    ports:
      - "5601:5601"
    restart: on-failure
    networks:
      app_net:
        ipv4_address: 172.16.1.100

設定 elasticsearch 為 7.6.2，加裝 plugin: analysis-ik 中文斷字詞與 analysis-ik 繁體 config

ps: elasticsearch 大版號都是 break change，注意教學文與版本

dockerfiles

FROM elasticsearch:7.6.2



RUN ./bin/elasticsearch-plugin install -b https://github.com/medcl/elasticsearch-analysis-ik/releases/download/v7.6.2/elasticsearch-analysis-ik-7.6.2.zip

RUN curl -fsSL 'https://github.com/sunghau/elasticsearch-analysis-ik-config-traditional-chinese/archive/master.zip' -o ik-tc.zip \
    && unzip ik-tc.zip \
    && rm ik-tc.zip \
    && mkdir -p /usr/share/elasticsearch/config/ik-tc \
    && mv elasticsearch-analysis-ik-config-traditional-chinese-master/config/ik/* /usr/share/elasticsearch/config/ik-tc \
    && rm -rf elasticsearch-analysis-ik-config-traditional-chinese-master \
    && mv /usr/share/elasticsearch/config/analysis-ik /usr/share/elasticsearch/config/analysis-ik-sc \
    && mv /usr/share/elasticsearch/config/ik-tc /usr/share/elasticsearch/config/analysis-ik


RUN rm -rf /tmp/*

USER elasticsearch

自行設定上例中的
custom-dict.txt // 斷詞表
synonym.txt // 同義表

(詳細內容後補)

ps:
自然搜尋，比較重要的是斷詞、分詞、同義字詞

上面的例子選用 IK 分詞，另有 結巴分詞可選
IK: https://github.com/medcl/elasticsearch-analysis-ik
Jieba: https://github.com/sing1ee/elasticsearch-jieba-plugin

Q & A

Q. 為何無法更新己存在的 index 設定? (需要重建)

https://www.elastic.co/blog/changing-mapping-with-zero-downtime

Q. elastics search rest api 列表

https://www.elastic.co/guide/en/elasticsearch/reference/current/rest-apis.html

ref.

https://github.com/jimliu7434/Diary/issues/22

https://medium.com/cw-itgroup/elasticsearch-中文同義詞與自動完成-693410e68b0a

https://www.twblogs.net/a/5c879670bd9eee35fc1459ab

https://whchi.github.io/posts/setup-elasticsearch-synonym/

https://kevintsengtw.blogspot.com/2018/07/docker-compose-elasticsearch-kibana.html

斷詞來源可參考或直接用 ik 提供(初期可以不更新，如果要效果好就需要花點心力)

analysis-ik-config-traditional-chinese 繁中支援 config

簡體中文 斷字詞

#9

05/11

  • 完 elasticsearch 繁中 config
  • meet friends
  • js fix header
#10

05/12

05/13

  • fix header
  • fix css cross browser
  • algolia.com test
    • algolia 與 elasticsearch 因(繁體中文)解析器關係 elasticsearch 的表現較好
    • algolia 在未設定斷字、詞前表現更糟
#11

05/14

  • blog why-you-need-password-meaning-in-the-world
  • code pen
#12

05/15

看到這個

https://www.foxnews.com/politics/even-trump-campaigns-404-page-is-a-brutal-swing-at-biden

順手弄了這個 :laughing:

image
image2536×1580 1010 KB

1個讚
#13

什麼挖溝:face_with_raised_eyebrow:

#14

05/18

  • mailchimp
  • update resume
#15

05/19


test webpack boilerplate

#16

05/20

#17

05/21

05/22

  • studay cutaway
  • drone

example.

  drone-server:
    image: drone/drone:1
    ports:
      - 8081:80
    volumes:
      - ./Database/drone:/data
    restart: always
    environment:
      - DRONE_LOGS_PRETTY=true
      - DRONE_LO0GS_COLOR=true
      - DRONE_SERVER_HOST=${DRONE_SERVER_HOST}
      - DRONE_SERVER_PROTO=${DRONE_SERVER_PROTO}
      - DRONE_RPC_SECRET=${DRONE_RPC_SECRET}

      # GitHub Config
      - DRONE_GITHUB_SERVER=https://github.com
      - DRONE_GITHUB_CLIENT_ID=${DRONE_GITHUB_CLIENT_ID}
      - DRONE_GITHUB_CLIENT_SECRET=${DRONE_GITHUB_CLIENT_SECRET}

  # runner for docker version
  drone-runner:
    image: drone/drone-runner-docker:1
    restart: always
    depends_on:
      - drone-server
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock
    environment:
      - DRONE_RPC_HOST=${DRONE_RPC_HOST}
      - DRONE_RPC_PROTO=${DRONE_RPC_PROTO}
      - DRONE_RPC_SECRET=${DRONE_RPC_SECRET}
      - DRONE_RUNNER_CAPACITY=2
#18

05/25

nginx rewrite

https://workxplay.net/blog/wp-content/uploads/2015/07/orange-candle.jpg
to
https://workxplay.net/wp-content/uploads/2015/07/orange-candle.jpg

location ~ ^/blog/wp-content/uploads/(.*) {
    rewrite ^/blog/(.*)$ /$1 break;
}

empty log file

> file-name
#19

05/26

  • update resume
  • wordpress, nginx update

nginx
url rewrite to /dist
and add index.html when empty filename

location ~ ^/resume/(.*) {
        if (-f $request_filename) {
                rewrite ^/resume/(.*)$ /resume/dist/index.html break;
        }
        rewrite ^/resume/(.*)$ /resume/dist/$1 break;
    }
#20

05/27

ngonx load balancer

upstream myapp1 {
    ip_hash;
    server test.domain.com;
    server nodejs.com:3000;
    server nodejs.com:3001 weight=3;

    server nodejs.com:3009 down;
}

加上 ip_hash 讓同一位使用者指到同台機器上，避免 session 問題

  • round-robin：標準(預設)輪詢方式
  • least-connected：當連線進來時會把 Request 導向連線數較少的 Server
  • ip-hash：依據 Client IP 來分配到不同台 Server

以上三種模式也都可以自行設定權重(weight)，讓效能較好的 Server 吃比較更多的負載。

server suffix info

  • down 暫時不參與負載
  • weight 數字越大，負載的權重就越大。
  • max_fails 允許失敗的預設次數，超過時，回傳 proxy_next_upstream 模組定義錯誤
  • fail_timeout 失敗N次失敗後，暫停的時間。
  • backup 備援機，在其他 server 忙碌或 down 才會動用

ref.

docker drone behind nginx

domain: local.drone

DRONE_SERVER_HOST=local.drone
DRONE_SERVER_PROTO=https

docker-compose nginx

.
.
    networks:
      app_net:
        aliases:
          - local.drone

  drone-server:
    image: drone/drone:1
    ports:
      - 8081:80
    volumes:
      - ./Database/drone:/data
    restart: always
    environment:
      - DRONE_LOGS_PRETTY=true
      - DRONE_LO0GS_COLOR=true
      - DRONE_SERVER_HOST=${DRONE_SERVER_HOST}
      - DRONE_SERVER_PROTO=${DRONE_SERVER_PROTO}
      - DRONE_RPC_SECRET=${DRONE_RPC_SECRET}

      # GitHub Config
      - DRONE_GITHUB_SERVER=https://github.com
      - DRONE_GITHUB_CLIENT_ID=${DRONE_GITHUB_CLIENT_ID}
      - DRONE_GITHUB_CLIENT_SECRET=${DRONE_GITHUB_CLIENT_SECRET}
    networks:
      - app_net

  # runner for docker version
  drone-runner:
    image: drone/drone-runner-docker:1
    restart: always
    depends_on:
      - drone-server
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock
    environment:
      - DRONE_RPC_HOST=${DRONE_RPC_HOST}
      - DRONE_RPC_PROTO=${DRONE_RPC_PROTO}
      - DRONE_RPC_SECRET=${DRONE_RPC_SECRET}
      - DRONE_RUNNER_CAPACITY=2
      - DRONE_RUNNER_NETWORKS=app_net
    networks:
      - app_net

ngrok 指向本機 domain

./ngrok http -host-header=my-local-domain.local 80

雖然畫面上會顯示，指向到 localhost:80
不過還是有正常導入 local domain