以初學者的角度,來看待電腦教學這回事。

分類: 網際網路相關 Page 2 of 4

免費的靜態HTML網站空間

不曉得你有沒有在找「免費」的靜態網站空間?

市面上「免費」且「持久」的網站空間真的非常稀少,而且想要掛上自己的Domain名稱,更是難上加難,都是要錢的,這不是廢話嗎?不要錢的話,誰要讓你放?

不過倒是有個Google的服務,有提供免費額度供大家使用,佛心來著,雖然免費的額度可能之後會調整甚至取消,畢竟Google目前許多服務,原本也說不用錢,但最後也都要開始收錢了。

但先用再說,目前只要你的網站是「靜態HTML網頁」,以及「流量不高」的話,就可以免費一直用下去,但其實就算你網站真的流量很高,價格也是不貴,畢竟我們也是希望自己的網站是「人氣網站」,而不是「乏人問津」的網站吧,這也正是良性的循環。

這個服務是「Firebase」的「Hosting」,目前免費的額度的「容量」是「10GB」,而「流量」是「360MB/天」、「10GB/月」,可以參考這個表格「Firebase Pricing」。

10GB的容量是大的誇張,頂多用沒多少MB吧,然後一個月流量最高可用「10GB」,真的也有夠多了,像一些公司形象網站,就非常適合放在這邊,速度快,又幾乎是免費使用。

缺點,也算是有,就是想要上傳網站資料,並不如上傳到FTP簡單,稍微麻煩了點,電腦白痴的話肯定是不行的,因為所有動作,都要在「命令列」指令的方式來完成。

到底有多麻煩,我們開始來看一下,我這邊以Windows環境來做示範。(但其實沒那麼可怕,我本來以為很麻煩,但操作過整個流程下來,發現其實很容易)

安裝Node.js和Firebase CLI

首先,要開始使用Firebase的命令列指令,要先安裝「Node.js」,下載可以到Node.js官方網站,如下:

 

直接下載Windows x64版本的即可,安裝時,就下一步、下一步安裝完即可,沒有任何困難,完成後,並且「重新開機」,接著打開「命令提示字元」,輸入指令「npm –version」,如下圖:

輸入指令之後,有跑出版本號碼,才算是有安裝完成,如果沒有安裝或者失敗的話,會出現「npm不是內部或外部命令可執行的程式或批次檔」。接著就要安裝Firebase的工具程式。

輸入「npm install -g firebase-tools」並按下〔Enter〕,如下圖:

接著等待幾分鐘的時間,安裝完成後如下圖:

以上,整個準備動作算是完成了,接著就要開始來設定。

firebase login

接下來這個動作,如果你還有其它電腦也要使用Firebase工具程式的話,每一部電腦都要執行firebase login來登入一次。

首先,輸入指令「firebase login」後,會出現「Allow firebase to collect CLI usage and error reporting information?」,詢問是否允許firebase收集你的使用資訊、錯誤報告,這邊按Y或n都沒關係,按自己的想法即可。

接著會用網頁的方式,跳出登入畫面,請輸入你的Google帳戶來登入Firebase服務,如下圖:

登入成功後,即可關閉網頁,如下圖:

回到命令列模式,會有成功的訊息,如下圖:

創建Firebase專案

打開Firebase的後台,並點擊「新增專案」,如下圖:

接著在輸入「專案名稱」時很重要,如果之後你想要使用firebase預設的子網址,就要想一個「世界唯一」的名稱。

你在輸入時,專案名稱下方會自動產生唯一的id名稱,如果你輸入的名稱有人使用過的話,這個id名後方,就會被加入一串英數文字,例如我輸入「example」這個常見的單字,所以我的id名就會變成「example-992bf」,所以我的網站完成網址,就會變成「example-992bf.web.app」。但如果你有準備自己的網域名稱,那這個id無論變多複雜,都沒有關係,反正最後還是以你準備的網域為主。

好,回到輸入專案名稱的地方,輸入一個名稱後,再按下〔繼續〕,如下圖:

接著會結合Google Analytics分析,如果不需要的話,就取消「啟用這項專案的Google Analytics(分析)功能」,最後再點擊〔建立專案〕,如下圖:

經過一小段的處理時間,新專案就會產生完成。

firebase init

接著這個步驟,我們就要把網站檔案,上傳至剛才產生出來的專案,首先,先準備好網站檔案,我這邊從「bootstrap」下載了一個範例網頁,如下圖:

接著回到命令提示字元,先切換到要上傳的資料夾路徑裡,如我目前的路徑c:\web,進入資料夾後,輸入「firebase init」,接著開始會一出現一連串的問題,如下圖:

看的懂簡單的英文的話,就沒什麼問題。You are currently outside your home directory,這句話說你現在是在專案目錄外,這個後面你就會懂的。

