小狐狸事務所: 架站

顯示具有架站標籤的文章。顯示所有文章

2023年5月3日星期三

免費架站平台 Netlify (可跑 Serverless function)

最近發現一個可免費架站的平台 Netlify, 除了可佈署一般的靜態網頁外, 還能像在 AWS/Azure/GCP 上免費跑無伺服器函式 (serverless function), 官網網址如下 :

# https://www.netlify.com/

收費方案參考 :

# https://www.netlify.com/pricing/

首先註冊免費帳號, 可使用 GitHub/GitLab/Bitbucket 帳號, 也可以點底下 "sign up with email" 用 e-mail 註冊, 我習慣用 email :

填寫好帳密按 "Sign up" 即可 :

接下來是選擇網站用途, 我選 "Personal" 與 "Personal Site" :

然後是選擇佈署網站的方式, 可以從遠端源碼寄存庫 GitHub/GitLab/Bitbucket 等發布, 也可以按底下的 "Try Netlify Drop or Choose a template" 超連結以拖曳方式上傳檔案 :

先按底下超連結使用拖曳方式上傳檔案 :

# https://app.netlify.com/drop

接著我建立一個資料夾 myweb 來存放網頁, 裡面目前只有一個首頁檔 index.htm :

<!DOCTYPE html>

<html>

<head>

<title>小狐狸事務所の網路實驗室</title>

<style>

body {font-family: Arial, Helvetica, sans-serif;}

.ui-widget {font-size:90%;}

</style>

</head>

<body>

<ul>

</ul>

</div>

$(function(){

$("#tabs").tabs();

$("#logo").width($("#tabs").width());

});

</script>

</body>

</html>

將此資料夾拖曳到上面 Netlify 的上傳區即可, 完成後在左上角就會出現此網站的網址 :

此處是 https://zingy-sherbet-9f6d1d.netlify.app , 這是用預設 site name 產生的網址, 點此網址即可看到網頁效果.

但這網址也太長了吧! 可以在前面的頁面底下按 Site settings 鈕, 然後在如下頁面中按 Change site name 去更改 :

此處將 site name 改成 tony1966 :

按 Save 儲存設定后, 在 Site information 頁面中的 Site name 就變成 tony1966 了 :

連線網址就變成簡短的 https://tony1966.netlify.app 了 :

2023年2月20日星期一

Mapleboard MP510-50 測試筆記索引

由於想要利用中華電信光世代網路提供的一個固定 IP 來架設網站, 首選主機當然是已熟悉的樹莓派, 但這兩年 Pi 4B 價格狂飆, 我 2021 年幫湘雲老師架站時買 8GB 的 Pi 4B 一塊才 2800 而已, 半年後我自己想買卻已飆到 8000 多, 根本買不下去. 我只好在 2022 年 6 月於 PChome 以 2450 元購買了中鼎微系統開發的 Mapleboard, 硬體規格與 Banana Pi BPI-M5 幾乎雷同, 但它的 Flash 更大 (64GB), 而 4GB DRAM 也還 OK, 與 Pi 4B 相比可說毫不遜色.

我租了好幾年的英國 Hostinger 虛擬主機即將於今年底到期, 由於其客服已經不像以前那麼好, 到期我不打算續租, 所以去年底開始測試這塊 Mapleboard, 希望自架網站來取代它, 畢竟當初租 Hostinger 主要目的是要用來跑 PHP 而已, 自架網站的優點是自己可完全掌控. 最近陸續突破幾個關卡, 最重要的遠端桌面 RealVNC Connect 與 PPPoE 撥接上網都測試 OK, 看來可以進行架站作業了, 茲將測試紀錄做成如下索引, 方便查找 :

# 價格親民的 Linux 個人電腦 MP510-50

# Mapleboard MP510-50 測試 (一)

# Mapleboard 刷新韌體

# Mapleboard MP510-50 測試 (二) : 安裝 net-tools

# Mapleboard MP510-50 測試 (三) : 安裝 gnome-tweaks

# Mapleboard MP510-50 測試 (四) : 安裝螢幕截圖軟體 flameshot

# Mapleboard MP510-50 測試 (五) : 安裝 AnyDesk (失敗)

# Mapleboard MP510-50 測試 (六) : 安裝 TeamViewer

# Mapleboard MP510-50 測試 (七) : 安裝遠端桌面伺服器 xrdp

# Mapleboard MP510-50 測試 (八) : 安裝 RealVNC 伺服器

# Mapleboard MP510-50 測試 (九) : 用 PPPoE 撥接上網 (失敗)

# Mapleboard MP510-50 測試 (十) : 用 nmcli 設定 PPPoE 撥接上網

# Mapleboard MP510-50 測試 (十一) : 建立新 super user

# Mapleboard MP510-50 測試 (十二) : 安裝 Python 開發工具 Thonny

# Mapleboard MP510-50 測試 (十三) : 安裝 Python 套件時出現 "not on PATH" 警告問題

# Mapleboard MP510-50 測試 (十四) : 安裝常用 Python 套件

# Mapleboard MP510-50 測試 (十五) : 編譯與安裝 TA-Lib 套件

# Mapleboard MP510-50 測試 (十六) : 安裝 Nginx 伺服器

# Mapleboard MP510-50 測試 (十七) : 向 Namecheap 註冊購買網域名稱

# Mapleboard MP510-50 測試 (十八) : 註冊 Let's Encrypt 的 SSL/TLS 憑證

# Mapleboard MP510-50 測試 (十九) : 安裝 Selenium 與 Firefox WebDriver

# Mapleboard MP510-50 測試 (二十) : 安裝 Chromium WebDriver

# Mapleboard MP510-50 測試 (二十一) : Hinet 浮動制固定 IP 異動

# Mapleboard MP510-50 測試 (二十二) : 安裝 ufw 防火牆

