Lastor
@Lastor
Tue, Nov 22, 2022 8:54 AM
Tue, Nov 22, 2022 9:26 AM
1
coding
突然意識到，前端 SPA 專案，或是任何有進 build tools 的專案。要如何跟自架的 Server 端配合來做自動化部署，其實是門學問啊......
Lastor
@Lastor
Tue, Nov 22, 2022 8:56 AM
屏除那種前端專案自己單獨部署到 Vercel or Netlify 這類情況
Lastor
@Lastor
Tue, Nov 22, 2022 8:57 AM
之前稍微跟認識的 Web 開發者打聽過，好像不少公司都是用很物理的方式去部署前端
Lastor
@Lastor
Tue, Nov 22, 2022 8:58 AM
就是前端那邊做好之後，由前端或是後端去 build，然後手動把編譯後的 output 的檔案，放到 HTTP Server 上
Lastor
@Lastor
Tue, Nov 22, 2022 8:59 AM
例如說是 Apache + PHP，預計前端這個頁面會放到 /abc/home 這個路由下面
Lastor
@Lastor
Tue, Nov 22, 2022 8:59 AM
後端就手動把前端打包後的檔案，直接往那邊放
Lastor
@Lastor
Tue, Nov 22, 2022 9:00 AM
有些則是會進步一點，用 git 管理，像是我之前的公司就是這樣。但手法也是蠻陽春的
Lastor
@Lastor
Tue, Nov 22, 2022 9:00 AM
很多是單純的讓前端專案，不要 git 忽略 dist or build 資料夾，一起加入版控
Lastor
@Lastor
Tue, Nov 22, 2022 9:01 AM
然後 Server 端無腦用 git 把整個 main branch 拉下來
Lastor
@Lastor
Tue, Nov 22, 2022 9:01 AM
這個優點是簡單粗暴，版控方便。但缺點也很明顯，就是 Server 上也會有整包前端的 source files 在上面
doomleika
@doomleika
Tue, Nov 22, 2022 9:02 AM
正常情況應該有CICD build好
Lastor
@Lastor
Tue, Nov 22, 2022 9:02 AM
而且 Server 基本都是對外公開給其他人瀏覽的，所以如果你用的資料夾結構很 common 太好猜，其他人是可以直接改網址去看到你的 README 之類的玩意，全被看光......XD
Lastor
@Lastor
Tue, Nov 22, 2022 9:05 AM
doomleika
: 我目前碰過有 CI / CD 跟自動雲端 build 的，都是專案有託管給雲平台的才這樣走。自己架 Server 的公司，我這邊碰到的都很土法煉鋼
doomleika
@doomleika
Tue, Nov 22, 2022 9:05 AM
還是不太行啊，不過我們這邊根本沒有的沒資格說人
doomleika
@doomleika
Tue, Nov 22, 2022 9:06 AM
不過正常的情況都是deploy完全是tag commit上去就結束了
Lastor
@Lastor
Tue, Nov 22, 2022 9:07 AM
之前我自己是有嘗試一套半自動的部署方式，概念類似 Vue 體系部署 Github Pages 的教學
Vite
Lastor
@Lastor
Tue, Nov 22, 2022 9:08 AM
思路上是，前端走正常方式 git 忽略 dist 資料夾，然後寫一個 sh file 去自動化。讓 dist 重新作為 root dir，將其 push 到 github
Lastor
@Lastor
Tue, Nov 22, 2022 9:09 AM
這樣 github 上就會有一個 dist branch，裡面只有 build 後的檔案
Lastor
@Lastor
Tue, Nov 22, 2022 9:09 AM
然後 Server 端的 git 版控就只拉這個 dist branch 就好，就可以避免把整包 repo 都放到 Server 上的窘境
Lastor
@Lastor
Tue, Nov 22, 2022 9:11 AM
doomleika
: 是啊，最理想的應該還是前端 build -> deploy to Server 這塊，能全自動是最好
Lastor
@Lastor
Tue, Nov 22, 2022 9:13 AM
不過這個要如何完全自己建，我還沒個頭緒。用 Heroku 那種其實也有點難度，因為他預設不是 for static 部署的。要 Vercel 那種才有辦法 github repo 連接上，他就全幫你連同 build 一起處理好
Lastor
@Lastor
Tue, Nov 22, 2022 9:14 AM
我現在公司是有簡單的 CI，但 CD 就沒有了。基本上是 PR 發出去，透過 Gituhb 機制跑 CI，完成之後合併到 master
Lastor
@Lastor
Tue, Nov 22, 2022 9:14 AM
然後管 Server 的工程師，手動更新
doomleika
@doomleika
Tue, Nov 22, 2022 10:05 AM
如果是後端deploy的話一般來說是前端寫好怎麼生dist然後讓前端去做
doomleika
@doomleika
Tue, Nov 22, 2022 10:54 AM
你們git host用哪家的? github github action
Lastor
@Lastor
說
Tue, Nov 22, 2022 11:55 AM
doomleika
: 現在這邊是用 GitHub，至於 Server 有沒有用啥服務我就不知道了
doomleika
@doomleika
Tue, Nov 22, 2022 12:02 PM
Lastor
: 那應該可以直接弄github actions
Lastor
@Lastor
說
Tue, Nov 22, 2022 12:14 PM
github actions 我還沒用過，個人目前認知，好像就是可以在各個特定的時間點，去下命令做一些事
Lastor
@Lastor
說
Tue, Nov 22, 2022 12:16 PM
他可以去幫忙 build 然後把 dist 資料夾，扔到自架的 Server 嗎?
doomleika
@doomleika
Tue, Nov 22, 2022 12:17 PM
那是其中之一，另外一個是直接能每次push自動執行，你可以跑
npm build
把 dist 打包好放著
doomleika
@doomleika
Tue, Nov 22, 2022 12:17 PM
內部deploy到server上也行，不過你就要在上面弄點script麻煩些
Lastor
@Lastor
說
Tue, Nov 22, 2022 12:21 PM
所以他可以提供 runtime 直接去起 Node.js 跑 npm install + npm build 嗎?
Lastor
@Lastor
說
Tue, Nov 22, 2022 12:22 PM
因為我之前看他的說明，他好像也不會起個容器去運行程式之類的，我理解上是可以單純幫忙串接不同的服務。例如 CI 可能用甚麼 abcCI 之類的，就可以透過 actions 去呼 abcCI 的服務
Lastor
@Lastor
說
Tue, Nov 22, 2022 12:23 PM
但 github 自身並不提供一個 runtime 去跑程式
Lastor
@Lastor
說
Tue, Nov 22, 2022 12:23 PM
總覺得這塊應該是我技術盲點了
doomleika
@doomleika
Tue, Nov 22, 2022 12:27 PM
他是起個容器沒錯 ...還是我記錯了?
doomleika
@doomleika
Tue, Nov 22, 2022 12:29 PM
額，有啊
Building and testing Node.js - GitHub Docs
doomleika
@doomleika
Tue, Nov 22, 2022 12:29 PM
我試試看
Lastor
@Lastor
說
Tue, Nov 22, 2022 12:32 PM
看來是真的可以起個 runtime 耶，我一直以為只能下一些簡單的 hook 指令去串不同服務而已
Lastor
@Lastor
說
Tue, Nov 22, 2022 12:33 PM
doomleika
: 我再來研究看看，如果能夠把自動部屬搞出來，搞不能談談加薪，感謝情報
Lastor
@Lastor
說
Tue, Nov 22, 2022 12:33 PM
*搞不好能
Lastor
@Lastor
說
Tue, Nov 22, 2022 12:34 PM
剛翻了一下我們公司的專案，好像都沒有用 actions
Lastor
@Lastor
說
Tue, Nov 22, 2022 12:53 PM
粗略查了些文章，似乎難點會是在，要確認公司的 Server 是放在哪個環境上。如果是 AWS 之類的，好像會有 AWS CLI 之類的玩意，就可以在 github actions 起的容器上，把 build 出來的檔案，透過 AWS CLI 傳過去
Lastor
@Lastor
說
Tue, Nov 22, 2022 12:53 PM
如果 Server 那邊沒有提供這樣的接口的話，可能就會很有難度了......orz||
載入新的回覆
npm build把 dist 打包好放著