Are you ready to proceed?(Y/n)

請按下「Y」。

Which Firebase features do you want to set up for this directory?

由於Firebase tools的功能,並不是只用來上傳網站資料,所以接下來請使用〔方向鍵(上、下)〕移動,再按〔空白鍵〕勾選,最後按〔Enter〕決定。

請選擇「Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys」,如下圖:

Please select an option

選擇 「Use an existing project」,如下圖:

接著選擇剛才我們所建立的專案名稱,這邊是叫「example-992bf」,如下圖:

What do you want to use as your public directory? (public)

請直接按下〔Enter〕,選擇預設的「public」公開即可。

Configure as a single-page app (rewrite all urls to /index.html)? (y/N)

要不要把專案設定成單一頁面的網站?我這邊的例子是按下「y」,如果你的網站是有多頁面的,就按下「N」。

Set up automatic builds and deploys with GitHub?(y/N)

由於我沒有使用GitHub,所以這邊我按下「N」,如下圖:

最後回到命令提示字元,就代表專案已經設定完成。

你回到原本的資料夾看一下,Firebase會產生幾個檔案,和一個「public」資料夾,然後其餘的檔案資料夾,是我們原本的網頁檔案,請把這些檔案、資料夾給「剪下」,如下圖:

然後來到「public」資料夾裡,這裡就是讓我們放網站檔案的地方,裡面預設有一個index.html檔案,你可以直接把它刪除,然後貼上剛才剪下來的檔案。

所以根目錄就只剩下Firebase產生出來檔案,如下圖:

 

以上這個firebase init的設定,每個專案都要操作設定一次,操作這些步驟的目的,其實就是要產生這些設定檔而已。

因此,如果你有把檔案複製到其它電腦上,這個動作就可以不用再做一次,像我都是用Google雲端硬碟同步資料到多部電腦上,所以這個動作,我只要在其中一部電腦上做一次即可。

firebase deploy

接著就是最重要的「發佈」的上傳動作,在該專案的目錄底下,輸入「firebase deploy」,就會開始上傳,如下圖:

上傳之後,會告訴你的網站網址,直接開啟網站,就可以順利打開網站,如下圖:

同時,我們也可以到Firebase後台的「Hosting」服務頁面,如下圖:

在這個Hosting後台的「用量」頁面,就可以看到目前網站的使用量,從這邊可以看到有沒有使用超過免費的額度。

其實firebase所提供的網址已經夠用,但如果你想要使用自己所購買的網域,我另外開一篇文章,示範一次給大家看一下。

使用SFTP登入GCP的VM執行個體

延續「如何架出安全性較高的網站?」一文,除了有SSH登入的問題之外,另外就是使用FTP的問題,這個算是另一個門檻,少了FTP程式的上傳/下載資料功能,我們每次在丟東西上去Server時,真的會變的麻煩許多。

但我們也不是要再額外架一部FTP Server,因為多一個服務,多開一些Port,也就代表多一份風險,所以我們是要利用SSH這個Port,來進行檔案的傳送與接收,也就是Secure FTP。

我們要使用的軟體,和FTP軟體一樣,都是使用最常用的「FileZilla」,只是設定略為不同而已。

下載 FileZilla

FileZilla站台管理員的設定

下載之後的設定也很簡單,如下圖:

「協定」:選擇「SFTP – SSH File Transfer Protocol」
「主機」:填入IP位址
「登入型式」:選擇「金鑰檔案」
「使用者」:填入和SSH登入時的帳戶名稱
「金鑰檔案」:利用旁邊的〔瀏覽〕來選擇所產生的private key檔案。

比較要注意的是「金鑰檔案」的設定,你在放置金鑰檔案時,最好放在C槽底下,一個「英文」名稱的資料夾內,然後無論是「金鑰檔案」還是「資料夾」,名稱都「不要有中文」、「不要有空白字元」,也就是讓路徑保持簡單,因為我一開始在設定時,發現一直沒辦法用,後來好像是名稱改過之後才正常。

GCP VM執行個體使用PuTTY SSH登入教學

在「如何架出安全性較高的網站?」一文中,我有介紹了一門Udemy的非常讚的架站教學課程「The Perfect Nginx Server – Ubuntu Edition」,在這門課程中,因為作者和我們使用的平台,會有略為不同,所以這部份的門檻,就要靠自己去跨越。

使用SSH登入VPS

這個是第一個門檻,因為作者所示範的VPS環境是「Vultr」,但我使用的是「GCP」,所以首先就要解決使用SSH登入VPS的問題,當然不是說Vultr不好,但如果受眾是台灣人的網站或服務,網站還是架在當地,連接的速度真的差很多,像Vultr的主機,離我們最近的是韓國、日本、新加坡,所以其實也都不怎麼合適。