# Mapleboard MP510-50 測試 (二十三) : 關閉 Guest 帳戶

# Mapleboard MP510-50 測試 (二十四) : 安裝 Streamlit 與 Gradio

# Mapleboard MP510-50 測試 (二十五) : 用預設站台執行應用程式

# Mapleboard MP510-50 測試 (二十六) : 用獨立站台執行應用程式 (1)

# Mapleboard MP510-50 測試 (二十七) : 用獨立站台執行應用程式 (2)

# Mapleboard MP510-50 測試 (二十八) : 用子網域執行應用程式

# Mapleboard MP510-50 測試 (二十九) : 禁止使用 IP 訪問網站

# Mapleboard MP510-50 測試 (三十) : 安裝入侵偵測監控軟體 Fail2ban

# Mapleboard MP510-50 測試 (三十一) : Fail2ban 進階設定

# Mapleboard MP510-50 測試 (三十二) : 安裝 postfix 與 mailutils

# Mapleboard MP510-50 測試 (三十三) : Postfix 郵件伺服器安全設定

# Mapleboard MP510-50 測試 (三十四) : 更改 SSH 通訊埠之埠號

# Mapleboard MP510-50 測試 (三十五) : HTTP API 函式執行平台 (1)

# Mapleboard MP510-50 測試 (三十六) : HTTP API 函式執行平台 (2)

# Mapleboard MP510-50 測試 (三十七) : HTTP API 函式執行平台 (3)

# Mapleboard MP510-50 測試 (三十八) : HTTP API 函式執行平台 (4)

# Mapleboard MP510-50 測試 (三十九) : HTTP API 函式執行平台 (5)

# Mapleboard MP510-50 測試 (四十) : 加強 Fail2ban 的 sshd 封鎖條件

# Mapleboard MP510-50 測試 (四十一) : HTTP API 函式執行平台 (6)

# Mapleboard MP510-50 測試 (四十二) : 安裝 OpenAI 與 Gemini API 套件

# Mapleboard MP510-50 測試 (四十三) : HTTP API 函式執行平台 (7)

# Mapleboard MP510-50 測試 (四十四) : 設定 PPPoE 自動撥接上網

~進行中~

2023-03-09 補充 :

我覺得遠端控制只要安裝 RealVNC Server 即可 (AnyDesk 更好, ~~可惜它尚未支援 64-bit~~, 已安裝), TeamViewer 完全不用考慮 (沒付錢幾分鐘內就會突然斷線, 說你被偵測出把免費帳戶拿來商用, 真是讓人傻眼).

2022年8月1日星期一

GitHub 個人網站設計 (二) : Bootstrap 網頁模板

昨天將月底客家語文學會講座的 GitHub 架站簡報資料寄出後, 覺得意猶未竟, 就從手邊一本旗標出版的 "一步到位 RWD 網頁程式設計" 這本書找到一個不錯的 Bootstrap 網頁範例修改為網頁模板, 只要填入自己的資料就可以製作出美美的個人網站了.

這個範例是該書第 12 章的 "日光美食部落格", 風格清爽大方, 也適合做個人網站 :

這網頁右上方的搜尋其實只是版面設計而已, 一般是要到後台資料庫搜尋本站內容, 但 GitHub 只能架設靜態網站, 為了保留整個版面設計, 我參考下面這篇文章將其改為 Google 搜尋 :

# Creating a Google search box using HTML form

事實上只需要在 form 標籤內添加如下三個屬性即可 :

action="http://www.google.com/search" method="get" target="_blank"

我將原範例網頁中的特定內容去除, 加以一般化後成為如下之網頁範本 :

# Bootstrap 網頁範本 1

<!DOCTYPE html>

<html>

<head>

<title>您的網站標題</title>

</head>

<body>

<a class="navbar-brand" href="#" style="color:white">您的網站名稱</a>

</button>

</div>

</ul>

</div>

</form>

</div>

</nav>

<h1>您的網站名稱</h1>

<p class="lead">您的網站簡介</p>

</div>

</header>

<hr>

<h3>您的文章段落1標題</h3>

<hr>

<h3>您的文章段落2標題</h3>

<hr>

<h3>您的文章段落3標題</h3>

<hr>

<nav>

</ul>

</nav>

</div>

</article>

<aside>

<h3>您的短文側邊框標題</h3>

</div>

<p>您的短文側邊框內容</p>

</div>

<h3>您的連結清單側邊框標題</h3>

</div>

<li><a href="#您的連結網頁1">您的連結名稱1</a></li>

<li><a href="#您的連結網頁2">您的連結名稱2</a></li>

<li><a href="#您的連結網頁3">您的連結名稱3</a></li>

<li><a href="#您的連結網頁4">您的連結名稱4</a></li>

</ol>

</div>

</aside>

</div>

<hr>

</div>

</footer>

</body>

</html>

可見此網頁架構是將 Bottstrap 的左邊 8 格作為主要內容區, 右邊 3 格作為側邊欄, 外帶 1 格 offset. 側邊欄使用 Panel 框, 此模板中只用了 pannel-danger 與 panel-warning, 總共有下列 5 種, 會套用不同的背景色 :

pannel-primary : 藍色
pannel-success : 咖啡色
pannel-info : 淡藍色
pannel-warning : 黃色
pannel-danger : 紅色

只要將此網頁中以 "您的..." 開頭的部分用自己的資料代替, 其餘都不要動, 首頁取名 index.htm, 其餘網頁都複製此首頁模板去改, 就可以建立美美的個人網站了.

瀏覽網頁 :

# https://yaohuang1966.github.io/bootstrap_template_1.htm

導覽列的網站名稱也可以換成一個 icon 圖, 只要準備一個 30*30 的圖檔上傳到 GitHub (此處是放在 images 目錄下), 然後將導覽列最前面的網站名稱替換為圖檔即可 :

</a>

