[FIXED] How to deploy angular application using jenkins

Issue

I am trying to deploy an angular application to AWS EC2 instance. I am using bitbucket and Jenkins.

Solution

I have no idea about Jenkins, we do all our building on bitbucket.

So this answer may not directly solve your answer but may be helpful.

It will also depend a lot on your desired AWS configuration. You say EC2 implying you are deploying to a web server. We so do that for one instance but our more normal angular deploy is to S3. Any way I will attempt to show what we have. There are a series of bitbucket steps:

1. choose the destination

 
    deploy_webs_to_non_production:
      - variables:
          - name: TARGET_ENVIRONMENT
            default: "dev"
            allowed-values:
              - "qa"
              - "uat"
              - "test"

2. set up the ENV variables required

 
      - step:
          name: setup env for admin on dev
          image: node:16
          caches:
            - node
          script:
            - CODE_REPO_DIR=standards_ptportal_web_admin
            - S3_BUCKET_LOCATION=portal2-$TARGET_ENVIRONMENT-adm-web.lgcpt.com
            - echo "export TARGET_ENVIRONMENT=$TARGET_ENVIRONMENT" > set_env.sh
            - echo "export S3_BUCKET_LOCATION=$S3_BUCKET_LOCATION" >> set_env.sh
            - echo "export CODE_REPO_DIR=$CODE_REPO_DIR" >> set_env.sh
            - ls
            - pwd
            - cat set_env.sh
          artifacts:
            - set_env.sh

So the next two steps depend on how you deploy to AWS. '3' deploys straight to S3, with all the files indevidually. '4' soulds like more what you want & ZIPs up the files & uploads the ZIP artifact.

3. Build & deploy to AWS S3

 
    - step: &WebGenericBuildTestAndDeployStep
        name: Build and Test common
        image: node:16
        caches:
          - node
        script:
          - # use the artifact from the previous step
          - pwd
          - ls
          - source set_env.sh
          - echo cd $CODE_REPO_DIR
          - pwd
          - echo Building for environment:$TARGET_ENVIRONMENT
          - cd $CODE_REPO_DIR;
          - pwd
          - echo Installing angular cli...
          - npm install -g @angular/cli@$ANGULAR_VERSION
          - echo Installing npm packages...
          - npm ci install
          - node --max_old_space_size=2500 ./node_modules/@angular/cli/bin/ng build --configuration=$TARGET_ENVIRONMENT --prod --output-hashing=all  --outputPath=distdev/$TARGET_ENVIRONMENT
          - echo Building complete for:$TARGET_ENVIRONMENT
          - echo Deploying to environment:$TARGET_ENVIRONMENT to s3_bucket:$S3_BUCKET_LOCATION
          - mkdir artifacts_for_deploy
          - ls
          - ls distdev
          - mv distdev/$TARGET_ENVIRONMENT artifacts_for_deploy
          - pipe: atlassian/aws-s3-deploy:1.1.0
            variables:
              AWS_ACCESS_KEY_ID: $AWS_ACCESS_KEY_ID
              AWS_SECRET_ACCESS_KEY: $AWS_SECRET_ACCESS_KEY
              AWS_DEFAULT_REGION: 'us-west-1'
              S3_BUCKET: $S3_BUCKET_LOCATION
              LOCAL_PATH: 'artifacts_for_deploy/$TARGET_ENVIRONMENT'
              COMMAND: 'upload'
          - echo Deploy complete to environment:$TARGET_ENVIRONMENT to s3_bucket:$S3_BUCKET_LOCATION

4. Upload web ZIP artifact:

 
    - step: &WebProdBuildTestAndDeployStep
        name: Build and Test web for PROD
        image: node:16
        caches:
          - node
        script:
          - # use the artifact from the previous step
          - pwd
          - ls
          - source set_env.sh
          - echo cd $CODE_REPO_DIR
          - pwd
          - echo Building for environment:$TARGET_ENVIRONMENT
          - cd $CODE_REPO_DIR;
          - pwd
          - echo Installing angular cli...
          - npm install -g @angular/cli@$ANGULAR_VERSION
          - echo Installing npm packages...
          - npm ci install
          - node --max_old_space_size=2500 ./node_modules/@angular/cli/bin/ng build --configuration=$TARGET_ENVIRONMENT --prod --output-hashing=all  --outputPath=distdev/$TARGET_ENVIRONMENT
          - echo Building complete for:$TARGET_ENVIRONMENT
          - echo Deploying to environment:$TARGET_ENVIRONMENT to s3_bucket:$S3_BUCKET_LOCATION
          - mkdir artifacts_for_deploy
          - mkdir zip_dir
          - pwd
          - ls
          - ls distdev
          - ls distdev/$TARGET_ENVIRONMENT
          - mv distdev/$TARGET_ENVIRONMENT/* artifacts_for_deploy
          - apt-get update
          - apt-get install zip -y
          - cd artifacts_for_deploy;zip -r ../$WEB_PRODUCT-prod.dist.zip *; cd ..
          - mv $WEB_PRODUCT-prod.dist.zip zip_dir
          - pipe: atlassian/aws-s3-deploy:1.1.0
            variables:
              AWS_ACCESS_KEY_ID: $AWS_ACCESS_KEY_ID
              AWS_SECRET_ACCESS_KEY: $AWS_SECRET_ACCESS_KEY
              AWS_DEFAULT_REGION: 'us-west-1'
              S3_BUCKET: $S3_BUCKET_LOCATION
              LOCAL_PATH: 'zip_dir'
              COMMAND: 'upload'
          - echo Deploy complete to environment:$TARGET_ENVIRONMENT to s3_bucket:$S3_BUCKET_LOCATION

Answered By - Bill Comer
Answer Checked By - Katrina (JavaFixing Volunteer)