但你還是可以當成練習來使用,作者也都有提供100美元(好像)的試用額度,

而我為什麼選擇GCP,因為他是Google,而且場地在彰化,最重要的是,大家都跳電斷網時,他們不會跳電,網路也不會中斷。

在GCP的虛擬機器管理頁面中,我們可以透過瀏覽器來開啟SSH連線,如下圖:

這樣雖然可以,但連線的方式太慢,這適合用在最終無法連進虛擬機器時的解決方式,而我們平常最理想的連接方式,還是使用「PuTTY」這個小工具程式來連線,連接速度才快。

現在在網站上找到的相關資訊,因為GCP一直在改版,所以這些文章其實都有點不適用了,不僅畫面不同,連能不能跟著做操作完都有問題。

所以現在2022年,我針對目前可以成功的方式,重新講解一次要怎麼做。

首先,先去下載「PuTTY」,在「PuTTY下載」頁面中,根據自己的作業系統平台,點擊該項目,例如我是使用Windows 11,我就點「64-bit x86」這個。

MSI (‘Windows Installer’) 64-bit x86 – putty-64bit-0.76-installer.msi

下載後再把它安裝好。

PuTTY Key Generator

首先,我們會先使用PuTTY Key Generator,也就是「PtTTYgen」這個工具,來產生金鑰檔案,如下圖:

Step 1. 開啟程式之後,是長這樣,維持預設值之後,請直接點擊〔Generate〕,如下圖:

在產生的這段時間,請使用滑鼠游標在程式視窗範圍內移動,程式應該是利用滑鼠移動的位置,來當做亂數的種子,所以你不動滑鼠的話,是沒辦法運算完的。整個產生的時間大約1、2秒鐘而已,要視自己電腦的配備而定。

Step 2. 產生完了之後,畫面是長這個樣子,如下圖:

Step 3. 在這個畫面中,我們要修正「Key comment」這個資訊,請修改成你使用GCP的帳戶名稱,例如我是用我的Google帳號「changyang319@gmail.com」來使用GCP服務,所以我的「key comment」就是輸入「changyang319@gmail.com」,如下圖:

Step 4. 輸入完畢後,請點擊〔Save private key〕,並在警告對話盒「Are you sure you want to save this key without a passphrase to protect it ?」中點擊〔是〕,然後找個位置存放這個private key的金鑰檔案,如下圖:

Step 5. 最後,把最上方「Key」裡的public key內容,整個複製下來,這個內容有點長,要確實的圈選整段內容,如下圖:

這個Public Key,我們會在下一段內容用到。

Google Cloud Platform (GCP)後台

Step 1. 來到管理後台,請切換到你的「VM執行個體」頁面,並點擊你想要登入的「執行個體」,以我這邊來說,我是想要設定「instance-uwsgi」這部vm,如下圖:

※ 請注意到這個VM項目後方的「外部IP」資訊,這項資訊會在下一段用到。

Step 2. 請確定VM在「停止」的狀態之下,再點擊上方的「編輯」,如下圖:

(這張圖下方的狀態是「執行中」,這樣是不行的,必需是已停止才可以,因為我實在懶的再抓圖了…)

Step 3. 拉動卷軸,移到「安全殼層金鑰」的部份,點擊「+新增項目」,如下圖:

Step 4. 接著在這邊貼上在上一段所複製的Public金鑰,如下圖:

貼上之後,再移至最下方,並點擊〔儲存〕。

儲存完成後,再來到「安全殼層金鑰」來看,就可以看到有一個以你Email名稱的鍵值在這邊,如下圖:

做到這邊,就代表已經完成GCP的設定。請複製好前面提到的「外部IP」位址,我們會在下一段用到。

PuTTY

最後,就要來做個總結了,打開「PuTTY」連線程式,並在左方的「Category」中,點選「Connection \ SSH \ Auth」,並在下方的「Private key file for authentication」中,選取你使用PuTTYgen產生出來的金鑰,並存下來的private key檔案位置,如下圖:

接著點擊「Category」中的「Session」,在「Host Name」中,填入「user_name@外部IP」,以我的例子來說,就是「changyang319@35.194.202.101」,如下圖:

都填好之後,你可以在「Saved Sessions」填入一個名稱,然後點擊右方的〔Save〕,來把設定值存起來,像我就存了一個叫「gcp_uwsgi」的設定檔。

最後點擊下方的〔Open〕,初次打開時,會出現「PuTTY Security Alert」的對話盒,請點擊〔Accept〕,如下圖:

如果設定成功的話,就會直接連接進入GCP的VM裡,如下圖:

整個流程就大概是這樣。

Page 2 of 4

Powered by WordPress & Theme by Anders Norén