原始碼如下 :

# Bootstrap 網頁範本 2 (導覽列的小圖示)

瀏覽網頁 :

# https://yaohuang1966.github.io/bootstrap_template_2.htm

如果導覽列上的頁籤有同類性質, 例如連結其他網站的 Facebook 或 Twitter, PTT 等可收納在一個 "社群網站" 的下拉式頁籤中以節省導覽列的空間, 作法參考下面這篇文章的範例 7 :

# Bootstrap 4 學習筆記 (八) : 導覽頁籤

與一般頁籤單純為 li 標籤內包 a 標籤不同之處是, 它的 li 元素要添加 dropdown 樣式, a 元素要添加 dropdown-toggle 樣式與 data-togle 屬性, 然後後面加一組樣式為 dropdown-menu 的 ul-li 清單選項組, 用來放被收納的頁籤, 這些書籤若有需要也可以用樣式為 divider 的 li 標籤區隔, 具體作法如下 :

<label>您的下拉式頁籤1</label>

</a>

<li><a href="#您的下拉式頁籤網頁1">您的下拉式頁籤網頁1</a></li>

<li><a href="#您的下拉式頁籤網頁1">您的下拉式頁籤網頁2</a></li>

<li><a href="#您的下拉式頁籤網頁1">您的下拉式頁籤網頁3</a></li>

</ul>

</li>

將上面網頁碼添加到模板 1 中的導覽列成為如下之模板 3 :

# Bootstrap 網頁範本 3 (下拉式頁籤)

瀏覽網頁 :

# https://yaohuang1966.github.io/bootstrap_template_3.htm

結果如下 :

如果需要多個下拉式頁籤, 只要複製貼上再修改即可.

上面的範本中首頁底下有 "上一頁" 與 "下一頁" 兩個按鈕來循序切換文章頁面, 也可以改用分頁導覽列 (pagination bar), 這樣就不需要逐頁切換, 可以直接跳頁了. 分頁導覽列如下 :

<nav>

</ul>

</nav>

用這組 nav 去替換上面三個模板中的 "上一頁" 與 "下一頁" nav 即得如下模板 4 :

# Bootstrap 網頁範本 4 (分頁導覽列)

瀏覽網頁 :

# https://yaohuang1966.github.io/bootstrap_template_4.htm

結果如下 :

因為是靜態網頁, 所以每一頁的分頁導覽列都必須手動調整各頁網址.

如果不需要側邊欄, 可以將 <aside> 與 </aside> 的部分拿掉, 然後將 <article> 底下的容器樣式從 col-sm-8 改為 col-sm-12 即可, 下面是從模板 3 改成的模板 5 :

# Bootstrap 網頁範本 5 (取消側邊欄)

瀏覽網頁 :

# https://yaohuang1966.github.io/bootstrap_template_5.htm

如果網頁內容有表格之類很寬的資料時會穿過側邊欄, 使得版面很奇怪, 這時用模板 5 這種無側邊欄的結構就很適合. 通常會在首頁中配置側邊欄, 而網站中其他資料網頁就不放側邊欄.

2021年8月10日星期二

樹莓派架站 (十四) : 修改網站位址

前天在鄉下用 Pi 3 以 pppoeconf 撥接程式測試上網連線成功後, 確認利用中華電信 ADSL/光世代的浮動制固定 IP 架設網站確實可行, 作法參考前一篇 :

# 樹莓派架站 (十三) : 使用 PPPoE 固定 IP 帳號撥接上網

今晚將 Pi 4 帶去湘雲老師家如法炮製, 可正常撥接連線上網, 順利取得所申請的固定 IP. 然後開啟瀏覽器連線該固定 IP 即可看到樹莓派上的 WordPress 網站, 但發現整個網站版面並不正常 :

這是因為 WordPress 一般設定中的 site_url 網址還是 127.0.0.1 (local host) 的緣故, 這使得 WordPress 的 CSS 樣式檔無法載入瀏覽器, 自然就無法正常排版 :

所以 pppoeconf 撥接沒問題後, 下一步應該是先用 VNC 進入樹莓派, 利用其 Chromium 瀏覽器開啟 127.0.0.1/wp-admin 網頁, 登入 WordPress 後台管理的 "設定/一般" 頁面, 然後將 "WordPress 位址" 與 "網站位址" 這兩個欄位從原先的 "http://127.0.0.1/" 改為我們所申請的固定 IP :

儲存設定後再次瀏覽網站就可看到正常排版的 WordPress 網頁了 :

可見這樣連圖片都能正常顯示了 (之前用 ngrok 測試時發現圖片無法顯示). 哇! 斷斷續續忙了兩個月, 終於搞定這項任務. 雖然花了很多時間, 但在探索過程中也學習到很多東西, 例如對 WordPress 網站管也較熟悉了, 也對樹莓派的網路設定知識做了一番統整.

從這項任務我也發現, 如果要架設個人或小型工作室網站, 但又不想每個月花 3000~5000 租雲端虛擬主機, 那麼只要花個 3000 元左右買台樹莓派 Pi 4, 再利用中華電信 ADSL/光世代提供的浮動制固定 IP 網址功能即可以辦到了.

參考 :

# WordPress 網址異動、後台網址輸入錯誤資料庫修正方法

# 如何修改、更換WordPress網址？

# Wordpress網站更改網址產生的問題

# Image links are broken after uploading wordpress site from localhost to live server by using filezilla

# CM On Demand Search And Replace

2021年8月9日星期一

樹莓派架站 (十三) : 使用 PPPoE 固定 IP 帳號撥接上網

由於 Pi 4 帶去學校接上網路後仍然無法利用 VNC 遠端連線, 開機數次也是不行, 可能網路設定資訊哪裡有問題, 除非到現場接上螢幕與鍵鼠組檢查, 否則也無法找出原因, 所以上周請老張申請好中華電信 ADSL/光世代固定 IP, 準備將樹莓派伺服器裝在家裡, 只要透過 PPPoE 撥接上網, 就可以透過此固定 IP 存取網站, 遠端也可以利用 SSH 或 VNC 進行維護, 具體方法參考 :

