失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > 部署一个前端项目的基本流程(以angular项目为例docker+ gitlab-ci)

部署一个前端项目的基本流程(以angular项目为例docker+ gitlab-ci)

时间:2020-05-23 03:57:14

相关推荐

部署一个前端项目的基本流程(以angular项目为例docker+ gitlab-ci)

信息化时代,很多信息基本网上都有,但是好多时候想要找某个知识点不知道从何找起,发现都找不到项目部署的基本流程介绍和基本操作,对新手太不友好了.这里简单说一下,有大佬知道更详细的教程,拜托评论区留言一下,我好去学习学习

构建项目(把项目代码构建解析成可以被服务器解析运行的文件)

ng build --prod

构建出来的文件在dist目录下

上传构建后的代码

将构建出来的dist目录下文件上传到服务器指定位置,上传的方式很多,如jekenis,gitlab ci/cd等

3.项目部署有各种各样的工具,每种工具或是自动部署,或是手动部署,不过都是换汤不换药,本质上还是一回事,具体的细节还在摸索中

(/question/20790576)

4.最近摸索出来的发布脚本,亲测可以,步骤大同小异,不同环境脚本肯定要根据实际修改,仅供参考,有更好的优化点请指点一下,xx 是敏感信息

stages:- build- build-docker- eagle-deploy.build: # 第一步:安装包,构建代码, 被下面dev prod继承区分环境stage: buildimage: /node:10.15.1tags:- env:testvariables:ARTIFACTS: dist # 构建产物路径,若路径为 artifacts,可以不用配置script:- npm install- npm run build:$BUILD_ENVbefore_script:- echo "打包环境: $BUILD_ENV, 打包分支: $CI_BUILD_REF_NAME" # 分支名cache:untracked: true # 传递所有git没有追踪的文件key: "$CI_BUILD_REF_NAME" paths:- node_modules/artifacts:paths:- node_modules/- dist/build-dev:extends: .buildvariables:BUILD_ENV: devonly: - develop_test- developbuild-prod:extends: .buildvariables:BUILD_ENV: prodonly: - master.build-image: # 第二步:安装包,构建docker镜像 被下面dev prod继承区分环境stage: build-dockervariables:REPO_IMAGE: /${CI_PROJECT_PATH}:${CI_PIPELINE_ID}tags:- eagle.buildscript:- export DOCKER_USER=xx- export DOCKER_TOKEN_BASE64=ZXlKMlpYSWlPaUl5SWl3aWRIbHdJam9pU2xkVUlpd2lZV3huSWpvaVVsTXlOVFlpTENKcmFXUWlPaUpuT1Vad1dXRlRlRXBoVDNSQ1kyVmtSelpxYURoc09TMW1UVE5uYkUxeVFtaFVhVTFqU2pJMU0wbFZJbjAuZXlKemRXSWlPaUpxWm5KMFFEQXhaSGR5YzJOMmVqUm5hREJvTURSemVHSTFZM0V3ZEhFMFhDOTFjMlZ5YzF3dmVHbGxlV0Z1WjJ4cGJtY2lMQ0p6WTNBaU9pSnRaVzFpWlhJdGIyWXRaM0p2ZFhCek9pb2dZWEJwT2lvaUxDSmhkV1FpT2lKcVpuSjBRREF4WkhkeWMyTjJlalJuYURCb01EUnplR0kxWTNFd2RIRTBJaXdpYVhOeklqb2lhbVp5ZEVBd01XUjNjbk5qZG5vMFoyZ3dhREEwYzNoaU5XTnhNSFJ4TkZ3dmRYTmxjbk5jTDJSbGRtOXdjMTlpYjNRaUxDSnBZWFFpT2pFMk1qQXlPVFF3TmpFc0ltcDBhU0k2SW1OaVpqZGlaR0ZrTFRWbE9HRXROR00zTVMwNU1UWTNMVE16T0RJd09UbGhZakUwTmlKOS5HZGtUQ1JtVnNUNy0ySjdXUXhsQXlWSWlabHc4UzdhQ1lZb0xjNEtmOHJMQmFHRjUya0hNRE1UZzVrcGxxbmpnRGQ1enBEcDlGRnBXNWx6N3dBS2pDM21WMHZsY2t6WWdISndfRFAzR0p1Qm5Pem5TdGNOdGs3LWJCdjFncWZBc24xS2RveVFtOENOVGtRV2dpaU1XQ2dKaTBUOXJYMlp3WjhxOGZIZDh1TXVoX3JNQU9OZWx6T1RyYVN1WjR5bTJTdmFySFdmY0V1Q20yeGtGMDRQSE5ROWJvc3VLejBQalNZX2VHTmI1b3A4bW1fZ1huQ2xfSWt2NVRHdzJTQm5sYjhwcVhURFVVQzY2ZUgyVG1vZmpjTmJ2ajR6blExam9Na2doZndMTGxWanFVUGp3dTFVTUxpbER0RmtIbVZ1cXEwc1ZsUUR5Y2p0WTNCTXNpRnhUbmc_- export DOCKER_TOKEN=$(echo "$DOCKER_TOKEN_BASE64" | tr '_' '=' | base64 -d)- docker login -u ${DOCKER_USER} -p ${DOCKER_TOKEN} - export IMAGE=$REPO_IMAGE- echo $IMAGE- docker build -t $IMAGE .- docker push $IMAGEbuild-image-dev:extends: .build-imageonly:- develop_test- developbuild-image-prod:extends: .build-imageonly:- masterrancher-deploy: # 第三步: 测试环境发布,生产只走到第二步,第三步生产是部署在 eagle,让运维手动操作stage: eagle-deployvariables:REPO_IMAGE: /${CI_PROJECT_PATH}:${CI_PIPELINE_ID}image: /rancher-upgrade:29162only:- develop_test- developtags:- eagle.deploy.v3script:- export IMAGE=$REPO_IMAGE- echo $IMAGE- rancher-upgrade --rancher-url http://xx.xx.xx.xxx:8123/v2-beta/projects/1a66/services/1s625 --rancher-key=xxxxx --rancher-secret=xxx --image $IMAGE

如果觉得《部署一个前端项目的基本流程(以angular项目为例docker+ gitlab-ci)》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。