请教下 vue 项目的部署流程

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

For Existing Member Sign In

• 请不要在回答技术问题时复制粘贴 AI 生成的内容

This topic created in 2577 days ago, the information mentioned may be changed or developed.

目前我是构建后,把 dist 文件 scp 上传到服务器,然后交给 nginx 托管, 全程手动操作, 做法像小作坊式的, 不知道大厂是如何操作的,请有相关经验的大佬给介绍下

Supplement 1 · Apr 20, 2019

如果有细化一点的方案,更好

33 replies • 2019-04-22 09:27:40 +08:00

slimhigh

Apr 20, 2019

配个 CI Pipeline，把这个流程自动化。

xsir

Apr 20, 2019

gitlab CI Pipeline docker 全自动部署

LeoQ

Apr 20, 2019 via iPhone

阿里云 oss 可以考虑一下

tinybaby365

Apr 20, 2019

使用 gitlab ci 部署，先 docker multi stage 编译出 nginx+dist 的部署镜像，再触发 k8s 的滚动更新。

linmq

Apr 20, 2019 via iPhone

raync 写个脚本，敲一个命令自动上传部署

nekoleamo

Apr 20, 2019

上家公司是创业公司，用的 pm2 自动部署，配置操作挺简单的，就是没法无缝更新，替换的时候会有十几秒无法访问

shenyu1996

Apr 20, 2019

自己小项目用的 buddy.works

shingle

Apr 20, 2019 via Android

其实最简单的 docker+git 就可以，服务器初始化一个仓库（默认的 init 达不到效果，需要配置），docker 跑一个 nginx 然后把 dist 文件夹挂在进去，写一个 git hook 钩子自动触发更新

shingle

Apr 20, 2019 via Android

之前写过一篇折腾...https://shingle.me/post/给 git 配置钩子实现服务器和客户端代码一致 /

avenger

Apr 20, 2019 via iPhone

laravel + vue 的项目，用的这个

https://deployer.org

HarryQu

Apr 20, 2019

只有我一个人写 sh 脚本，打包、上传？

看来得抽空研究下 ci 了。

yuikns

Apr 20, 2019

我有个简单的工程，build 完了 dist 放到 hou 这个 image 的 /app 下。整个流程都可以放到 Dockerfile 里面

https://github.com/argcv/hou

然后线上 pull + up 就行

AngryMagikarp

Apr 20, 2019

使用 Gitlab CI 的话需要在 Runner 所在的服务器配置一个 node 环境来编译，编译的时候会占用比较多的内存和 CPU。

个人建议在你电脑上用 ansible 来自动化。没必要模仿所谓的大厂，大厂的人力资源是你们的几十倍，很多都有自己开发的一套发布系统。

tomczhen

Apr 20, 2019

都用 webpack，加个 scp upload plugin 不算什么麻烦事吧。

ericgui

Apr 20, 2019

部署在 netlify 上 --- 如果是开源项目的话

fmumu

Apr 20, 2019 via Android

没人用 Jenkins 吗？

chniccs

Apr 20, 2019

像我这么原始的有么，本地生成 dist 目录，然后放到另一个源，推送上去，然后 webhook 服务器自动 pull。虽然 low，但我还用的挺开心的

lihongjie0209

Apr 20, 2019

个人简单使用那写一个 rsync 脚本就可以了

团队使用用 CI 工具持续集成

lauix

Apr 20, 2019

自己写了个 python 脚本自动化部署，公司一般都是 Jenkins docker 部署

YuansMine

Apr 20, 2019

GitHub webhook 还是基本能实现的，如果有更多的需求的话就得看看 CI 相关的知识了

justin2018

Apr 20, 2019

@avenger 收藏了这个不错 😁

jhsea3do

Apr 20, 2019

@nekoleamo

pm2 做后台进程的托管，类似 supervisord 或者 systemd，但是 vue 打包应该和这个无关，只是 ci / repository 这块

zhouhui

Apr 20, 2019

自己写一段？
deploy.sh
```
#!/bin/sh

echo "开始编译...."
npm run build
echo "开始压缩..."
cd dist && zip -r dist.zip *
echo "开始上传..."
scp dist.zip [email protected]:/opt/deploy/XXX
cd ..
scp run.sh [email protected]:/opt/deploy/XXX
echo "开始删除编译代码..."
rm -rf dist/
echo "准备更新生产代码..."
ssh [email protected] sh /opt/deploy/XXX/run.sh
echo "发布成功..."
```
run.sh
```
#!/bin/sh

base=/opt/deploy/XXX
echo "删除多的文件..."
rm -rf $base/css $base/dis $base/img $base/index.html $base/js $base/static
echo "解压线上代码..."
rm -rf $base/dist
unzip $base/dist.zip -d $base
echo "删除多余的文件..."
rm -rf $base/dist.zip $base/run.sh
echo "发布成功..."
```

zhouhui

Apr 20, 2019

或者有机器也可以用 gitlab-ci 之类的东西。

CallMeReznov

Apr 20, 2019

就 2-3 台机器是 LINUX,其他都是 200 台 windows.
部署的时候都是手动(没更新,只增量),管理的话我都是写了批处理然后用 zabbix 监控后远程处理的.

其实我也想搞持续集成持续部署..条件不支持啊

bhaltair

Apr 20, 2019

上 docker 啊，再配合 gitlab ci，加上 k8s

EI8xU01k92WdI1Mb

Apr 20, 2019

参考官方的指导打包为 docker
https://cli.vuejs.org/guide/deployment.html#docker-nginx
后续无论部署什么都简单了

binaryify

Apr 21, 2019

我这边用这个 ssh-webpack-plugin 插件

plugins: [new SshWebpackPlugin({
host: 'Remote host',
port: 'Remote port',
username: 'Remote username',
password: 'Remote password',
from: 'Deploy Local path',
to: 'Remote full path',
})]

ericgui

Apr 21, 2019

@binaryify 看着这个插件 2 年没更新了，还好用么？

Cbdy

Apr 21, 2019 via Android

公司用 GitLab 的话还是建议用它提供的 CI 或 Web Hook
参考： https://github.com/cbdyzj/lib17/blob/master/javascript/code/webhook.js

binaryify

Apr 21, 2019 via iPhone

@ericgui 用着没问题

fumichael

Apr 21, 2019

我目前也是“小作坊”操作

cs419

Apr 22, 2019

会用 docker 可以考虑 drone 进行持续集成