天天看點

新手建站就用這個方法,無需購買伺服器10分鐘快速部署你的靜态網頁

阿裡雲雲開發平台重磅推出開源應用中心,聚合最熱門的開源應用,讓你像安裝app一樣快速上線一個網站。面向新人和持續活躍的開發者使用者推出上線激勵加油包,最高100元無門檻代金券免費送,現在體驗還能夠領取年輕人的養生神器,桌面不鏽鋼保溫杯!

聚合最熱門的開源應用

開源應用中心聚合了目前最熱門的前端開源應用模版,讓大家真正可以做到像安裝APP一樣來上線一個網站。目前已經支援最熱門的前端架構,包括Vue.js、React、Nuxt.js、Next.js、AntDesign等,還有内容管理平台Hexo、Docusaurus、VuePress、Sapper等。使用部署開源模版非常适合您的以下場景:

  • 個人學習:輕松建立個人首頁、部落格等網站,邊部署邊學習。
  • 協同開發:建立資訊管理系統、CMS等前端項目,多人協同維護開發。

雲開發平台同樣面向廣大的開源作者征集應用,對于熱門的應用我們能夠提供現金激勵、以及流量曝光等扶持。

開源應用一鍵同步一鍵部署

阿裡雲雲開發平台前端應用部署功能旨在為前端開發者改善工作環境,優化前端開發和部署體驗。同時還可以結合雲開發平台雲原生的架構能力和主機應用的部署能力,讓前後端應用能夠更高效地協同。

  • 操作簡單:無需購買伺服器、配環境、手動上傳檔案等,雲開發平台都可以幫你自動操作,包括在需要時随時一鍵上線/下線。
  • 使用零成本: 支援GitHub和雲效的Codeup倉庫,快速将倉庫的代碼進行建構部署。
  • 免費資源扶持: 免費提供臨時的測試域名,對于新使用者和持續活躍的使用者提供免費的雲資源加油包。
  • 無數量限制: 沒有使用的repo數量和應用數量的限制, 不管是開源倉庫還是自己賬戶下的repo,每一個代碼repo都可以部署為一個靜态網站。

簡單幾步使用雲開發平台上線靜态應用