# Raspberry Pi 的基礎 - 直接連線 ADSL 或光纖撥接上網

此文提出兩種方式讓樹莓派撥接上網, 其實只要用第一個方法安裝 pppoeconf 這個套件就可以了, 簡單又方便. 以下是週日晚上我用鄉下家的 Pi 3 所做的實驗記錄, 確認此法有效可行. 本系列前一篇文章參考 :

# 樹莓派架站 (十二) : 申請中華電信 ADSL/光世代固定 IP

首先要在樹莓派上做好無頭存取準備, 首先點工作列上方的 WiFi 圖示設定連線到手機無線基地台 (勾選記憶密碼), 這樣就會將此基地台連線資訊 (SSID 與密碼) 紀錄到 /etc/wpa_supplicant/wpa_supplicant.conf 這個設定檔內, 樹莓派重開機後就會自動連線手機基地台, 方便透過手機基地台上網的筆電遠端控制樹莓派. 其次在 "偏好設定/Raspberry Pi 設定/介面" 中開啟 SSH 與 VNC 功能.

然後準備一條網路線將樹莓派連接到中華電信 ADSL/光世代後面的 RJ45 網路插槽, 開機後從手機基地台查詢樹莓派的 IP, 然後用 Putty 以 SSH 連線樹莓派 (也可以用 VNC), 在命令列中安裝設定 pppoeconf 套件 :

1. 安裝 PPPoE 撥接上網程式 :

在命令列用如下指令安裝 pppoeconf 套件 :

sudo apt-get -y install pppoeconf

pi@raspberrypi:~ $ sudo apt-get -y install pppoeconf

正在讀取套件清單... 完成

正在重建相依關係

正在讀取狀態資料... 完成

下列的額外套件將被安裝：

libpcap0.8 ppp

建議套件：

xdialog

下列【新】套件將會被安裝：

libpcap0.8 ppp pppoeconf

升級 0 個，新安裝 3 個，移除 0 個，有 399 個未被升級。

需要下載 474 kB 的套件檔。

此操作完成之後，會多佔用 1,405 kB 的磁碟空間。

下載:1 http://mirror.ossplanet.net/raspbian/raspbian stretch/main armhf libpcap0.8 armhf 1.8.1-3 [123 kB]

下載:2 http://mirror.ossplanet.net/raspbian/raspbian stretch/main armhf ppp armhf 2.4.7-1+4+deb9u1 [311 kB]

下載:3 http://mirror.ossplanet.net/raspbian/raspbian stretch/main armhf pppoeconf all 1.21 [40.3 kB]

取得 474 kB 用了 3s (149 kB/s)

選取了原先未選的套件 libpcap0.8:armhf。

（讀取資料庫 ... 目前共安裝了 142695 個檔案和目錄。）

Preparing to unpack .../libpcap0.8_1.8.1-3_armhf.deb ...

Unpacking libpcap0.8:armhf (1.8.1-3) ...

選取了原先未選的套件 ppp。

Preparing to unpack .../ppp_2.4.7-1+4+deb9u1_armhf.deb ...

Unpacking ppp (2.4.7-1+4+deb9u1) ...

選取了原先未選的套件 pppoeconf。

Preparing to unpack .../pppoeconf_1.21_all.deb ...

Unpacking pppoeconf (1.21) ...

Processing triggers for mime-support (3.60) ...

Processing triggers for desktop-file-utils (0.23-1) ...

Processing triggers for libc-bin (2.24-11+deb9u3) ...

Processing triggers for systemd (232-25+deb9u6) ...

Processing triggers for man-db (2.7.6.1-2) ...

Processing triggers for gnome-menus (3.13.3-9) ...

設定 libpcap0.8:armhf (1.8.1-3) ...

設定 ppp (2.4.7-1+4+deb9u1) ...

Created symlink /etc/systemd/system/multi-user.target.wants/pppd-dns.service → /lib/systemd/system/pppd-dns.service.

設定 pppoeconf (1.21) ...

Processing triggers for libc-bin (2.24-11+deb9u3) ...

Processing triggers for systemd (232-25+deb9u6) ...

pi@raspberrypi:~ $

2. 設定 pppoeconf 撥接參數 :

以下列指令設定撥接參數 :

sudo pppoeconf

pi@raspberrypi:~ $ sudo pppoeconf

執行後會出現一系列設定視窗, 大部分只要用預設值即可, 以下都按 "是" :

此頁預設按 "確定" :

接著兩頁是輸入中華電信 ADSL/光世代撥接帳號與密碼, 也是唯二要設定的地方. 注意, 帳號不包含 "HN", 只要輸入 HN 後面的數字加上 @ip.hinet.net 即可, 例如 12345678@ip.hinet.net, 帳密若忘記可撥 0800080412 詢問客服 :

接下來只要按 "是" 與 "確定" 就可以了 :

設定完成後即撥接上網了, 可用 inconfig 檢視連線資訊 :

Plugin rp-pppoe.so loaded.

pi@raspberrypi:~ $ ifconfig

可見多了一個 ppp0 連線, 其中的 Inet 欄位正是我申請的固定 IP, 用瀏覽器連線此網址可看到我在這台 Pi 3 上用 Nginx 架設的實驗網站 :

用 SSH 連線此固定網址也 OK :

參考 :

# 在樹莓派 Raspbian Stretch 上安裝 Nginx 伺服器

# 【心得】路由器/分享器的UDP通過防火牆設定(中華電信ZyXEL

# 從外網以 SSH 存取樹莓派的方法

# Raspberry Pi 的基礎 - 直接連線 ADSL 或光纖撥接上網

