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

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

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

ng build --prod

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

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

3.项目部署有各种各样的工具,每种工具或是自动部署,或是手动部署,不过都是换汤不换药,本质上还是一回事,具体的细节还在摸索中
(https://www.zhihu.com/question/20790576)
4.最近摸索出来的发布脚本,亲测可以,步骤大同小异,不同环境脚本肯定要根据实际修改,仅供参考,有更好的优化点请指点一下,xx 是敏感信息

stages:
  - build
  - build-docker
  - eagle-deploy

.build:    # 第一步:安装包,构建代码, 被下面dev prod继承区分环境
  stage: build
  image: docker.xx.com.cn/node:10.15.1
  tags:
    - env:test
  variables:
    ARTIFACTS: dist    # 构建产物路径，若路径为 artifacts，可以不用配置
  script:
    - npm install
    - npm run build:$BUILD_ENV
  before_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: .build
  variables:
    BUILD_ENV: dev
  only: 
    - develop_test
    - develop

build-prod:
  extends: .build
  variables:
    BUILD_ENV: prod
  only: 
    - master
  

.build-image:  # 第二步:安装包,构建docker镜像 被下面dev prod继承区分环境
  stage: build-docker
  variables:
    REPO_IMAGE: docker2.xx.com.cn/${CI_PROJECT_PATH}:${CI_PIPELINE_ID}
  tags:
    - eagle.build
  script:
    - 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} docker2.xx.com.cn
    - export IMAGE=$REPO_IMAGE
    - echo $IMAGE
    - docker build -t $IMAGE .
    - docker push $IMAGE

build-image-dev:
  extends: .build-image
  only:
    - develop_test
    - develop

build-image-prod:
  extends: .build-image
  only:
    - master


rancher-deploy:  # 第三步: 测试环境发布,生产只走到第二步,第三步生产是部署在 eagle,让运维手动操作
  stage: eagle-deploy
  variables:
    REPO_IMAGE: docker2.xx.com.cn/${CI_PROJECT_PATH}:${CI_PIPELINE_ID}
  image: docker.xx.com.cn/rancher-upgrade:29162
  only:
    - develop_test
    - develop
  tags:
    - eagle.deploy.v3
  script:
    - 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