前後端分離部署，腳手架環境下開發的前端代碼部署流程是怎樣的？

查到說需要在正式伺服器上部署node服務，但是build之後只有一個dist文件夾，具體流程不太明確。

---

部署是我們 CI/CD 裡面的一個環節，關於前端的 CI/CD 怎麼做，可以看我之前的回答：前端開發如何讓持續集成/持續部署(CI/CD)跑起來

這裡單說部署，首先說測試環境。

1、在伺服器準備好部署腳本，我們是基於 pm2 來實現多分支部署，腳本接受 git 地址，分支等參數，腳本對不同分支的代碼拉取到不同的目錄，執行 pm2 delete 當前分支的進程， 然後再 start，pm2 的項目名可以通過代碼分支來區分。下面是是腳本部分主要邏輯代碼：

if (fs.existsSync(branchPath)) {
cd(branchPath);
}
else {
exec(`mkdir -p ${branchPath}`);
cd(branchPath);
exec(`git clone ${repository} .`);
exec(`git checkout ${branch}`);
}

exec(`git pull`);
exec(`cnpm install`);
exec(`NODE_ENV=testing npm run build`);
exec(`pm2 delete ${pm2Name}`);
exec(`pm2 start ${branchPath}/build/build-server.js -n ${pm2Name}`);


2、配置 jenkins job， 執行代碼檢查，單元測試，ssh 執行部署腳本等任務。其中部署配置如下：

3、基於 nodejs 提供一個命令行工具，啟動這個 jenkins job，關鍵代碼如下：

……
var jenkins = require("jenkins")({
baseUrl: `http://${jenkinsAuth}@${jenkinsHost}`,
});
program.usage("[options]").option("-p, --proxy", "請求代理");
program.on("--help", function () { ……});
program.parse(process.argv);
……
Promise.all([repository, branch, number]).then(arr =&> {
let type = package.dependencies.hapi ? "node" : "spa";
let repository = arr[0];
let branch = arr[1];
let proxy = program.proxy;

jenkins.job.build({
name: jenkinsJob,
parameters: {type, repository, branch, proxy}
}, function (err, data) {
if (err) throw err;
getLog();
});
});


4、 全局安裝命令行工具的 npm 包，編碼完了以後，直接通過以上命令啟動整個 CI/CD 流程。

生產環境的部署。

由於是前後端分離的項目，我們線上環境使用 nodejs 代替 nginx 做介面轉發來實現單頁應用。我們的命令行工具也提供 docker 操作的子命令。部署的時候，將當前項目打包成一個 docker 鏡像，Dockerfile 中加入 構建/啟動 web server 等命令，並上傳到公司的 docker 倉庫。然後到公司的 paas 平台上點一個按鈕就走 paas 的 docker 部署流程了。公司的 paas 平台的 docker 部署是運維負責，這裡就不詳細說了。

---

以題主的問題描述來看，題主的工作環境應該是沒有持續集成的，或者題主還沒搞清楚什麼是持續集成，所以先不要談什麼 ci。

前端部署，目前而言無非就是兩種模式：

第一種，把 webpack 打包後的代碼部署到 cdn 上，或者內網項目沒有 cdn，部署到特定的靜態伺服器上。

第二種，發布 npm package。

第一種需要你寫一個腳本，把打包後的代碼上產到某個地址，具體如何上傳和你的開發環境有關係，最簡單的是，你寫一個腳本調用 cdn 或靜態伺服器相應的 http api 即可，也有可能是 ftp 上傳。

第二種更簡單，直接 npm publish 即可。

不管實際流程有多複雜，本質上都跑不出這兩種模式。

---

這是我的 monkey patch，機器不夠於是在本地 build：

after "deploy:symlink:release", "deploy:upload_assets"
namespace :deploy do
task :upload_assets do
skip_assets = ENV["skip_assets"]
ts = asset_timestamp
unless skip_assets
run_locally do
with rails_env: :production do
system "bin/rake assets:clobber"
t1 = Time.now
system "RAILS_ENV=production bundle exec rails assets:precompile"
t2 = Time.now
system "echo compiling time: #{t2 - t1}s"
system "mkdir -p public/cache"
system "tar -zcf public/cache/assets.#{ts}.tar.gz -C public/assets ."
system "tar -zcf public/cache/packs.#{ts}.tar.gz -C public/packs ."
qshell = Gem::Platform.local.os == "darwin" ? "qshell-darwin-x64" : "qshell-linux-x64"
system "echo uploading to qiniu.com..."
system "rm -rf #{ENV["HOME"]}/.qshell/qupload/"
if ENV["QINIU_ACCESS_KEY"]
system "bin/qshell/#{qshell} account #{ENV["QINIU_ACCESS_KEY"]} #{ENV["QINIU_SECRET_KEY"]}"
system "bin/qshell/#{qshell} qupload2 -src-dir=./public -bucket=xxx -key-prefix=xxxx/ -overwrite -check-hash"
else
raise "七牛配置缺失"
end
end
end
on roles(:app) do
upload! "public/cache/assets.#{ts}.tar.gz", "#{shared_path}/public"
upload! "public/cache/packs.#{ts}.tar.gz", "#{shared_path}/public"
system "rm -rf public/cache"
execute "tar xf #{shared_path}/public/assets.#{ts}.tar.gz -C #{shared_path}/public/assets/"
execute "tar xf #{shared_path}/public/packs.#{ts}.tar.gz -C #{shared_path}/public/packs/"
execute "rm -f #{shared_path}/public/assets.#{ts}.tar.gz"
execute "rm -f #{shared_path}/public/packs.#{ts}.tar.gz"
end
end
end
end


大概思路就是把 build 後的 assets 塞到伺服器的 public 目錄里，同時上傳到七牛。

---

謝邀，這問題太大，而且很模糊，如果把問題問得更加清晰具體了再來邀我。

---

一些大廠或者有些正規部署流程的公司，都會有持續集成方案，譬如gitlab ci,當你把本地的源代碼推送到遠端gitlab 的時候，會進入具備node環境的docker容器裡面去構建前端應用，最後把構建完的build文件或者dist文件再提交到伺服器上。 我想我應該沒理解錯吧，相關詳盡過程，可以知乎搜索關鍵詞vue build,看看鄭海波的回答。

---

看團隊規模和技術要求吧～

最簡單的方法是手動部署，把編譯好的代碼直接放入web伺服器中，比如nginx或tomcat。這種方式適合項目不多或者項目都比較小的時候。

高級一點的方式是利用持續集成工具（如git-ci）。比如你的代碼由git倉庫保管，可以配置一個webhook，當提交代碼或合併分支的時候觸發對應的url，伺服器收到請求後開始拉取代碼並編譯部署。

更高級的是開發完成後利用docker生成鏡像並推送到本地倉庫。然後伺服器獲取鏡像部署生成容器。

---

我們是用nginx做靜態伺服器，就是任何請求都發送打包後的index.html文件

---

取決於你公司的正式伺服器到底是什麼玩意，以及業務對前端的要求有多高。

沒有這些客觀要求，node static 都算部署，問題太大以致難以回答。

---

dist打到靜態資源伺服器上，比如nginx。

---

可以嘗試入門一下各種xxx-cli，就理解了

---

推薦閱讀：