2021年7月28日星期三

樹莓派架站 (十二) : 申請中華電信 ADSL/光世代固定 IP

由於湘雲老師要八月底才回學校, 所以想利用這段時間試看看讓網站用光世代連上 Internet. 中華電信 ADSL/光世代雖然是浮動 IP, 但提供用戶線上設定一個固定 IP + 7 個浮動 IP, 這對於有裝設上網型 VCR 監視器的用戶來說非常方便, 在監視器上設定用固定 IP 撥接帳號以 PPoE 方式撥接上網後即可在遠端連線此 IP 而存取監視器畫面, 當然也可利用此 IP 來連線網站伺服器.

申請中華電信一個固定 IP 的網頁如下 :

# https://www.cht.com.tw/home/consumer/member/fttxservice

點選 "Hinet 非固定制固定 IP" 按鈕 :

按 "馬上登入" 鈕登入 Hinet 帳號 :

輸入會員帳號 (HN 不要打, 只要輸入 HN 後面的數字即可) 與密碼, 按 "登入" 鈕 :

我鄉下家的設定範例 (非實際) 如下 :

老張家的設定範例 (非實際) 結果頁面如下, 底下多了 PPoE 撥接方式的提醒 :

亦即在使用 PPoE 撥接時, 固定 IP 登入帳號需為 xxxxxxxx@ip.hinet.net, 這個很重要, 如果是將固定 IP 綁定到 VCR 監視器, 也是要用此帳號 (但一戶只能有一台設備使用此固定 IP 帳號).

參考:

# 如何申請中華電信Hinet浮動IP轉固定IP？

# 由外網連上以非固制固定ip架設的網站 (@ 1.34..xx.xx), 要如何連上內網(192.168.1.xxx)用其他電腦(譬如 Raspberry Pi)架設的網站?

# 用樹莓派自製 VPN 翻牆機

2021年7月17日星期六

樹莓派架站 (十一) : 設定固定 IP 的方法

上週將 Pi 4 交給湘雲老師帶回學校, 用網路線連接到研究室網路 RJ45 插槽後開機, 我在遠端用 VNC Cloud 卻怎麼也無法與 Pi 4 連線. 經與圖資的劉老師請教, 原來學校的網路環境是有特別規劃的, 聯網主機必須指定 IP, gatway, mask, 以及 DNS server 等網址設定才可以連到學校網路, 我對網路底層一知半解, 以為像家裡一樣直接接上網路線就能讓 Pi 4 上 Internet, 實在太天真了.

我之前在學習樹莓派時也做過固定 IP 的設定測試, 作法有兩種,例如下面這篇是透過 /etc/network/interface 這個檔案設定固定的無線網路 IP, 但在新版 Raspbian 已不管用了 :

# 設定樹莓派區網固定 IP

下面這篇是新的做法, 是透過 /etc/dhcpcd.conf 這個檔來設定無線網路之固定 IP :

# 樹莓派 Wifi 固定 IP 的新作法

所以之前都是在設定無線網路, 那固定網路該怎麼做呢? 我查詢了一些網路上的作法, 發現只要將 wlan0 改成 eth0 應該就可以, 參考 :

1. Raspberry Pi學習筆記（十一）：幫樹莓派建立固定IP

2. 將樹莓派 (Raspberry Pi) 的 eth0 / wlan0 網路介面設定固定 IP

3. 1.4 有線或無線的DHCP 設定或固定IP設定

4. How to set up a personal web server with a Raspberry Pi

5. [基礎] 命令列設置無線網路

6. 樹苺派的固定IP設定及網路設定說明

綜合上面的資料, 可知設定固網 IP 基本上有兩種做法 :

1. 使用 /etc/network/interfaces.d/eth0 檔 :

也可以直接使用 /etc/network/interface, 但這個檔案的預設內容為 :

source-directory /etc/network/interfaces.d

亦即此網路介面檔預設會從 /etc/network/interfaces.d 這目錄匯入底下的設定檔, 所以就沒有必要直接將網路設定資訊寫在這裡, 而是寫在此目錄下的檔案中, 例如固網就用 eth0 這檔名, 用 nano 編輯如下內容, 然後存成 eth0 檔案 :

auto eth0

iface eth0 inet static

address 192.168.2.193

netmask 255.255.255.0

gateway 192.168.2.1

dns-nameservers 168.95.1.1 8.8.8.8

此處 address 就是我要的固定 IP=192.168.2.193, 網路遮罩 netmask=255.255.255.0 表示最後一個 byte 為主機位址, 預設閘道 gateway=192.168.2.1 為我家基地台的 IP, 而 dns-server 所列兩個網址是 Google 的 DNS 伺服器網址. 網路遮罩可以在樹莓派聯網情況下用 ifconfig 查得; 而預設閘道則可用 route -ne 指令查得, 參考 :

# HOW TO SET UP A STATIC IP ON THE RASPBERRY PI

pi@raspberrypi:~ $ route -ne

Kernel IP routing table

Destination Gateway Genmask Flags MSS Window irtt Iface

0.0.0.0 192.168.2.1 0.0.0.0 UG 0 0 0 eth0

192.168.2.0 0.0.0.0 255.255.255.0 U 0 0 0 eth0

也可以用 Windows 的 ipconfig 指令查詢 :

將上面的 /etc/network/interfaces.d/eth0 存檔後檢視內容如下 :

pi@raspberrypi:~ $ cat /etc/network/interfaces.d/eth0

auto eth0

iface eth0 inet static

address 192.168.2.193

netmask 255.255.255.0

gateway 192.168.2.1

dns-nameservers 168.95.1.1 8.8.8.8

然後下 sudo reboot 重開機, 果然順利取得固定 IP :

2. 使用 /etc/dhcpcd.conf 檔 :

