2020 年 12 月 – George's blog

遠端開發 – Remote Development

最近幾天在試著尋找遠端開發的方式，主要是想用目前這台新組的pc來做主要開發機。

之所以不用vim，主要還是想先試試先前習慣的開發工具是否可以達到遠端開發的目的，而目前大概試了下面幾種比較省事的方式：

Goland + Code With Me

Code With Me 是在Goland 2020.3 新加入的plugin，主要的功用是讓目前主機的開發者與遠端參與者即時的開發同一個專案，官方也列出了幾個主要的用途：

Pair programming – collaborative editing, testing, and debugging.
Swarm programming – simultaneously coding together in the single remote IDE.
Guiding/Mentoring – inviting a guest or multiple guests to follow you, so you can show and explain the code.

另一種其它用法，就是遠端開發了；主要是在遠端主機上安裝IDE以後，並開啟Code With Me的功能，再複製完邀請連結以後，這樣我們就可以從使用目前的主機開發專案了！

大致的作法為：

(1) 先在遠端開發主機上安裝支援JetBrian的IDE與Code With Me套件。

(2) 透過遠端桌面分享的功能連到要遠端主機

(3) 開啟要分享的專案，點選專案共享的按鈕以後，並設定分享的權限。

(4) 複製一組邀請連結到目前的主機上，類似於 https://code-with-me.jetbrains.com/xxx#p=GO&fp=yyy 的連結，並在browser上開啟以後，就會導到一個IntelliJClient的頁面。

(5) 如果目前主機上沒有IntelliJClient的話，這個頁面會要求目前主機下載並安裝IntelliJClient。

(6) 若一切順利的話，我們就連到遠端主機的專案了，這時所有的開發或相關的debug 都是使用遠端主機的資源。

NOTE:

在實測過程中，安裝IntelliJClient出了點問題，JetBrain的這個頁面有提到大概的解決方式；主要的作法就是刪除之前有問題的IntelliJClient，在重新安裝一次!

以我目前的Macbook pro 為例，就是刪除下面列出的資料夾，再重新安裝一次

${home_dir}/Library/Application Support/JetBrains/IntelliJClient203.5981.98

Reference

Visual Studio Code Server

Visual Studio Code 也提供遠端開發的功能，而它的功能更為方便，只要遠端開發主機上有設定好openssh server，接著就可以透過目前主機的Visual Studio Code 作為Client，使用遠端主機的資源來開發。

大致上的作法為：

(1) 設定好遠端主機的ssh server, 並且設定好一組可以透過key pair 登入遠端的client key。

(2) 在目前主機上的Visual Studio Code 上安裝套件 Remote Development，這是微軟開發的官方套件。

(3) 在目前的Visual Studio Code 上，使用快捷鍵(cmd + shift + p) 來尋找指令 Remote SSH: Connect To Host以後，就可以連到遠端主機了。

(4) 在填寫主機資訊的過程中，可以使用常用的ssh flag 如下：
ssh -i ~/.ssh/my_key user@192.168.0.3

Code-Server

Code-Server是社群開發的另一種遠端開發模式，它基本的原理就是把整個Visual Studio Code 變成一個Web，只要有權限的使用者就可以登入這個網頁並使用Visual Studio Code。

之所以會試這第三種模式主要的原因在於，有時會想說只要帶著iPad 出門的情況下，又需要做一些基本的開發，在這種情況下，除了使用ssh + vim 的方式外，Code-Server 提供了一種新的可能性，而這個也比較接近我平常開發的習慣 -> (Editor or IDE + terminal)。

安裝方式主要是參考官方github的連結

不使用Docker安裝的原因在於，第一次安裝Docker Code-Server時遇到了些執行使用者上(@USER)的問題，所以後來還是決定就本機安裝的方式：

這邊是直接使用了Ubuntu/Debian的安裝指南

curl -fOL https://github.com/cdr/code-server/releases/download/v3.8.0/code-server_3.8.0_amd64.deb
sudo dpkg -i code-server_3.8.0_amd64.deb sudo systemctl enable --now code-server@$USER

設定要使用的登入password 與listen address，預設的設定檔會在 ~/.config/code-server/config.yaml
如果使用預設的127.0.0.1:8080的話，就只有本機可以透過http://127.0.0.1:8080連到，其它remote的機器會連不到，解決方式可以參考這裡。

