请教下 vue 项目的部署流程

V2EX = way to explore

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

现在注册

已注册用户请登录

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

这是一个创建于 2062 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

第 1 条附言 · 2019-04-20 10:42:12 +08:00

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

33 条回复 • 2019-04-22 09:27:40 +08:00

slimhigh

2019-04-20 09:38:11 +08:00

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

xsir

2019-04-20 09:40:04 +08:00

gitlab CI Pipeline docker 全自动部署

LeoQ

2019-04-20 09:42:35 +08:00 via iPhone

阿里云 oss 可以考虑一下

tinybaby365

2019-04-20 09:49:09 +08:00

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

linmq

2019-04-20 09:51:15 +08:00 via iPhone

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

nekoleamo

2019-04-20 10:07:07 +08:00

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

shenyu1996

2019-04-20 10:07:39 +08:00

自己小项目用的 buddy.works

shingle

2019-04-20 10:52:20 +08:00 via Android

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

shingle

2019-04-20 10:54:25 +08:00 via Android

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

avenger

2019-04-20 11:43:42 +08:00 via iPhone

laravel + vue 的项目，用的这个

https://deployer.org

HarryQu

2019-04-20 11:54:19 +08:00

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

看来得抽空研究下 ci 了。

yuikns

2019-04-20 11:56:56 +08:00

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

https://github.com/argcv/hou

然后线上 pull + up 就行

AngryMagikarp

2019-04-20 12:04:26 +08:00

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

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

tomczhen

2019-04-20 12:24:46 +08:00

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

ericgui

2019-04-20 13:05:30 +08:00

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

fmumu

2019-04-20 13:15:46 +08:00 via Android

没人用 Jenkins 吗？

chniccs

2019-04-20 14:17:45 +08:00

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

lihongjie0209

2019-04-20 14:43:40 +08:00

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

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

lauix

2019-04-20 15:04:21 +08:00

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

YuansMine

2019-04-20 15:19:35 +08:00

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

justin2018

2019-04-20 16:47:18 +08:00

@avenger 收藏了这个不错 😁

jhsea3do

2019-04-20 17:17:14 +08:00

@nekoleamo

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

zhouhui

2019-04-20 18:34:27 +08:00

自己写一段？
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

2019-04-20 18:35:57 +08:00

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

CallMeReznov

2019-04-20 19:00:51 +08:00

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

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

bhaltair

2019-04-20 22:39:07 +08:00

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

freddong

2019-04-20 23:03:28 +08:00

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

binaryify

2019-04-21 01:18:59 +08:00

我这边用这个 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

2019-04-21 01:24:21 +08:00

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