為了確定這種方式可行, 不受上面第一種方法干擾, 所以先將上面的 /etc/network/interfaces.d/eth0 這個檔備份到 pi 目錄下保存然後刪除 :

pi@raspberrypi:~ $ sudo mv /etc/network/interfaces.d/eth0 eth0

pi@raspberrypi:~ $ cat /etc/network/interfaces.d/eth0

cat: /etc/network/interfaces.d/eth0: 沒有此一檔案或目錄

確定檔案已刪除後, 將系統預設的 /etc/dhcpcd.conf 複製到根目錄下保存 :

pi@raspberrypi:~ $ sudo cp /etc/dhcpcd.conf Downloads/dhcpcd.conf

然後編輯一個 dhcpcd.conf 檔, 內容如下 :

interface eth0

static ip_address=192.168.2.193/24

static routers=192.168.2.1

static domain_name_servers=168.95.1.1 8.8.8.8

pi@raspberrypi:~ $ nano dhcpcd.conf

然後將其複製到 /etc 下覆蓋同名檔案 :

pi@raspberrypi:~ $ sudo mv dhcpcd.conf /etc/dhcpcd.conf

pi@raspberrypi:~ $ cat /etc/dhcpcd.conf

interface eth0

static ip_address=192.168.2.193/255.255.255.0

static routers=192.168.2.1

static domain_name_servers=168.95.1.1 8.8.8.8

確定內容無誤後重開機 :

pi@raspberrypi:~ $ sudo reboot

結果亦可成功取得指定之固定 IP 並連上 Internet :

pi@raspberrypi:~ $ ifconfig

eth0: flags=4163<UP,BROADCAST,RUNNING,MULTICAST> mtu 1500

inet 192.168.2.193 netmask 255.255.255.0 broadcast 192.168.2.255

inet6 fe00::ba27:ebff:fe60:2e70 prefixlen 64 scopeid 0x20<link>

ether b8:07:e0:63:20:7b txqueuelen 1000 (Ethernet)

RX packets 678 bytes 88315 (86.2 KiB)

RX errors 0 dropped 0 overruns 0 frame 0

TX packets 595 bytes 288638 (281.8 KiB)

TX errors 0 dropped 0 overruns 0 carrier 0 collisions 0

2021-07-18 補充 :

檢查鄉下的 Pi 3 網路設定, 採用的是第二種方法 (/etc/dhcpcd.conf), 內容如下 :

pi@raspberrypi:~ $ cat /etc/dhcpcd.conf

interface wlan0

static ip_address=192.168.2.192

static routers=192.168.2.2

static domain_name_servers=192.168.2.2

而無線網路上網設定檔則是放在 /etc/wpa_supplicant/wpa_supplicant.conf 中, 內容為 :

pi@raspberrypi:~ $ cat /etc/wpa_supplicant/wpa_supplicant.conf

ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev

update_config=1

country=TW

network={

ssid="TonyNote8"

psk="a123456"

key_mgmt=WPA-PSK

}

network={

ssid="EDIMAX-tony"

psk="a123456"

key_mgmt=WPA-PSK

}

network={

ssid="EDIMAX-meinung"

psk="a123456"

key_mgmt=WPA-PSK

}

總結來說, 新的 Raspbian 映像檔燒錄好後先不要拔除讀卡機, 先準備一個空白的 ssh 檔案與含有如下內容的 wpa_supplicant.conf 檔 (ssid 與 psk 要改成自己的基地台帳密), 複製到燒錄好映象檔的 boot 碟下 :

ctrl_interface=DIR=/var/run/wpa_supplicant GROUP=netdev

update_config=1

country=TW

network={

ssid="TonyNote8"

psk="a123456"

}

注意, 這個放在 root 碟下的 wpa_supplicant.conf 在開機後會被複製到 /etc/wpa_supplicant/wpa_supplicant.conf 這個檔.

這樣在開機後樹莓派就會自動連上指定的基地台, 因為 Raspbian 預設已開啟 ssh 功能, 因此就可以用 Putty 連線樹莓派 (預設帳號 pi, 密碼 raspberry) 進行無頭存取, 即樹莓派開機前不需接螢幕與鍵鼠組, 直接用 PC 遠端存取, 用 ifconfig 取得樹莓派區網 IP 後, 就可以用 VNC viewer (local) 從 PC 連線樹莓派進行遠端桌面存取. 進入遠端桌面後首先開啟瀏覽器登入 VNC cloud 帳號, 並為這台樹莓派取一個容易辨識的名稱, 這樣以後就可以用 VNC viewer (cloud) 從外網遠端存取樹莓派了.

如果要讓樹莓派取得固定 IP, 就可以用本篇的兩個方法設定, 例如用 dhcpcd.conf 設定的話, 可以編輯 /etc/dhcpcd.conf 加入如下內容 :

interface eth0

static ip_address=192.168.2.193/255.255.255.0

static routers=192.168.2.2

static domain_name_servers=168.95.1.1 8.8.8.8

interface wlan0

static ip_address=192.168.2.193/255.255.255.0

static routers=192.168.2.2

static domain_name_servers=168.95.1.1 8.8.8.8

這樣樹莓派不論是用有線還是無線方式上網都能獲得指定之固定 IP 了, 方便區網存取或做伺服器時用 (避免系統重啟後 IP 跑掉).

以上補充說明總結樹莓派從燒錄映像檔到無頭存取的網路設定, 以及透過 VNC Cloud 進行外網遠端存取的過程, 作為以後裝機的參考.

2021年7月3日星期六

樹莓派架站 (十) : 移植 WordPress 資料庫

上周露天買的 Pi 4 裝機完畢後, 原本想將上次在 Pi 3 上安裝好的整片 Micro SD 卡拿下來製作映像檔, 然後燒錄到 Pi 要用的新卡上面, 這種作法雖然方便, 但由於無法保證燒錄成功 (雖然都是 32 GB 的卡, 實際上可能會差幾十個 Byte, 只要目的卡片較小就會燒錄失敗), 所以決定照之前在 Pi 3 做的過程重新來一遍, 但不是全部, 主要是下面三篇 :