Secure Remote Access

由於Code-Server在本質上是Visual Studio Code，所以在測試的過程中發現我們是可以開啟系統中的任意檔案(只要檔案權限是可以被@USER所使用的)，這可能會造成些安全上的疑慮，所以我試著將listen address綁定到VPN 界面上的ip，這樣就只有VPN user可以連接使用了。

設定 config.yaml的 bind address = 10.0.0.1:3000 (vpn 網路界面的固定ip)
設定iptables，丟棄所有從區網要連接10.0.0.1:3000的封包，這樣一來就只有連到VPN的裝置可以使用Code-Server了。

sudo iptables -A INPUT -s 192.168.3.0/24 -d 10.0.0.1 -p tcp --dport 3000 -j DROP

(取消這條route的指令：sudo iptables -D INPUT -s 192.168.3.0/24 -d 10.0.0.1 -p tcp –dport 3000 -j DROP)

Using iPad

基本上只要連到VPN以後，將browser連到http://10.0.0.1:3000就可以使用Code-Server了，不過如果是使用iPad的話，還可以使用這套軟體Servediter來連接我們的Code-Server。

Reference

Conclusion

目前看來Visual Studio Code 的遠端開發設定更為方便，而且連入遠端主機以後，如果有權限的，可以開啟任何一個路徑下的專案，這已經等於了ssh + vim 的組合了。
Code With Me 看來比較適合網路速度較穩定的環境下使用，因為要做到開發遠端主機的某個專案，可能還是得先透過Remote Desktop 的連入遠端主機做設定，再回到目前主機上開發，手續上相對麻煩許多。
如果網路不順的話，可能Remote Desktop這邊就會有不小的問題了。
如果網路穩定的狀況下，或許就可以直接使用Remote Desktop做開發了，而不需要用到Code With Me ?
如果是不能裝Visual Studio Code 與 IntelliJ Client 的情況下，我們還有Code-Server，這樣一來遠端開發的環境看來已經齊全了。

開發用電腦(X300 + 4650G)

這次在雙12時在原價屋下手了一台Asrock x300 + R4650G的主機，最近終於收到了。

Hardware Bug

趁這兩天假日開始安裝Ubuntu 20.04 Desktop，但沒想到開始遇到了些奇怪的現象；像是主機在安裝OS的過程中會自動重開機，或是在Ubuntu運作過程中，遇到了好幾次系統直接卡死(當機)…

這樣來回測了好幾次，一開始還以為買到了機王0rz

還好，在偶然間看到了mobile01上也有其它人也是遇到了類似的問題，相關的討論在Reddit上也剛好有看到。

大概結論是，在x300 + AMD 4650G上只有保證可以運行Windows 10，Asrock 團隊應該沒有測試過x300 + 4650G的組合。

Solution

初步的解決方式為：

(1) Bios 設定記憶體用3000Mhz + Ubuntu 20.04 or Ubuntu 20.10

~~(2) Bios 設定記憶體用3200Mhz + Ubuntu 20.10~~ (還是遇到了死機)

接下來再來跑個幾天來看看，系統穩定性如何!?

—————————————————–

目前看起來是記憶體設定在 3000Mhz是最穩定的

測試Cassandra

最近公司的某個專案可能會用到Cassandra，所以在真的用之前還是先來做個簡易的Benchmark，來看看它是否真的能符合我們的需求(主要是write heavey的情境)。

測試#1

測試情境

cluster nodes: AWS EC2 i3.large * 3
benchmark node: AWS EC2 c5.2xlarge.

測試 Query如下：

INSERT INTO status (id1 id2, id3, succeed) VALUES ($id1, $id2, $id3, false)

測試程式會不停的隨機產生上述Query，並寫進Cassandra cluster中，並觀察throughput如何：

測試結果

結果蠻不如預期的，目前在concurrent connection = 500的情況下，也只達到9xx左右的qps

目前初步檢視了目前的cluster 設定，發現先前的測試EC2 node主要還是使用EBS gp2，其IOPS感覺只能到100 IOPS左右，再參考了這篇AWS的文章後，感覺可以照著這樣的設定再來測試一次看看。

測試#2

測試情境