1. 賬号準備工作

  • 你需要一個阿裡雲賬号,并使用阿裡雲賬号登入雲開發平台 ( https://workbench.aliyun.com/ ),按照提示建立團隊,點選同意協定。沒有阿裡雲賬号就在登入頁面注冊一個繼續登入。
  • 擁有Github賬号 ( https://github.com/ ),沒有就注冊一個。為保證最好的使用體驗,請使用Chrome浏覽器。
  • 未開通阿裡雲OSS的使用者,點選連結 ( https://workbench.aliyun.com/product/open?code=oss )開通OSS服務。OSS開通免費,有一定的免費額度,超過額度之後按量付費。

2. 建立應用

2.1 選擇應用中心任意模版建立應用

  • 選擇應用中心任意模版建立應用。如果您之前沒有使用過雲開發平台,會出現雲資源授權管理的選項,往下拉出現直至同意授權的字樣,點選「同意授權」後出現授權成功,點選進入「下一步」。
新手建站就用這個方法,無需購買伺服器10分鐘快速部署你的靜态網頁
  • 綁定GitHub賬号。授權完成後選擇來源倉庫為GitHub,按照提示點選去綁定,綁定GitHub帳号,登入後并點選Authorize AliyunWorkbench允許雲開發平台建構、釋出你的GitHub代碼為可通路的網站。 綁定完成後傳回應用建立頁面,代碼倉庫按照預設「模闆倉庫」以及預設主幹分支不用操作,并點選「下一步」。
新手建站就用這個方法,無需購買伺服器10分鐘快速部署你的靜态網頁
  • 填寫應用資訊完成建立。填寫必要的的應用資訊完成建立(我們已提供預設配置),成功後進入到應用詳情和部署界面。首次登入并沒有可選所屬生産線,點選右側自動建立産品線即可。
新手建站就用這個方法,無需購買伺服器10分鐘快速部署你的靜态網頁

2.2 使用自己的倉庫應用建立

  • 選擇自己倉庫裡需要部署的應用。除了可以使用應用中心的模版建立網站,雲開發平台也支援使用本地代碼或者開源代碼建立靜态網站。與通過模版中心的應用建立的差別在于,在綁定Gihutb之後選擇“自己的倉庫”,找到上一步自己建立的GitHub倉庫及master分支。然後在應用詳情頁面根據以上的步驟繼續填寫即可。
新手建站就用這個方法,無需購買伺服器10分鐘快速部署你的靜态網頁
  • 設定部署配置。當部署的是您自己的代碼倉庫時,開發平台需要您根據具體代碼進行簡單配置來部署成功:
    1. 編寫build.sh:代碼從源碼,經過npm打包編譯等過程,到生成為純粹HTML/CSS/JS靜态檔案的全過程的shell指令,需要被完整填寫到釋出分支根路徑下的build.sh檔案中,例如:
新手建站就用這個方法,無需購買伺服器10分鐘快速部署你的靜态網頁
新手建站就用這個方法,無需購買伺服器10分鐘快速部署你的靜态網頁

不知道如何操作?您也可直接點選一次“部署”按鈕,之後,對預設生成的build.sh内容進行任意修改:

b. 填寫靜态檔案相對目錄:在build.sh執行後,從代碼生成出的靜态檔案所在的相對目錄,需要被填寫到“部署配置-資源路徑”中。

新手建站就用這個方法,無需購買伺服器10分鐘快速部署你的靜态網頁

Tip:例如React應用(如圖),一般會填寫“./build”;Vue應用則一般為“./dist”。

新手建站就用這個方法,無需購買伺服器10分鐘快速部署你的靜态網頁

c. 調整配置:當您完成上述步驟後,發現自己的代碼仍然部署錯誤時,需檢視排查部署日志,對上面的build.sh和部署資源路徑進行修改。常見的幾種部署錯誤情況如下:

新手建站就用這個方法,無需購買伺服器10分鐘快速部署你的靜态網頁
新手建站就用這個方法,無需購買伺服器10分鐘快速部署你的靜态網頁

3. 在日常環境部署站點

  • 一鍵進行應用部署。在應用詳情頁面點選日常環境的「部署」按鈕進行一鍵部署,部署狀态變成綠色已部署以後可以點選通路部署網站檢視效果。
新手建站就用這個方法,無需購買伺服器10分鐘快速部署你的靜态網頁
  • Dinosaurs網站日常環境部署好了。日常環境的測試域名也是可以通路的,點選通路已部署網站按鈕會出現一個彈出,點選彈出上的立即通路就能夠通路已經部署好的站點了。在部署完成後,可以繼續本地編碼,并将代碼push到應用的“基本資訊”中對應的代碼倉庫内。
新手建站就用這個方法,無需購買伺服器10分鐘快速部署你的靜态網頁

4. 配置自定義域名線上上環境上線

  • 配置線上環境自定義域名。在功能開發驗證完成後要線上上環境進行部署,線上上環境的「部署配置」-「自定義域名」中填寫自己的域名。例如我們添加一個二級域名 company.workbench.fun 來綁定我們部署的前端應用。然後複制自定義域名下方的API網關位址對添加的二級域名進行CNAME配置。
新手建站就用這個方法,無需購買伺服器10分鐘快速部署你的靜态網頁
  • 配置CNAME位址。複制好 API網關域名位址後,來到你自己的域名管理平台(此示例中的域名管理是阿裡雲的域名管理控制台,請去自己的域名控制台操作)。添加記錄的「記錄類型」選擇「CNAME」,在「主機記錄」中輸入你要建立的二級域名,這裡我們輸入「company」,在「記錄值」中粘貼我們之前複制的 API網關域名位址,「TTL」保留預設值或者設定一個你認為合适的值即可。
新手建站就用這個方法,無需購買伺服器10分鐘快速部署你的靜态網頁
  • 線上上環境部署上線。回到雲開發平台的應用詳情頁面,按照部署的操作,點選線上環境的「部署按鈕」,部署完成以後就在你自定義的域名進行了上線。CNAME 生效之後,我們輸入 company.workbench.fun(示例網址) 可以打開部署的頁面。至此,如何部署一個應用到線上環境,如何綁定自己的域名來通路一個線上的應用就完成了,趕緊部署自己的應用到線上環境,用自己的域名玩起來吧 ;)
新手建站就用這個方法,無需購買伺服器10分鐘快速部署你的靜态網頁

立即體驗領取雙重好禮

第一個任務:使用阿裡雲賬号登入雲開發平台,建立團隊和同意平台使用協定,僅雲開發平台新使用者可以完成。

第二個任務:部署開源應用中心清單頁任意一個應用,并綁定自己的個人域名線上上環境上線。

第三個任務:點選前往送出你最想在開源應用中心看到的開源應用,可以是從現有清單中的應用,也可以是開源應用中心還沒有上線的應用,我們收到你的需求後會優先上線。

新手建站就用這個方法,無需購買伺服器10分鐘快速部署你的靜态網頁

一重禮:桌面不鏽鋼保溫杯

完成全部3個任務即可領取桌面不鏽鋼保溫杯領取資格,打卡任務狀态有一定延時,請完成後重新整理。活動期間(12月15日-12月24日)每個工作日150個,上午10點發放,領完為止。如果當天獎品已經領完,可以先完成打卡任務,第二天準時來領取即可!

新手建站就用這個方法,無需購買伺服器10分鐘快速部署你的靜态網頁
新手建站就用這個方法,無需購買伺服器10分鐘快速部署你的靜态網頁

二重禮:免費雲資源激勵加油包

雲開發平台為新使用者提供了10元無門檻加油包,在活動頁面完成相應的新手任務即可領取。

針對使用雲開發平台上線個人或者企業站點的使用者,可以申請領取100元的無門檻加油券。申請的使用者需要滿足兩個條件,1.通過雲開發平台上線了個人或者實際使用的網站,2. 撰寫一篇基于雲開發平台上線該網站的經驗分享文章。從業人員會在收到申請後的60天完成稽核,請確定站點保持線上上。

詳細活動規則

活動對象:阿裡雲官網注冊的已實名認證使用者

活動時間:2021.12.15-2021.12.22, 活動延期到12月24日。

活動網址:

https://workbench.aliyun.com/app
  1. 使用者需要完成指定的所有打卡任務才可以領取獎品,同一使用者限領一次。活動期間獎品每天發放150個,周六除外,每天上午10都會新補倉獎品,當日獎品領完以後可以次日再來領取,先到先得,發完即止。
  2. 實物獎品以實物為準,顔色随機,圖檔僅供參考,活動結束後15個工作日内發貨。如果由于疫情影響,導緻實物獎品發貨時間不确定,請留意活動群的公告資訊。
  3. 10元代金券獎品需要在新手加油包頁面完成新手任務以後才可以領取。100元代金券需要按照表單填寫進行申請,從業人員會在收到申請後的60天完成稽核,請確定站點保持線上上。如果在60天内稽核當天網站無法通路,将會造成無法通過稽核。
  4. 阿裡雲可以根據活動的實際情況對活動規則進行變動或調整,相關變動或調整将公布在活動頁面上,并于公布時即時生效;但不影響使用者在活動規則調整前已經獲得的權益。
  5. 活動相關問題可以釘釘掃碼加入雲開發的活動群或者搜尋釘釘群号: 34096194加入。
  6. “同一使用者”,是指根據不同阿裡雲賬号在注冊、登入、使用中的關聯資訊,阿裡雲判斷其實際為同一使用者。關聯資訊舉例:同一證件、同一手機号、同一支付賬号、同一裝置、同一位址等。
  7. “同人賬号”,是指同一使用者擁有多個阿裡雲賬号的,各個賬号之間互為同人賬号。
  8. 為保證活動的公平公正,如使用者在活動中存在隐瞞、虛構、作弊、欺詐或通過其他非正常手段規避活動規則、擷取不當利益的行為,例如:作弊領取、惡意套現、網絡攻擊、虛假交易等,阿裡雲有權收回相關權益、取消使用者的活動參與資格,撤銷違規交易,必要時追究違規使用者的法律責任。
  9. 本活動最終的解釋權歸阿裡巴巴集團所有。

繼續閱讀