# 樹莓派架站 (一) : 燒錄 Raspbian 作業系統 (Buster)

# 樹莓派架站 (二) : 安裝 Apache 2 + PHP + MariaDB

# 樹莓派架站 (三) : 安裝 WordPress

1. 安裝 LAMP :

重新安裝作業系統與 LAMP 堆疊還有個重要目的 : 測試上回在 Pi 3 備份的資料庫是否能完美地在 Pi 4 上回復.

首先是根據第一篇筆記下載最新的 Raspbian 映像檔後將其燒入到空白的 Micro SD 卡內, 然後將純文字空白檔案 ssh 與含有開機連線無線基地台的設定檔 wpa_supplicant.conf 複製到 boot 碟根目錄下, 就可以將 Micro SD 卡取出裝進 Pi 4 內 (圖案朝下), 連接鍵鼠組與 HDMI 螢幕, 開機後就能自動連線到指定的 WiFi 基地台了. 上回沒有成功是因為我把 wpa_supplicant.conf 檔名誤打成 wpa_applicant.conf, 真是烏龍.

做完開機設定後就按照第二篇程序安裝 Apache + PHP + Apache, 只要依序輸入下面八個 sudo 指令以及 MariaDB 的 SQL 指令即可 :

pi@raspberrypi:~ $ sudo apt-get install apache2

pi@raspberrypi:~ $ sudo chown -R pi:www-data /var/www/html/

pi@raspberrypi:~ $ sudo chmod -R 770 /var/www/html/

pi@raspberrypi:~ $ sudo apt install php php-mbstring

pi@raspberrypi:~ $ sudo apt -y install mariadb-server mariadb-client

pi@raspberrypi:~ $ sudo mysql_secure_installation (設定資料庫密碼, 輸入 5 個 y)

pi@raspberrypi:~ $ sudo mysql -u root

MariaDB [(none)]> UPDATE mysql.user SET plugin = 'mysql_native_password' WHERE User = 'root';

MariaDB [(none)]> GRANT ALL PRIVILEGES ON mydb.* TO 'pi'@'localhost' IDENTIFIED BY 'mysql';

MariaDB [(none)]> FLUSH PRIVILEGES;

MariaDB [(none)]> QUIT;

pi@raspberrypi:~ $ sudo apt-get install phpmyadmin

最後編輯 Apache 2 設定檔, 在最底下加入 phpMyAdmin 的 Apache 設定檔即可 :

pi@raspberrypi:~ $ sudo nano /etc/apache2/apache2.conf

在最底下加入後存檔 :

Include /etc/phpmyadmin/apache.conf

最後重啟 Apache2 伺服器即完成了 :

pi@raspberrypi:~ $ sudo /etc/init.d/apache2 restart

為了接下來匯入要回復的資料庫檔 wordpress.sql 以及後續 WordPress 上傳方便, 需更改 PHP 的設定檔 php.ini, 將預設的上傳限制 2 MB 放寬為 20 MB :

pi@raspberrypi:~ $ cd /etc/php/7.3/apache2

pi@raspberrypi:~ $ sudo nano php.ini

按 Ctrl+W 搜尋 upload_max_filesize 與 post_max_size, 將這兩個參數都改為 20MB 後存檔.

2. 安裝 WordPress :

接下來就可以進行 WordPress 安裝了, 雖然可以將原先 Pi 3 上的網站根目錄 (/var/www/html) 整個壓縮後複製到 Pi 4 上, 但因為已過了一個月, WordPress 已有新版釋出, 而且我想要測試看看是否只要移動上傳目錄 /var/www/html/wp-content/uploads 就可以移植完成, 所以還是照第三篇的程序下載 wordpress 解壓縮後放到 Aapche2 的網站根目錄下, 指令集如下 :

pi@raspberrypi:~ $ cd /var/www/html

pi@raspberrypi:/var/www/html $ sudo wget http://wordpress.org/latest.tar.gz

pi@raspberrypi:/var/www/html $ sudo tar xzf latest.tar.gz