沿續上次的測試，但重新設定Cluster 使用EC2 i3.large * 3，但這次則是mount了 NVME SSD (local instance store) 到Cassandra data folder ，並使用了一樣的測試程式與Query。

測試結果

一樣不如預期，qps 也還是只能打到9xx 左右，不過這次有觀察到Cassandra node的cpu 在測試期間都滿載。

從上次的測試來看，cpu cores 必須要加大了，感覺目前是卡在cpu這邊。

測試#3

測試情境

沿續上次的測試，但重新設定Cluster 使用EC2 c5.4xlarge * 3，但這次則是mount了 NVME SSD(EBS io2) 到Cassandra data folder ，並使用了一樣的測試程式與Query。

CREATE INDEX succeed ON status (succeed);

測試結果

若沒有index 的情況下，insert qps 目前可以到 11xxx 左右；若加了index，則insert qps 目前可以到8xxx左右。

測試#4

測試情境

沿續上次的測試，但重新設定Cluster 使用EC2 c5.4xlarge * 8，但這次則是mount了 NVME SSD(EBS io2, iops=5000) 到Cassandra data folder ，並使用了一樣的測試程式與Query與測試#3中的index。

測試結果

加了index，則insert qps 目前可以到14xxx左右，這次觀察到cluster cpu 大概只有跑到50%左右，看來benchmark client 必須要升級了。

測試#5

測試情境

沿續上次的測試，這次升級了Benchmark client 使用c5a.8xlarge，測試cluster的部分則是使用前面測試所留下來的EC2 c5a.4xlarge * 8.

測試結果

這次觀察到即使在使用concurrent connection = 2000的情況下，cluster cpu 大概只有跑到70%左右，而整體的qps約在16xxx；

從這邊來看感覺又是卡在IOPS=5000的部分，目前每個cluster node 可以設定的EBS 為io2, IOPS=5000，IOPS設太高的話會在一開始無法同時開8個EC2 c5a.4xlarge。

測試#6

測試情境

沿續上次的測試，這次試著再加了3 台 c5a.4xlarge到Cassandra cluster中，即是最後的cluster node 數量為

c5a.4xlarge * 10

測試結果

這次觀察在同一台機器，並且開啟2個benchmark 程式並使用concurrent connection = 2000的情況下，cluster cpu 大概只有跑到70%左右，而整體的qps約在20xxx；

為WordPress 升級 https

申請Letsencrypt 憑證

由於這邊是使用ubuntu 20.04，所以會直接使用下面的指令來安裝certbot

sudo apt install certbot python3-certbot-nginx

接下來，再使用certbot來申請由Letsencrypt發放的憑證。

下面的指令，我們透過certbot 申請了一組wildcard certificate，其中為了證明這個網域是我們所有的，我們必須完成一組ACME挑戰!

sudo certbot certonly --preferred-challenges dns --manual  -d '*.gechen.xyz' --server https://acme-v02.api.letsencrypt.org/directory

在完執行完上述的指令以後，terminal上應該會出現一串字串，而且我們要做就是將那字串新增至DNS TXT Record，並在設定TXT Record設定完成以後，繼續certbot的申請流程。

一切順利的話，certbot 會將申請到的憑證安裝至指定的路徑下，並且有三個月的效期，三個月後我們還得再重新申請效期的延長

/etc/letsencrypt/live/gechen.xyz/

升級Wordpress以使用https

接下來要做的更改Nginx的設定檔以使用我們新申請的憑證

server {
     listen 80;
     listen [::]:80;
     server_name blog.gechen.xyz;
     rewrite ^(.*) https://$host$1 permanent;
 }

 server {
    listen 443 ssl;
    listen [::]:443 ssl;
    server_name blog.gechen.xyz;
    index  index.php; 
    root /var/www/html/wordpress; 
    ssl_certificate /etc/letsencrypt/live/gechen.xyz/fullchain.pem;  
    ssl_certificate_key /etc/letsencrypt/live/gechen.xyz/privkey.pem; 
    ssl_session_timeout 5m; 
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2; 
    # ssl_trusted_certificate /etc/letsencrypt/live/gechen.xyz/fullchain.pem;
   client_max_body_size 100M; 
    error_log /var/log/nginx/secure_ssl_error.log; 
    access_log /var/log/nginx/secure_ssl_access.log; 
    location / {
      try_files $uri $uri/ /index.php?$args; 
    } 
    location ~ \.php$ {     
        include snippets/fastcgi-php.conf;     
        fastcgi_pass unix:/run/php/php7.4-fpm.sock;     
        fastcgi_param   SCRIPT_FILENAME $document_root$fastcgi_script_name;     
        include fastcgi_params;
  }
 }

