前端项目推送到master上自动build 打包并推送打包资源到服务器对应文件夹中
背景
前端项目部署，最基本的原理就是把html及css\js等资源放到服务器上，或通过nginx分发，或直接访问。普遍来说，通过nginx分发是常见办法，也可以一并处理跨域问题。
前端部署项目并没有太多复杂的配置，服务器配好nginx分发，把静态资源放到对应的服务器上的目录内，就OK。
所以利用gitlab的CI做自动打包、自动部署。
1. 服务器上nginx配置
- 配置资源目录以及跨域转发
server {
listen 80; # 监听端口
server_name "xxx.xxx.xxx.xx"; # 可以是服务器IP，也可以是绑定的域名
error_page 500 502 503 504 /usr/share/nginx/html/50x.html; # 错误页
access_log /var/log/nginx/host.access.log main; # log目录
location / {
root /etc/nginx/html/test; # 资源目录
index index.html index.htm; # index文件
}
location /api/ { # 如果是/api/xxx 就发到 http://xxx.xx.xxx.xx:xxxx/xxx
proxy_pass http://xxx.xx.xxx.xx:xxxx/; # 接口转发地址
}
}
2.项目CI配置
-
首先配置私钥：Settings->CI/CD->Environment variables -> 写入私钥
- 项目中添加
.gitlan-ci.yml配置文件，写入
image: node # 使用node 镜像
build_test:
only:
- master # 只有master更新的时候才执行命令
script: # 执行的命令
- npm install # 安装
- npm run build # 打包
- eval $(ssh-agent -s) # 使用ssh
- bash -c 'ssh-add <(echo "$SSH_PRI_KEY")' # 缓存ssh key
# 推送打包后的dist 文件夹的文件到服务器对应的文件夹内
- scp -o StrictHostKeyChecking=no -r dist/* root@xxx.xx.xxx.xx:/etc/nginx/html/test/
然后每次master更新就会执行打包~
Pipelines:
Running with gitlab-runner 11.7.0 (8bb608ff)
on fintek-runnner b1xoMf8b
Using Docker executor with image node ...
Pulling docker image node ...
Using docker image sha256:9289251188dedce7f1ddbb3edbd4473bec2e0f7ba25713c84e9da2625b95621a for node ...
Running on runner-b1xoMf8b-project-28-concurrent-0 via fintek-base-01...
Fetching changes...
Removing dist/
Removing node_modules/
HEAD is now at 535b637 Update README.md
From http://gitlab.91fintek.com/frontend/fastloan
d25a0ad..9afc606 master -> origin/master
Checking out 9afc6060 as master...
Skipping Git submodules setup
$ npm install
> uglifyjs-webpack-plugin@0.4.6 postinstall /builds/frontend/fastloan/node_modules/webpack/node_modules/uglifyjs-webpack-plugin
> node lib/post_install.js
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.7 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.7: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
added 1327 packages from 750 contributors and audited 11310 packages in 31.076s
found 17 vulnerabilities (1 low, 8 moderate, 8 high)
run `npm audit fix` to fix them, or `npm audit` for details
$ npm run build
> fastloan@1.0.0 build /builds/frontend/fastloan
> node build/build.js
Hash: 4356a1a189ef9d6f7326
Version: webpack 3.12.0
Time: 37296ms
Asset Size Chunks Chunk Names
static/img/bg.e709b51.png 59.1 kB [emitted]
static/img/login-background.1677aba.jpg 90.6 kB [emitted]
static/fonts/element-icons.6f0a763.ttf 11 kB [emitted]
static/js/0.5b4b7d1da5d59b886716.js 2.74 kB 0 [emitted] vendor-async
static/js/1.2eb98e667282a8ae276f.js 688 kB 1 [emitted] [big]
static/js/2.bb7b8fce953ccca48a5d.js 31.8 kB 2 [emitted]
static/js/3.769faa260c8e789843ca.js 8.45 kB 3 [emitted]
static/js/4.313ef90807138764470a.js 6.91 kB 4 [emitted]
static/js/5.8b3d9f9c5dd306fa3391.js 4.48 kB 5 [emitted]
static/js/6.30f2f609901d433dad37.js 7.71 kB 6 [emitted]
static/js/7.8f345ca1e44734d67aac.js 4.04 kB 7 [emitted]
static/js/vendor.c96b49ec238ea33118d9.js 1 MB 8 [emitted] [big] vendor
static/js/app.b7174ee2dafd84d95201.js 28.2 kB 9 [emitted] app
static/js/manifest.1c45557a7cd708eb2313.js 1.58 kB 10 [emitted] manifest
static/css/app.561e2411eb1445dc3a2c90753b709d69.css 194 kB 9 [emitted] app
index.html 626 bytes [emitted]
static/logo.png 5.03 kB [emitted]
Build complete.
Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work.
$ eval $(ssh-agent -s)
Agent pid 64
$ bash -c 'ssh-add <(echo "$SSH_PRI_KEY")'
Identity added: /xx/xx/xx (xx@fxxxxxxx.xx)
$ scp -o StrictHostKeyChecking=no -r dist/* root@xxx.xx.xxx.xx:/etc/nginx/html/test/
Warning: Permanently added 'xxx.xxx.xxx.xxx' (ECDSA) to the list of known hosts.
Job succeeded
