使用 Github Actions 自動部署 Angular 應用到 Github Pages

来源:https://www.cnblogs.com/danvic712/archive/2020/07/20/deploy-angular-app-to-github-pages-with-github-actions.html
-Advertisement-
Play Games

前言 最近在學習 Angular,一些基礎的語法也學習的差不多了,就在 github 上新建了一個代碼倉庫,準備用 ng-zorro 搭個後臺應用的模板,方便自己以後寫些小東西時可以直接使用。前端項目,最主要的還是能夠實際看到,因此考慮找個地方部署,因為自己的博客是部署到 github page 上 ...


前言

最近在學習 Angular,一些基礎的語法也學習的差不多了,就在 github 上新建了一個代碼倉庫,準備用 ng-zorro 搭個後臺應用的模板,方便自己以後寫些小東西時可以直接使用。前端項目,最主要的還是能夠實際看到,因此考慮找個地方部署,因為自己的博客是部署到 github page 上的,並且這個項目也只是一個靜態網站,所以這裡同樣選擇使用 github page

同時,考慮到發佈項目時,雖然使用 github page 已經幫我們省略了拷貝文件到伺服器上這一步,但是還是需要自己手動的敲命令來完成項目的發佈,因為發佈的流程很單一,所以這裡選擇通過 github action 這個自動化工具來實現程式的自動化部署

代碼倉庫地址:ingos-admin

預覽地址:https://yuiter.com/ingos-admin

Step by Step

2.1、手動部署

示例的 Angular 應用,你可以通過 Angular CLI 直接生成,如有需要,可以點擊此鏈接進行跳轉查看(電梯直達),這裡就不演示創建的過程了

按照正常的前端項目發佈流程,當我們需要發佈時,需要使用 npm 命令來完成項目的打包。整個項目中所涉及的 npm 命令,我們可以通過查閱項目的 package.json 文件中的 scripts 節點進行查看

這裡通過 Angular CLI 創建的項目可以通過 ng build 命令來完成項目的打包發佈

npm 命令

當 build 命令執行完成後,項目根路徑下 dist 文件夾中以項目名稱命名的文件夾就是我們需要部署的文件。此時,如果是部署到自己的伺服器上,只需要把這個文件夾拷貝到伺服器上,通過 nginx 之類的伺服器指向文件所在路徑即可

同樣的,當我們想要部署到 github page 時,我們也只需要將文件提交到 github 代碼倉庫中即可,之後 github 會自動完成應用的部署工作

因為 git 預設是會忽略編譯生成的 dist 文件夾的,此時,想要把編譯生成的文件推送到遠程倉庫,你需要修改 .gitignore 文件,或是通過 subtree 的形式,將 dist 文件夾作為一個分支推送到遠程伺服器

# 創建並切換到 gh-pages 分支
git checkout -b gh-pages
# 將 dist 文件夾下的文件添加到 gh-pages 分支
git add -f dist
# 提交到本地分支
git commit -m 'created gh-pages'
# 推送到遠程分支
git subtree push --prefix dist origin gh-pages

當然,這樣還是顯得有些麻煩,對於 angular 應用來說,我們完全可以使用社區提供的

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 故事起因: 最近我有個剛畢業的學生問我說:我感覺現在前端行業已經飽和了,也不是說飽和了,是初級的前端根本就沒有公司要,哪怕你不要工資也沒公司要你,前端剛學出來,沒有任何的項目經驗和工作經驗,根本就不會有公司要你啊,這是最大的一個問題,而且現在也沒有任何公司找初級前端,實習前端,都是要求有工作經驗的。 ...
  • 最近在重新學習JavaScript,手寫了一個tabs標簽頁。 話不多說,直接開始。 首先,是前端頁面。 圖1 tabs 先來把tabs分解一下:圖2 tabs分解 首先,一個大的框div,上面紅色的框是導航欄nav,導航欄里是一個無序列表ul,裡面三個li標簽(黃色的框),li標簽里兩個綠色標簽是 ...
  • 本文將介紹如何從零搭建一個集成vue的electron項目,以及搭建過程中可能會出現的問題及其解決方法 ...
  • 開發過程中經常有意無意地刻意避開數學相關的知識,你也知道解數學題非常枯燥無趣。平時寫動畫也儘量使用 css3 來實現,timer-function 隨意選用,最多也就調一下 cubic-bezier,找到看著舒服的就行。但是怎樣讓動畫更順滑,寫出更貼近自然的動畫,說實話以前我沒怎麼考慮過。 每次當動 ...
  • 一、定義 當客戶不方便直接訪問一個對象或者不滿足需要的時候,提供一個對象來控制堆這個對象的訪問。 二、舉例 惰性單例模式的實現依靠緩存代理 三、結構 代理模式需要一個本體對象和一個代理對象。在代理模式下,對於本體對象的特定的操作通過代理對象進行。如圖所示 這種模式的關鍵點在於:本體對象和代理對象介面 ...
  • setTimeout(一次) setInterval(定時一次) HTML: <!DOCTYPE html> <html> <head> <meta chartset="utf-8"> <title></title> <link rel ="stylesheet" href= "./style.cs ...
  • 加了y滾動條後表格就錯位,需要給所有列加上寬度百分比,如果有單選這種特殊列,要在表格列拿出2%給它,其餘列相加之和為98%即可。 然後還加了一個全局樣式 .ant-table-tbody > tr > td { white-space: break-spaces; } ...
  • 瀏覽器記住密碼的機制 首先理解瀏覽器保存密碼和自動填充是兩個機制,記住密碼機制需要遵循同源策略 測試瀏覽器(mac) 瀏覽器 版本 google 56.0.2924.87 (64-bit) firefox 51.0.1 (64 位) safari 10.0 (12602.1.50.0.10) ie( ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...