更新Wordpress的網址

這邊可以直接參考之前設定Wordpress的相關步驟來設定新的https的網址

到這邊我們就升級完成了

在Respberry Pi Ubuntu上安裝wordpress

記錄一下整個安裝的過程

安裝php與相關的套件

sudo add-apt-repository ppa:deadsnakes/ppa 
sudo apt-get update
sudo apt -y install php7.4 php7.4-fpm php-mysql

安裝 Nginx

sudo apt-get install nginx

安裝 MariaDB與設定 MariaDB

sudo apt-get install mariadb-server
sudo mysql_secure_installation

mysql -u root -h localhost -p

SET PASSWORD FOR 'root'@'localhost' = PASSWORD('MY_NEW_PASSWORD');


CREATE USER 'newuser'@'localhost' IDENTIFIED BY 'newpassword';

CREATE DATABASE wordpress;
GRANT ALL PRIVILEGES ON wordpress.* TO 'wordpress'@'localhost'
FLUSH PRIVILEGES;

安裝wordpress

wget -c http://wordpress.org/latest.tar.gz
tar -xzvf latest.tar.gz
sudo cp -R wordpress/ /var/www/html/wordpress
sudo chmod -R 775 /var/www/html/wordpress
sudo mv wp-config-sample.php wp-config.php

設定Wordpress要連接的資料庫

編輯wp-config.php 檔案以後再更新下面的資訊

// ** MySQL settings - You can get this info from your web host ** //
 /** The name of the database for WordPress */
 define( 'DB_NAME', 'the_db_name' );
 /** MySQL database username */
 define( 'DB_USER', 'the_db_user' );
 /** MySQL database password */
 define( 'DB_PASSWORD', 'db_password );
 /** MySQL hostname */
 define( 'DB_HOST', 'localhost' );

設定Nginx

在安裝好nginx以後，可以先到/etc/nginx/sites-enabled/中將預設所有目前服務的http 網站移除，然後將wordpress的設定檔 wordpress.conf 加入到/etc/nginx/conf.d/ 這個資料夾下

server {
    listen 80;
    server_name blog.gechen.xyz; 
    index  index.php; 
    root /var/www/html/wordpress; 
    client_max_body_size 100M; 
    error_log /var/log/nginx/wordpress_error.log; 
    access_log /var/log/nginx/wordpress_access.log; 
    location / {     
        try_files $uri $uri/ /index.php?$args; 
    } 
    location ~ \.php$ {     
        include snippets/fastcgi-php.conf;
        fastcgi_pass unix:/run/php/php7.4-fpm.sock;     
        fastcgi_param   
        SCRIPT_FILENAME $document_root$fastcgi_script_name;
        include fastcgi_params;
    }
 }

關閉Apache

/etc/init.d/apache2 stop

WordPress 網址

最後在設定中，還需要設定目前網站的位扯；而這個部分可以從wordpress 的管理界面中設定，或者是透過直接設定對應的DB 資料。

如果是透過DB 設定的話，則可以透過以下的SQL 來更新：

update wp_options set option_value = "http://blog.gechen.xyz" where option_name = "home" OR option_name = "siteurl";

Goland + Code With Me

NOTE:

Reference

Visual Studio Code Server

Code-Server

Secure Remote Access

Using iPad

Reference

Conclusion

Hardware Bug

Solution

測試#1

測試情境

測試結果

Next

測試#2

測試情境

測試結果

Next

測試#3

測試情境

測試結果

測試#4

測試情境

測試結果

測試#5

測試情境

測試結果

測試#6

測試情境

測試結果

申請Letsencrypt 憑證

升級Wordpress以使用https

更新Wordpress的網址

到這邊我們就升級完成了

安裝php與相關的套件

安裝 Nginx

安裝 MariaDB與設定 MariaDB

安裝wordpress

設定Wordpress要連接的資料庫

設定Nginx

關閉Apache

WordPress 網址