pi@raspberrypi:/var/www/html $ sudo mv wordpress/* .

pi@raspberrypi:/var/www/html $ sudo rm -rf wordpress latest.tar.gz

pi@raspberrypi:/var/www/html $ sudo usermod -a -G www-data pi

pi@raspberrypi:/var/www/html $ sudo chown -R -f www-data:www-data /var/www/html

3. 匯入 WordPress 備份資料庫 :

接著要在 MariaDB 中建立一個名為 wordpress 資料庫, 才能匯入所備份的資料庫, 同時新建一個資料庫管理帳號 :

pi@raspberrypi:/var/www/html $ sudo mysql -u root -p

MariaDB [(none)]> create database wordpress; (建立 wordpress 資料庫)

MariaDB [(none)]> CREATE USER '新帳號'@'localhost' IDENTIFIED BY '新密碼';

MariaDB [(none)]> GRANT ALL ON wordpress.* TO '新帳號'@'localhost';

MariaDB [(none)]> FLUSH PRIVILEGES; (更新權限表)

MariaDB [(none)]> quit

這樣便建好一個空白資料庫 wordpress, 接下來要用 phpMyAdmin 來將 WordPress 的資料庫備份檔匯入這個空白資料庫中, 連線下列網址進入 phpMyAdmin :

http://127.0.0.1/phpmyadmin

輸入 MariaDB 帳密登入後選取 wordpress 資料庫, 切換到 Import 頁籤, 選取資料庫檔案 wordpress.sql (我使用 Dropbox 傳檔, 但也可以用 WinSCP ) 後按底下的 Go 鈕即可 :

資料庫匯入完成後就可進行 WordPress 安裝了, 開啟瀏覽器連線 127.0.0.1 :

設定 WordPress 後台管理密碼按 Install 鈕即可 :

4. 設定 WordPress :

接下來是進入 WordPress 後台進行基本設定, 參考第四篇 :

# 樹莓派架站 (四) : WordPress 網站基本設定

主要有三 :

安裝 Gillian 布景主題
安裝 WP-statistics 外掛
安裝 WP-ngrok 外掛

第四篇中其他設定都不用做, 因為那都已在匯入的資料庫中了.

Gillian 布景也可以下載後再上傳安裝, 參考 :

# https://wordpress.org/themes/gillian/

5. 複製上傳資料 :

雖然資料庫已匯入成功, 瀏覽 127.0.0.1 也可以順利看到網站中的文章與頁面內容, 但網頁標題圖檔卻未顯示, 且 pdf 檔案超連結也顯示檔案不存在, 原因是這些上傳到媒體庫的檔案都放在網站根目錄下的 wp-content/uploads 子目錄, 必須連同這些都移植到新系統才行.

首先到 Pi 3 的 Apache2 網站下壓縮 uploads 子目錄下的全部檔案 :

pi@raspberrypi:/var/www/html/wp-content $ cd uploads

pi@raspberrypi:/var/www/html/wp-content/uploads $ du -sh (檢視全部資料大小)

38M .

pi@raspberrypi:/var/www/html/wp-content/uploads $ cd ..

pi@raspberrypi:/var/www/html/wp-content $ zip -r uploads.zip uploads

可見上傳到媒體庫的全部檔案總共是 32MB, 將其壓縮為 uploads.zip 檔後用 WinSCP 或 DropBox 傳到 Pi 4 主機下, 解壓縮後移動目錄覆蓋掉目前還是空的 uploads 子目錄 :

pi@raspberrypi:~/Downloads $ unzip uploads.zip

pi@raspberrypi:~/Downloads $ ls -ls

總計 38808

4 drwxrwxrwx 3 pi pi 4096 5月 30 19:38 uploads (解壓後的子目錄)

34976 -rw-r--r-- 1 pi pi 35813747 7月 2 21:45 uploads.zip

3828 -rw-r--r-- 1 pi pi 3919791 6月 29 11:51 wordpress.sql

pi@raspberrypi:~/Downloads $ sudo mv uploads /var/www/html/wp-content/uploads

此指令是將解壓縮後的 uploads 目錄移動到網頁根目錄的 wp-content 子目錄下覆蓋掉空白的 uploads, 這樣網站標題圖檔以及 pdf 超連結等資源都會顯示了.

6. 安裝酷音輸入法 :

此外還要安裝酷音輸入法, 因為有時還是需要直接在 Pi 4 的瀏覽器中輸入中文,參考第三篇的 4 這部分 :

# 樹莓派架站 (三) : 安裝 WordPress

安裝完後要重啟系統才會生效 :

pi@raspberrypi: $ sudo apt-get install scim-chewing

pi@raspberrypi:~ $sudo reboot

重啟後還要進入 "偏好設定/SCIM 輸入法框架" 進行中英文切換鍵設定, 完畢也是要重啟才有效.

做完上面這些就完成整個系統移植作業了, 最後是下載執行 ngrok 以取得一個外部網址來讓湘雲老師連線網站檢視看看 (我自己檢查是完全一樣的內容, 超連結都正常), 參考下面這篇 :

# WordPress 網站無法使用 ngrok 連線的問題

注意, 執行 ngrok 轉址之前必須執行自己的授權碼 (token) 獲得 Free 使用身分, 這台 Pi 4 我使用 Gmail 帳號註冊取得授權碼 (註冊完就會顯示) :

注意, 未執行授權碼將有使用時限, 大約兩小時就會 timeout, 故若要長期使用務必做這動作 (這授權碼要記下來, 以後在新的機器上要做測試時可重用, 忘記的話也可登入 ngrok 查詢) :

pi@raspberrypi:~/Downloads $ ./ngrok authtoken 1uo824epcGaOLmjKX5Z0YRWtrgy_1BtHiHGavYbTBrLMcA4Ts

uthtoken saved to configuration file: /home/pi/.ngrok2/ngrok.yml

pi@raspberrypi:~/Downloads $ ./ngrok http -host-header=localhost 80

以 ngrok 產生的網址從外網測試 OK, 拖了一個禮拜終於搞定 WordPress 移植到 Pi 4 的作業, 確認原先的設想是正確的, Bingo! 終於完工啦!

訂閱：文章 ( Atom )

小狐狸事務所

2023年5月3日星期三

免費架站平台 Netlify (可跑 Serverless function)

2023年2月20日星期一

Mapleboard MP510-50 測試筆記索引

2022年8月1日星期一

GitHub 個人網站設計 (二) : Bootstrap 網頁模板

2021年8月10日星期二

樹莓派架站 (十四) : 修改網站位址

2021年8月9日星期一

樹莓派架站 (十三) : 使用 PPPoE 固定 IP 帳號撥接上網

2021年7月28日星期三

樹莓派架站 (十二) : 申請中華電信 ADSL/光世代固定 IP

2021年7月17日星期六

樹莓派架站 (十一) : 設定固定 IP 的方法

2021年7月3日星期六

樹莓派架站 (十) : 移植 WordPress 資料庫

文章標籤

常用連結

2023年5月3日 星期三

2023年2月20日 星期一

2022年8月1日 星期一

2021年8月10日 星期二

2021年8月9日 星期一

2021年7月28日 星期三

2021年7月17日 星期六

2021年7月3日 星期六

2023年5月3日星期三

2023年2月20日星期一

2022年8月1日星期一

2021年8月10日星期二

2021年8月9日星期一

2021年7月28日星期三

2021年7月17日星期六

2021年7月3日星期六