[问题探讨]基于VUE+docker+nginx+IntelliJ IDEA+Alibaba Cloud Toolkit实现WEB项目一键部署_vue alibaba cloud toolkit

需求：基于VUE+docker+nginx+IntelliJ IDEA+Alibaba Cloud Toolkit实现WEB项目一键部署

分析：如下图

Alibaba Cloud Toolkit其实是按步骤做了手动部署需要做的三件事情：

1，npm run build打生产包
2，通过ftp服务将生产包放入配置好的nginx服务目录中
3，启动.sh脚本完成部署

首先，我们来实现一次手动部署

一，dist包部分

1，准备VUE源码，如果没有适合练手源码的小伙伴，可以从如下github项目上克隆
tom-wong666/xiaoa
2，npm install 安装依赖
3，npm run build 打包dist

二，ftp服务部分

1，下载安装MobaXterm，奉上链接
https://moba.en.softonic.com/
2，通过MobaXterm连接远程主机
连接步骤：Sessions—>New Session—>SSH—>输入host userName port—>确认—>依照提示输入密码—>连接远程主机

三，用docker部署nginx静态服务器，并编写部署脚本start.sh

1，为远程主机安装docker服务
如下菜鸟教程很优秀，本文就不再展开了
https://www.runoob.com/docker/centos-docker-install.html
2，为远程主机通过docker安装nginx
同样的，优秀的菜鸟教程连接如下
https://www.runoob.com/docker/docker-install-nginx.html
这一步提醒一下：
服务目录和上传目录要分离，dist包先上传到上传目录，然后通过start.sh脚本，先删除服务目录的旧包，再将新包复制到服务目录中
3，编写start.sh完成以上清空旧包和部署新包的动作，如下关键代码参考

# 删除服务目录面的原包
rm -rf /root/egmpConsole/www/index.html /root/egmpConsole/www/static
# 从上传目录复制新包到服务目录
cp -rf /root/egmpConsole/deploy/dist/index.html /root/egmpConsole/deploy/dist/static /root/egmpConsole/www
1
2
3
4

四，启动nginx容器，上传dist包，运行start.sh

1，启动nginx容器

docker start test-nginx
1

2，上传dist包到上传目录
通过MobaXterm的ftp服务，将dist包传到上传目录
3，运行start.sh完成服务部署

bash start.sh
1

然后，我们来配置Alibaba Cloud Toolkit

1，在IntelliJ IDEA插件市场搜索Alibaba Cloud Toolkit并安装
2，用IntelliJ IDEA打开我们的WEB项目
3，点击IntelliJ IDEA顶部Edit Configurations
4，弹窗中点击左上角 ‘+’，选择Deploy to Host
5，如下图配置说明1

6，点击本地打包模块的‘+’，选择‘Run npm script’,配置如下图配置说明2

最后，选择我们的配置，点击开始