A. 启动 myeclipse如何 关闭 自动重新编译部署
保存后就OK了
具体文字描述请参看
http://hi..com/sft444639074/item/3de6f26f0bcbfc85c5d24946
B. gitLab CI/CD docker自动部署vue前端项目
查询了好多资料，都没有找到可以直接应用的，综合了好多，配置runner之后，前端项目里面需要在项目根目录配置三个文件：
1..gitlab-ci.yml 文件
stages:
- build
- deploy
# 设置缓存
cache:
paths:
- node_moles/
- dist/
# 安装依赖 before_script 会在每个 stages 执行之前运行
before_script:
- npm install
# 编译 这里对应上方 stages ，
build:
stage: build
script:# script 为要执行的命令，可以多条按顺序执行
- npm run build:prod
docker-deploy:
stage: deploy
# 执行Job内容
script:
# 通过Dockerfile生成pactera_pflife_ui镜像
- sudo docker build -t pactera_pflife_ui .
# 删除已经在运行的容器
- if [ $(docker ps -aq --filter name= pactera_pflife_ui) ]; then sudo docker rm -f pactera_pflife_ui;fi
# 通过镜像启动容器
- sudo docker run -d -p 8085:80 --name pactera_pflife_ui pactera_pflife_ui
tags:
# 执行Job的服务器
- pflife-web
only:
# 只有在master分支才会执行
- dev_xht
2.Dockerfile 文件
# 设置基础镜像
FROM nginx:latest
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/ /usr/share/nginx/html
# 用本地的 default.conf 配置来替换nginx镜像里的默认配置
COPY default.conf/etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx","-g","daemon off;"]
3.default.conf文件
server {
listen 80;
server_name 39.100.9.6; # localhost修改为docker服务宿主机的ip
location / {
root /usr/share/nginx/html;
index index.html index.htm;
try_files $uri $uri/ /index.html =404;
}
location /api/{
proxy_set_header Host $http_host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header REMOTE-HOST $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://39.100.9.6:8090/;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
总之，三个文件部署之后运行正常
C. 使用Tomcat和Nginx部署前端项目
第一种方式，将我们的前端项目放置在webapps目录下
进入tomcat安装路径下的conf目录，在server.xml文件中<Host>标签内配置虚拟路径
简单的解释一下参数
path 对应用户请求过来的url路径, /static 匹配所有以 /static 开头的请求
docBase 表示实际匹配到的路径，这里可以使用绝对路径，也可以使用相对路径
reloadable 如果为true，则tomcat会自动检测应用程序的/WEB-INF/lib 和/WEB-INF/classes目录的变化。（对于静态资源来说，个人觉得这个配置用处不大）
总结起来就是，对于ip:8080/static的资源请求，会通过虚拟路径匹配到我们实际的资源路径music_client/static。
配置好后重启，我们可以发现已经能够看到我们的前端项目了
对于ROOT目录下的资源，tomcat可以直接在根目录下进行访问。通过这种方式，我们可以让项目的路径去适配tomcat访问的路径。
但是这种方式不是特别推荐，当有多个项目在同一个tomcat服务器上的时候，会不方便管理。
Nginx是当下热门的服务器，使用起来只需要进行简单的配置即可。对于Nginx的安装大家可以自行网络解决。
我们先进入到usr/local/nginx（具体以实际nginx安装目录为准）下的conf目录，vim编辑nginx.xml。主要进行下面的配置
简单的解释一下
listen 表示nginx监听的端口号，也就是你希望暴露哪个端口给用户进行访问
server_name 表示nginx接受请求的域名，一般默认localhost就行
location 模块用于响应请求，这里的 / 表示匹配8082端口的所有请求
root 表示静态资源/项目的路径
index 表示默认的访问资源
配置完成后，进入 sbin 目录下，通过 ./nginx -t 检查配置文件的格式是否正确
如正确 ./nginx 进行启动或者 ./nginx -s reload 进行重启
启动完，我们就可以直接ip:8082直接访问我们的前端项目啦
开启nginx的反向代理也比较简单，只需要加上proxy_pass 配置即可
出现这个问题的原因是： 在history模式下，只是动态的通过js操作window.history来改变浏览器地址栏里的路径，并没有发起http请求，但是当我们直接在浏览器输入这个地址的时候，就会对服务器发起http请求，但是这个目标在服务器上又不存在，所以会返回404。
我们可以通过把所有请求都转发到首页上来解决这个问题。只需要在 Nignx 中的配置文件加入如下配置：
事实上，上面的解决方式也是Vue-Router官方推荐的解决方式（ https://router.vuejs.org/zh/guide/essentials/history-mode.html#nginx ）。
那上面的 try_files 为什么能帮助我们解决这个问题呢？我们可以看一下这个属性的作用
try_files ：按选项所指定的顺序去检查用户请求的文件是否存在，如果本地存在的话则返回该请求；不存在的话将该请求转发到指定的其它路径。也就是说，比如我们当前的前端项目部署在 /usr/myproj 目录下，现在我们在浏览器发起 ip:port/testApi 请求，那么此时 uri 为testApi,nginx会先去 $root/testApi （即/usr/local/myproj/testApi）找是否存在该静态资源，若不存在，则继续寻找 $root/testApi/index （即/usr/local/myproj/testApi/index）文件是否存在，如果还是不存在，则会把请求转发到首页。
而我们的项目本事就是由Vue-Cli创建的 单页面应用 ，当index页面接收到请求的时候，对应的history模式路由就可以发挥作用了，根据浏览器的路由跳转到对应的页面，这也就保证了我们的路由请求都能够转发给index页面来进行处理。
这种问题一般是出现在服务器一开始安装Nginx的时候，没有安装SSL模块。在不重装Nignx的情况下，可以安装如下方式进行操作：
执行如下命令
这一步只是以防万一，可以省略
也可以直接执行 ./usr/local/nginx/sbin/nginx -t 看还会不会报错就行
nginx报错: [emerg] https protocol requires SSL support in /usr/local/nginx/conf/nginx.conf:50
D. 前端自动部署工具deploy-cli-service
1.先安装deploy-cli-service依赖
全局安装 deploy-cli-service
本地安装 deploy-cli-service
查看版本，表示安装成功
https://github.com/fuchengwei/deploy-cli-service
2.项目中配置
<package.json>中加上：
根目录下新建一个<deploy.config.js>文件：
E. web前端项目部署到服务器：
执行成功后会生成dist文件
4.1 进入到nginx配置目录：/usr/local/nginx/conf,对 nginx.conf 文件进行配置
使用include可以配置多个.conf文件，如一个项目一个配置文件。在同目录下创建demo文件夹，并创建demo.conf配置文件
下面使用是以ip地址的方式创建的的配置文件
访问地址：
其中dist名称时可以修改，保持与/usr/local/nginx/html下cp名称一致，否则会访问不到;并且/usr/local/nginx/html目录可存在同一ip下多个web项目。
域名与ip绑定
配置域名demo.conf
eg: 域名 - demo.cn
4.2阿里云配置域名前缀
阿里云->域名->域名列表—>域名 管理-> 域名解析->解析设置
如图：记录值 填写当前服务ip
学习过程中所记录，有问题或者有好的方式欢迎指点。不胜感激 🤗 🤗 🤗
F. 前端自动化部署解决方案
对象存储服务都有提供对应的控制台管理桶，同时也提供响应的API供后端业务调用。
aws-s3官方提供了命令行终端操作库可以方便在命令行发布我们的静态资源： https://aws.amazon.com/cn/cli/
我们可以这样发布：
腾讯的cos可以使用很轻量第三方库 cos-manager 发布资源: https://github.com/yansenlei/cos-manager
npm script 类似shell 的 exec，可以帮助你执行多个并行或顺序执行的命令，我们可以一次性执行 删除本地dist资源->打包->发布
参考：
https://docs.npmjs.com/misc/scripts
http://www.ruanyifeng.com/blog/2016/10/npm_scripts.html
以上发布我们可以这样写：
一个命令，提包走人。（虽然走了有点慌...）
持续集成是一种软件开发实践，每一次发布源码都会集成一次，每一次都会自动化的构建，这意味着也可以把上面的发布脚本在服务端跑起来，打包 测试 发布全部交给CI处理，目前主流的工具是 Travis CI ，具体可以参照： http://efe..com/blog/front-end-continuous-integration-tools/
G. 前端自动化部署服务器, 告别繁琐部署过程
简单实用的前端部署, 一条命令搞定, 省去繁琐的步骤!
主要是** nodejs shelljs(命令行命令) node-ssh(连接服务器)**
项目git 地址
(这个git项目是我自己搭的一个比较low的vue脚手架,集成ts)
(第一次写文章, 文笔不行, 多多包涵,有不对的地方尽管指出)
(主要看 自动部署 在 upload 目录 )
npm 或 cnpm i chalk ora shelljs node-ssh inquirer compressing -D
大功告成~~
咳咳, 放心, 不会有公众号啥广告, 也不会求打赏, 如果您觉得对您有一点点帮助 点个赞或者去GitHub点个star 那就非常感谢了
项目git 地址
H. 利用nginx部署站点,前端资源默认放在
部署springboot+vue项目的时候，我们一般是将打包好的前端项目放在我们后端的resources目录下，然后前后端一起打包成jar包或者war包部署上服务器的。也就是说，如果前端项目发生修改的话，那么即使后端不用修改，前后端项目也要重新放在一起重新打包、重新部署。但是，前端项目打包往往是几mb大小，而后端项目打包却要几十mb。因此，为了方便，我们可以使用Nginx独立部署前端项目。
一、 Nginx安装步骤
1、安装GCC、automake、pcre、zlib和openssl
用rpm -qa 命令查看是否安装
如果没有安装，执行以下命令
yum -y install gcc gcc-c++ automake pcre pcre-devel zlib zlib-devel openssl openssl-devel
1
2、下载Nginx
我是安装在 /www/server目录的
cd /www/server
1
weget命令下载
wget http://nginx.org/download/nginx-1.16.1.tar.gz
1
tar zxvf 解压
tar zxvf nginx-1.16.1.tar.gz
1
重命名 nginx-1.16.1文件夹
mv nginx-1.16.1 nginx
1
3、安装Nginx,默认安装目录：/usr/local/nginx
进入nginx文件夹，运行configure脚本
cd nginx
./configure
1
2
编译、安装
make
make install
1
2
切换到安装目录
cd /usr/local/nginx
1
注意：html：存放了两个后缀名为.html的静态文件，前端项目打包后的文件放在此处，编辑好配置文件，启动Nginx服务器即可成功部署前端项目。
4、修改配置文件、开放端口
vim /usr/local/nginx/conf/nginx.conf
1
端口改为 8051
5、启动Nginx
cd /usr/local/nginx
./sbin/nginx
1
2
6、其他命令
查看进程
ps -ef|grep nginx
1
重启Nginx
/usr/local/nginx/sbin/nginx -s reopen
1
停止Nginx
/usr/local/nginx/sbin/nginx -s stop
1
重载Nginx配置文件
/usr/local/nginx/sbin/nginx -s reload
1
7、访问
curl 127.0.0.1:8051
1
如果访问不了，服务器安全组开放端口以及防火墙放行端口
firewall-cmd --zone=public --add-port=8051/tcp --permanent
1
firewall-cmd --reload
1
二、前端项目独立部署
1、将打包的前端项目上传到/usr/local/nginx/html目录
2、 重新启动即可成功访问到前端项目
/usr/local/nginx/sbin/nginx -s reopen
1
可能遇到的问题
1、刷新页面查询404的情况，也就是页面找不到
修改Nginx配置文件
try_files $uri $uri/ /index.html;
1
重新加载配置文件重启Nginx
I. 将项目部署到 tomcat下，每次修改js代码后，刷新页面后怎么不能自动部署，而是需要重新部署下才行
你的项目修改后到项目同步到tomcat由于各个因素影响是要有一定时间的，有时候你刷新的时候可能还没同步上去，一般多刷几次就好