京東雲主機使用-搭建簡單網頁(macOS)

一、前言

在郭霖大神的帶領下,我花了一元錢入手了2個月的京東雲主機,也就是個人服務器。

這是我人生第一臺服務器,多麼值得紀念。。。。。。

入手地址在這裏

一直不買的原因也是因爲自己的Android水平沒有達標,不想去學其他方面的知識而分心。

其實很容易發現這他喵的就是一個不想學習的藉口罷了!

更容易發現這明顯是沒錢買吧!

所以趁此機會,入手了2個月服務器來嚐鮮。名額有限,說不定已經沒有了。。。

購買流程就不說了,服務器系統選擇的是Ubuntu 16.04 64位。

接下來的使用狀況都是圍繞着Ubuntu 16.04 64位展開的。

二、登錄雲主機

郭霖大神推薦了兩款軟件用於控制服務器 和 上傳下載服務器文件:Xshell和Xftp。

但是兩款軟件都是Windows系統的,沒有macOS系統。

如果你是Windows系統的,可移步郭霖大神的搭建教程,相對比較簡單。

那麼如何在macOS系統下操作服務器呢?

京東雲的幫助中心中,macOS系統的登錄方式有兩種:一種是VNC登錄,一種是SSH密鑰登錄。

VNC登錄

VNC登錄是京東云爲用戶提供的一種通過Web瀏覽器連接服務器的方式。

很簡單,就是在京東雲的控制檯點擊遠程連接即可。

接着打開了Ubuntu 16.04 64的控制檯,需要先進行登錄,用戶名爲root,密碼發送到了你的郵箱和手機當中。
登錄面板

如果想要修改密碼,可在控制檯-操作 進行修改。修改完成後記得重啓生效。

輸入完成並正確就登錄上了服務器,非常簡單。
登錄成功

不過使用VNC登錄的場景很少:

  • 查看雲服務的啓動進度

  • 無法通過其他登錄方式登錄時,才使用VNC來登錄服務器

所以這種登錄方式,體驗體驗即可,並不實用。

並且它不支持複製粘貼、不支持文件上傳,而且是單點登錄,使用起來簡直是折磨。

SSH密鑰登錄

京東雲幫助中心提供了SSH創建和登錄教程

成功設置SSH密鑰後,我們就可以不使用VNC登錄,直接在Mac的命令行就可以進行服務器的登錄。

下面我們來一步一步設置SSH密鑰:

什麼是SSH密鑰?

就我的理解而言,它是一種網絡通訊協議,主要用於計算機之間的加密登錄。

使用SSH登錄的具體流程如下:

SSH密鑰登錄

可以看出一個SSH串要提供給服務器和本機,當SSH串匹配成功後,就可以實現免密登錄。

這樣的優點就是當登錄請求被惡意攔截時,密碼也不會泄露。

接下來,我們就要生成SSH密鑰,並保存到本機和服務器。

要說一句的是,SSH密鑰登錄很多地方都有用到,比如GitHub。

如果你的電腦已經有SSH密鑰,那麼直接使用這個即可。

具體的SSH成功流程可參考GitHub官方教程

在這裏我也簡單羅列一下SSH密鑰的生成步驟:

1.校驗本機是否已經生成SSH密鑰:

ls -al ~/.ssh

如果輸出了

id_dsa.pub
id_ecdsa.pub
id_ed25519.pub
id_rsa.pub

則代表已經生成過,直接跳過第二步,執行第三步。

2.生成SSH密鑰。如果已經生成跳過。

//注意修改最後的E-mail地址
ssh-keygen -t rsa -b 4096 -C "[email protected]"

執行完成後,會讓輸入保存路徑,直接按下回車,使用默認路徑進行SSH密鑰的保存就可以。

接着會提示你輸入該SSH的密鑰密碼,可以爲空,直接回車,想設置的同學也可以進行設置。

該SSH密鑰密碼用於第一次使用SSH時的校驗,並可以在SSH密鑰的配置文件中關閉SSH密鑰密碼校驗。

更多細節大家可以自己去查閱一些資料。

3.複製SSH密鑰。

pbcopy < ~/.ssh/id_rsa.pub

使用該命令後,你的粘貼板內容就會變成SSH密鑰。

這次我們要將SSH密鑰上傳到我們自己的服務器裏。

打開京東雲的控制板,添加SSH密鑰:

京東雲添加SSH密鑰

接着點擊完成,Over。

4.測試SSH密鑰。
使用SSH密鑰登錄也非常簡單。
打開我們Mac的命令行輸入:

ssh user@xxx.xxx.xxx.xxx

user爲用戶名,我們的用戶名爲root。@之後爲IP地址,比如:

ssh root@116.196.93.148

接着會提示輸入用戶輸入服務器的登錄密碼,正確後就可以登錄成功。

如果失敗,建議按照京東雲幫助中心教程,走一遍。

三、簡單網頁搭建

我們先爲我們的服務器下載一個服務器,這裏使用郭神用的apache2。

apache2是專門用來顯示靜態網頁的服務器程序。

在登錄服務器成功後輸入下面命令:

sudo apt-get install apache2

接着輸入Y完成安裝。

之後打開瀏覽器,輸入我們服務器的IP,可以看到下面效果:

接着我們來替換這個html文件樣式。

它在我們服務器的地址是:/var/www/html/index.html

我們只要自己寫一個簡單的靜態Html文件,然後上傳服務器覆蓋掉它即可。

這裏我們直接拿着郭神的簡單html來做示範:

<!Doctype html>
<html>
  <head>
    <title>京東雲測試</title>
    <style>
      body{text-align:center}
    </style>
  </head>
  <body>
    <h1>歡迎來到郭霖的京東雲主頁</h1>
    <p>
      點擊
      <a href="http://guolin.tech">這裏</a>
      跳轉到我的博客
    </p>
  </body>
</html>

將該文件保存爲index.html。

接着我們將該文件上傳至服務器,這裏有一篇mac向服務器上傳文件的教程。非常好用。
上傳命令:

//注意將yourUsername修改爲你的mac用戶名
//並且我的文件保存在桌面Desktop。
put /Users/yourUsername/Desktop/index.html /var/www/html

按照上述步驟後,我們成功將index.html上傳至服務器並覆蓋。
刷新我們的網頁,可以看到下面效果:
效果

。。。。。。。

爲什麼顯示源碼!?

因爲Mac的記事本以.html結尾時,會將內容格式化成文本,不做代碼顯示。

解決也很簡單,這篇文章

解決後重新執行上傳代碼,重新刷新頁面,效果如下:
效果

。。。。。

這就很氣!看來自己不適合做前端啊!

簡單查閱後,在head中添加如下代碼即可:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

接着再次執行文件上傳,再次刷新頁面,效果如下:
效果

四、總結

至此,一個非常簡單的靜態網頁的個人博客便搭建完成了!

寫出這麼個靜態網頁,帶上這篇文章的完成,一共耗時2天,走的彎路沒有描述。

其中包括Linux命令行控制、SSH密鑰理解等,都是新知識,於我而言還是有很大提升的。

以後如果能用這個服務器,搭建一個動態的個人博客,想必對自己的提升是極大的!

想想還有些小激動呢!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章