Angular Deployment 101

Sehban Alam

Software Engineer (Creating Scalable, Secure, Cloud-Powered Applications that Redefine B2B/B2C User Experiences) | Angular | Firebase | Cloudflare | Material Design | Serverless | MySQL | GCP | AWS

发布日期: 2024年9月26日

A guide to deploy Angular Applications on Major Cloud Platforms

Angular applications, known for their robust architecture and flexibility, can be deployed on several cloud platforms. In this guide, I’ll walk you through how to deploy your Angular app on Google Cloud Platform (GCP), AWS, Azure, Cloudflare Pages, Vercel, Firebase Hosting, and GitHub Pages.

Step 1: Build Your Angular Application

Before deploying your Angular app, you need to build it for production. This step is universal across all platforms.

Open a terminal inside your Angular project directory.
Run the following command to build your app:

ng build --prod

This command will create a dist/ folder containing the production-ready code.

Deploying on Google Cloud Platform (GCP)

Install GCP SDK:

Install the Google Cloud SDK.
After installation, log in using:

gcloud auth login

Create a Cloud Storage Bucket:

Create a new bucket for hosting your app:

gsutil mb -p YOUR_PROJECT_ID -l US-CENTRAL1 gs://YOUR_BUCKET_NAME

Deploy Your App:

Upload the contents of the dist/ folder to your bucket:

gsutil rsync -r dist/YOUR_APP_NAME gs://YOUR_BUCKET_NAME

Make the Bucket Public:

To allow public access, make your files publicly accessible:

gsutil acl ch -u AllUsers:R gs://YOUR_BUCKET_NAME/**

Set Up a Static Website Configuration:

Finally, configure your bucket to serve static content by setting the main HTML file:

gsutil web set -m index.html gs://YOUR_BUCKET_NAME

Jenkinsfile (CI/CD Pipeline)

pipeline {
    agent any
    environment {
        GCP_PROJECT_ID = 'YOUR_PROJECT_ID' // Replace with your GCP project ID
        GCP_BUCKET_NAME = 'YOUR_BUCKET_NAME' // Replace with your Cloud Storage bucket name
        DIST_FOLDER = 'dist/YOUR_APP_NAME' // Replace with your Angular production build folder
        GCP_REGION = 'us-central1' // Specify your GCP region
        GCP_CREDENTIALS = credentials('gcp-credentials') // Store GCP service account key in Jenkins
    }
    stages {
        stage('Install Dependencies') {
            steps {
                script {
                    // Install Angular project dependencies
                    sh '''
                    npm install
                    '''
                }
            }
        }
        stage('GCP Login') {
            steps {
                script {
                    // Authenticate with GCP using the service account key
                    writeFile file: 'gcp-key.json', text: "${GCP_CREDENTIALS}"
                    sh '''
                    gcloud auth activate-service-account --key-file=gcp-key.json
                    gcloud config set project $GCP_PROJECT_ID
                    '''
                }
            }
        }
        stage('Create Cloud Storage Bucket') {
            steps {
                script {
                    // Create Cloud Storage bucket for hosting the app
                    sh '''
                    gsutil mb -p $GCP_PROJECT_ID -l $GCP_REGION gs://$GCP_BUCKET_NAME
                    '''
                }
            }
        }
        stage('Build Angular App') {
            steps {
                script {
                    // Build the Angular app for production
                    sh 'ng build --prod'
                }
            }
        }
        stage('Deploy Your App') {
            steps {
                script {
                    // Upload the dist folder contents to the Cloud Storage bucket
                    sh '''
                    gsutil rsync -r $DIST_FOLDER gs://$GCP_BUCKET_NAME
                    '''
                }
            }
        }
        stage('Make the Bucket Public') {
            steps {
                script {
                    // Make the files in the bucket publicly accessible
                    sh '''
                    gsutil acl ch -u AllUsers:R gs://$GCP_BUCKET_NAME/**
                    '''
                }
            }
        }
        stage('Set Up Static Website Configuration') {
            steps {
                script {
                    // Configure the bucket to serve static content
                    sh '''
                    gsutil web set -m index.html gs://$GCP_BUCKET_NAME
                    '''
                }
            }
        }
    }
    post {
        always {
            echo 'Deployment to Google Cloud Storage completed. Your Angular app is live!'
        }
    }
}

Prerequisites:

GCP Service Account: Store your GCP service account key in Jenkins (gcp-credentials) as a JSON string.
GCP Project ID: Replace YOUR_PROJECT_ID with your GCP project ID.
GCP Bucket Name: Replace YOUR_BUCKET_NAME with your desired Cloud Storage bucket name.
Angular App: Replace YOUR_APP_NAME with your Angular app’s name.

NOTE: This pipeline should be updated according to specific project setup or requirements.

Deploying on AWS S3 with CloudFront

Install AWS CLI:

Install the AWS CLI.
Configure it by running:

aws configure

Create an S3 Bucket:

Create a new bucket to host your app:

aws s3 mb s3://YOUR_BUCKET_NAME

Upload Files:

Upload the dist/ folder contents to the S3 bucket:

aws s3 sync dist/YOUR_APP_NAME s3://YOUR_BUCKET_NAME

Enable Static Website Hosting:

Enable the bucket for website hosting and set up the index.html and error.html files:

aws s3 website s3://YOUR_BUCKET_NAME --index-document index.html --error-document index.html

Set Up CloudFront (Optional):

For better performance, you can use CloudFront as a CDN. Create a new CloudFront distribution with your S3 bucket as the origin.

Jenkinsfile (CI/CD Pipeline)

pipeline {
    agent any
    environment {
        AWS_BUCKET_NAME = 'YOUR_BUCKET_NAME' // Replace with your S3 bucket name
        DIST_FOLDER = 'dist/YOUR_APP_NAME' // Replace with your Angular production build folder
        AWS_REGION = 'us-east-1' // Specify your AWS region
        AWS_CREDENTIALS = credentials('aws-credentials') // Store AWS credentials in Jenkins
    }
    stages {
        stage('Install Dependencies') {
            steps {
                script {
                    // Install Angular project dependencies
                    sh '''
                    npm install
                    '''
                }
            }
        }
        stage('AWS Login') {
            steps {
                script {
                    // Configure AWS CLI using the stored credentials
                    sh '''
                    echo "[default]" > ~/.aws/config
                    echo "aws_access_key_id=${AWS_CREDENTIALS_USR}" >> ~/.aws/config
                    echo "aws_secret_access_key=${AWS_CREDENTIALS_PSW}" >> ~/.aws/config
                    '''
                }
            }
        }
        stage('Create S3 Bucket') {
            steps {
                script {
                    // Create S3 bucket for hosting the app
                    sh '''
                    aws s3 mb s3://$AWS_BUCKET_NAME --region $AWS_REGION
                    '''
                }
            }
        }
        stage('Build Angular App') {
            steps {
                script {
                    // Build the Angular app for production
                    sh 'ng build --prod'
                }
            }
        }
        stage('Upload Files to S3') {
            steps {
                script {
                    // Upload the dist folder contents to the S3 bucket
                    sh '''
                    aws s3 sync $DIST_FOLDER s3://$AWS_BUCKET_NAME
                    '''
                }
            }
        }
        stage('Enable Static Website Hosting') {
            steps {
                script {
                    // Enable static website hosting on the S3 bucket
                    sh '''
                    aws s3 website s3://$AWS_BUCKET_NAME --index-document index.html --error-document index.html
                    '''
                }
            }
        }
        stage('Set Up CloudFront (Optional)') {
            steps {
                script {
                    // Create a CloudFront distribution for the S3 bucket (optional)
                    sh '''
                    aws cloudfront create-distribution --origin-domain-name $AWS_BUCKET_NAME.s3.amazonaws.com --default-root-object index.html
                    '''
                }
            }
        }
    }
    post {
        always {
            echo 'Deployment to AWS S3 completed. Your Angular app is live!'
        }
    }
}

Prerequisites:

AWS Credentials: Store your AWS access key and secret key in Jenkins (aws-credentials) as two separate strings (username for access key and password for secret key).
S3 Bucket Name: Replace YOUR_BUCKET_NAME with your desired S3 bucket name.
Angular App: Replace YOUR_APP_NAME with your Angular app’s name.
AWS Region: Update AWS_REGION if needed.

NOTE: This pipeline should be updated according to specific project setup or requirements.

Deploying on Microsoft Azure

Install Azure CLI:

Install the Azure CLI.
Login using:

az login

Create a Storage Account and Container:

Create a storage account and a container for static website hosting:

az storage account create --name YOUR_STORAGE_ACCOUNT --resource-group YOUR_RESOURCE_GROUP --location eastus --sku Standard_LRS az storage container create --name \$web --account-name YOUR_STORAGE_ACCOUNT --public-access blob

Upload Files:

Upload your dist/ folder contents to the $web container:

az storage blob upload-batch --destination \$web --account-name YOUR_STORAGE_ACCOUNT --source ./dist/YOUR_APP_NAME

Enable Static Website Hosting:

Configure static website hosting for your storage account:

az storage blob service-properties update --account-name YOUR_STORAGE_ACCOUNT --static-website --index-document index.html --error-document index.html

Jenkinsfile (CI/CD Pipeline)

pipeline {
    agent any
    environment {
        AZURE_STORAGE_ACCOUNT = 'YOUR_STORAGE_ACCOUNT' // Replace with your Azure storage account name
        AZURE_RESOURCE_GROUP = 'YOUR_RESOURCE_GROUP' // Replace with your Azure resource group name
        DIST_FOLDER = 'dist/YOUR_APP_NAME' // Replace with your Angular production build folder
        AZURE_LOCATION = 'eastus' // Set the Azure region where your storage account will be created
        AZURE_CREDENTIALS = credentials('azure-credentials') // Store Azure Service Principal credentials in Jenkins
    }
    stages {
        stage('Install Dependencies') {
            steps {
                script {
                    // Install Angular project dependencies
                    sh '''
                    npm install
                    '''
                }
            }
        }
        stage('Azure Login') {
            steps {
                script {
                    // Login to Azure using Service Principal credentials stored in Jenkins
                    sh '''
                    az login --service-principal --username $(echo $AZURE_CREDENTIALS | jq -r '.client_id') --password $(echo $AZURE_CREDENTIALS | jq -r '.client_secret') --tenant $(echo $AZURE_CREDENTIALS | jq -r '.tenant_id')
                    '''
                }
            }
        }
        stage('Create Storage Account and Container') {
            steps {
                script {
                    // Create storage account and container if they don't exist
                    sh '''
                    az storage account create --name $AZURE_STORAGE_ACCOUNT --resource-group $AZURE_RESOURCE_GROUP --location $AZURE_LOCATION --sku Standard_LRS
                    az storage container create --name \$web --account-name $AZURE_STORAGE_ACCOUNT --public-access blob
                    '''
                }
            }
        }
        stage('Build Angular App') {
            steps {
                script {
                    // Build the Angular app for production
                    sh 'ng build --prod'
                }
            }
        }
        stage('Upload Files to Azure') {
            steps {
                script {
                    // Upload the dist folder contents to Azure Blob Storage
                    sh '''
                    az storage blob upload-batch --destination \$web --account-name $AZURE_STORAGE_ACCOUNT --source $DIST_FOLDER
                    '''
                }
            }
        }
        stage('Enable Static Website Hosting') {
            steps {
                script {
                    // Enable static website hosting on Azure Blob Storage
                    sh '''
                    az storage blob service-properties update --account-name $AZURE_STORAGE_ACCOUNT --static-website --index-document index.html --error-document index.html
                    '''
                }
            }
        }
    }
    post {
        always {
            echo 'Deployment to Azure Blob Storage completed.'
        }
    }
}

Prerequisites:

Azure Service Principal: Store the Azure Service Principal credentials in Jenkins (azure-credentials) as a JSON object containing client_id, client_secret, and tenant_id.
Azure Resource Group: Replace YOUR_RESOURCE_GROUP with the name of your Azure resource group.
Azure Storage Account: Replace YOUR_STORAGE_ACCOUNT with your Azure storage account name.
Angular App: Replace YOUR_APP_NAME with your Angular app’s name.

NOTE: This pipeline should be updated according to specific project setup or requirements.

Deploying on Cloudflare Pages

Go to the Cloudflare Pages Dashboard and log in.

Create a New Project:

Create a new project and connect it to your GitHub repository where your Angular app code is stored.

Configure Build Settings:

In the build configuration, set the framework to Angular and the build command to:

ng build --prod

The output directory should be set to dist/YOUR_APP_NAME.

Deploy:

Once the configuration is done, Cloudflare will automatically build and deploy your app whenever you push changes to the repository.

Jenkinsfile (CI/CD Pipeline)

pipeline {
    agent any
    environment {
        GITHUB_REPO = 'YOUR_GITHUB_USERNAME/YOUR_REPOSITORY_NAME' // Replace with your GitHub repository details
        GITHUB_TOKEN = credentials('github-token') // Store GitHub personal access token in Jenkins credentials
        DIST_FOLDER = 'dist/YOUR_APP_NAME' // Replace with your Angular production build folder
    }
    stages {
        stage('Install Dependencies') {
            steps {
                script {
                    // Install Angular dependencies
                    sh '''
                    npm install
                    '''
                }
            }
        }
        stage('Build Angular App') {
            steps {
                script {
                    // Build the Angular app for production
                    sh 'ng build --prod'
                }
            }
        }
        stage('Push Changes to GitHub') {
            steps {
                script {
                    // Add, commit, and push the production build files to the connected GitHub repository
                    sh '''
                    git config --global user.email "[email protected]"
                    git config --global user.name "Jenkins CI"
                    git add .
                    git commit -m "Deploy Angular App to Cloudflare Pages"
                    git push https://$GITHUB_USERNAME:[email protected]/$GITHUB_REPO.git
                    '''
                }
            }
        }
    }
    post {
        always {
            echo 'Changes pushed to GitHub. Cloudflare Pages will automatically deploy the latest build.'
        }
    }
}

Prerequisites:

Cloudflare Pages Setup: Make sure your GitHub repository is connected to Cloudflare Pages for automatic deployment.
GitHub Token: Store your GitHub personal access token in Jenkins credentials (github-token) for committing and pushing changes securely.
GitHub Repository: Replace YOUR_GITHUB_USERNAME and YOUR_REPOSITORY_NAME with your actual GitHub details.

NOTE: This pipeline should be updated according to specific project setup or requirements.

Deploying on Vercel

Go to Vercel and log in.

Connect Your Repository:

Create a new project and connect it to your GitHub, GitLab, or Bitbucket repository.

Configure Build Settings:

Set the build command to:

ng build --prod

The output directory should be dist/YOUR_APP_NAME.

Deploy:

Vercel will automatically deploy your app once it detects changes in your repository.

Jenkinsfile (CI/CD Pipeline)

pipeline {
    agent any
    environment {
        VERCEL_TOKEN = credentials('vercel-token') // Store Vercel personal access token in Jenkins credentials
        DIST_FOLDER = 'dist/YOUR_APP_NAME' // Replace with your Angular production build folder
        GITHUB_REPO = 'YOUR_GITHUB_USERNAME/YOUR_REPOSITORY_NAME' // Replace with your GitHub repository details
        GITHUB_TOKEN = credentials('github-token') // Store GitHub token in Jenkins credentials for pushing code
    }
    stages {
        stage('Install Dependencies') {
            steps {
                script {
                    // Install Angular dependencies
                    sh '''
                    npm install
                    '''
                }
            }
        }
        stage('Build Angular App') {
            steps {
                script {
                    // Build the Angular app for production
                    sh 'ng build --prod'
                }
            }
        }
        stage('Push Changes to GitHub') {
            steps {
                script {
                    // Add, commit, and push the production build files to the connected GitHub repository
                    sh '''
                    git config --global user.email "[email protected]"
                    git config --global user.name "Jenkins CI"
                    git add .
                    git commit -m "Deploy Angular App to Vercel"
                    git push https://$GITHUB_USERNAME:[email protected]/$GITHUB_REPO.git
                    '''
                }
            }
        }
        stage('Trigger Vercel Deployment') {
            steps {
                script {
                    // Trigger Vercel deployment via GitHub push
                    sh '''
                    vercel --token $VERCEL_TOKEN --prod
                    '''
                }
            }
        }
    }
    post {
        always {
            echo 'Deployment to Vercel completed.'
        }
    }
}

Prerequisites:

Vercel Token: Store your Vercel personal access token in Jenkins credentials (vercel-token) to authenticate the Vercel CLI.
GitHub Token: Store your GitHub token in Jenkins credentials (github-token) for pushing to the repository.
GitHub Repository: Ensure that the repository is connected to a Vercel project for automatic deployment. Replace YOUR_GITHUB_USERNAME and YOUR_REPOSITORY_NAME with your actual GitHub details.

NOTE: This pipeline should be updated according to specific project setup or requirements.

Deploying on Firebase Hosting

Install Firebase Tools:

Install Firebase CLI globally:

npm install -g firebase-tools

firebase login

Initialize Firebase Hosting:

Initialize Firebase in your Angular project folder:

firebase init

Select “Hosting” and configure your project. Set the dist/YOUR_APP_NAME folder as the public directory.

领英推荐

Day In The Life Of An AWS Principal Cloud Application…

Swati S. 2 年前

Building Serverless Applications in AWS

Farid Pashayev 2 年前

Building Scalable Applications with AWS Serverless…

Soumyadeep Mandal 1 年前

Deploy:

Deploy your app using the following command:

firebase deploy

Jenkinsfile (CI/CD Pipeline)

pipeline {
    agent any
    environment {
        FIREBASE_PROJECT_ID = 'YOUR_FIREBASE_PROJECT_ID' // Replace with your Firebase project ID
        DIST_FOLDER = 'dist/YOUR_APP_NAME' // Replace with your Angular production build folder
        FIREBASE_SERVICE_ACCOUNT = credentials('firebase-service-account') // Store Firebase service account JSON in Jenkins credentials
    }
    stages {
        stage('Install Dependencies') {
            steps {
                script {
                    // Install Firebase CLI and Angular project dependencies
                    sh '''
                    npm install
                    npm install -g firebase-tools
                    '''
                }
            }
        }
        stage('Login to Firebase') {
            steps {
                script {
                    // Authenticate Firebase CLI using the service account key
                    writeFile file: 'firebase-key.json', text: FIREBASE_SERVICE_ACCOUNT
                    sh '''
                    firebase login:ci --token $(firebase login:ci --json --token "$(cat firebase-key.json)" | jq -r '.refresh_token')
                    '''
                }
            }
        }
        stage('Initialize Firebase (if needed)') {
            steps {
                script {
                    // Initialize Firebase if it's not already initialized
                    sh '''
                    if [ ! -f .firebaserc ]; then
                      echo "Firebase not initialized. Initializing now..."
                      firebase init hosting --project $FIREBASE_PROJECT_ID --public $DIST_FOLDER --token $(cat firebase-key.json | jq -r '.token')
                    else
                      echo "Firebase already initialized."
                    fi
                    '''
                }
            }
        }
        stage('Build Angular App') {
            steps {
                script {
                    // Build the Angular app for production
                    sh 'ng build --prod'
                }
            }
        }
        stage('Deploy to Firebase Hosting') {
            steps {
                script {
                    // Deploy the Angular app to Firebase Hosting
                    sh '''
                    firebase deploy --project $FIREBASE_PROJECT_ID --only hosting --token $(cat firebase-key.json | jq -r '.token')
                    '''
                }
            }
        }
    }
    post {
        always {
            echo 'Deployment to Firebase Hosting completed.'
        }
    }
}

Prerequisites:

Service Account: Store your Firebase service account key (JSON) in Jenkins credentials (firebase-service-account). You can generate a service account from the Firebase Console.
Firebase Project: Replace YOUR_FIREBASE_PROJECT_ID with your actual Firebase project ID.
Angular App: Replace YOUR_APP_NAME with the Angular app's name.

NOTE: This pipeline should be updated according to specific project setup or requirements.

Deploying on GitHub Pages

Install GitHub Pages Angular CLI Plugin:

Install the Angular CLI GitHub Pages deploy tool:

ng add angular-cli-ghpages

Deploy:

Run the following command to deploy your app:

ng deploy --base-href=https://YOUR_USERNAME.github.io/YOUR_REPOSITORY_NAME/

This will automatically deploy your app to GitHub Pages.

Jenkinsfile (CI/CD Pipeline)

pipeline {
    agent any
    environment {
        GITHUB_USERNAME = 'YOUR_USERNAME' // Replace with your GitHub username
        GITHUB_REPO = 'YOUR_REPOSITORY_NAME' // Replace with your GitHub repository name
        BASE_HREF = "https://$GITHUB_USERNAME.github.io/$GITHUB_REPO/"
        GITHUB_TOKEN = credentials('github-token') // Store GitHub Personal Access Token in Jenkins credentials
    }
    stages {
        stage('Install Dependencies') {
            steps {
                script {
                    // Install Angular CLI and the GitHub Pages deploy tool
                    sh '''
                    npm install
                    npm install -g @angular/cli
                    ng add angular-cli-ghpages --defaults
                    '''
                }
            }
        }
        stage('Build Angular App') {
            steps {
                script {
                    // Build the Angular application for production
                    sh 'ng build --prod --base-href $BASE_HREF'
                }
            }
        }
        stage('Deploy to GitHub Pages') {
            steps {
                script {
                    // Deploy the Angular app to GitHub Pages
                    sh '''
                    git config --global user.email "[email protected]"
                    git config --global user.name "Jenkins CI"
                    ng deploy --base-href=$BASE_HREF --repo=https://$GITHUB_USERNAME:[email protected]/$GITHUB_USERNAME/$GITHUB_REPO.git --no-silent
                    '''
                }
            }
        }
    }
    post {
        always {
            echo 'Deployment to GitHub Pages completed.'
        }
    }
}

Prerequisites:

Store your GitHub Personal Access Token (github-token) in Jenkins credentials for secure access.
Replace YOUR_USERNAME and YOUR_REPOSITORY_NAME with your actual GitHub username and repository name.
Ensure your repository has GitHub Pages enabled and is configured to serve content from the gh-pages branch.

NOTE: This pipeline should be updated according to specific project setup or requirements.

Deploying on Alibaba Cloud

Install the Alibaba CLI:

Install the Alibaba CLI.

Create a Bucket:

Upload Your Files:

Upload your dist/ folder files:

aliyun oss cp -r ./dist/YOUR_APP_NAME oss://YOUR_BUCKET_NAME/

Enable Static Website Hosting:

Configure static website hosting by setting the main index.html file in the OSS management console.

Set Permissions:

Ensure your files have public read permissions to make them accessible.

Jenkinsfile (CI/CD Pipeline)

pipeline {
    agent any
    environment {
        BUCKET_NAME = 'YOUR_BUCKET_NAME' // Replace with your Alibaba Cloud OSS bucket name
        DIST_FOLDER = 'dist/YOUR_APP_NAME' // Replace with your Angular production build folder
        REGION = 'YOUR_REGION' // Replace with your Alibaba Cloud region (e.g., 'oss-cn-hangzhou')
        ALIYUN_ACCESS_KEY = credentials('aliyun-access-key') // Store Alibaba Cloud Access Key in Jenkins credentials
        ALIYUN_SECRET_KEY = credentials('aliyun-secret-key') // Store Alibaba Cloud Secret Key in Jenkins credentials
    }
    stages {
        stage('Install Dependencies') {
            steps {
                script {
                    // Install Alibaba CLI and necessary dependencies
                    sh '''
                    curl -Lo aliyun-cli.tgz https://aliyuncli.alicdn.com/aliyun-cli-linux-latest-amd64.tgz
                    tar -xvzf aliyun-cli.tgz
                    mv aliyun /usr/local/bin/
                    npm install
                    '''
                }
            }
        }
        stage('Configure Alibaba Cloud CLI') {
            steps {
                script {
                    // Configure the Alibaba CLI with the provided credentials
                    sh '''
                    aliyun configure set --access-key-id $ALIYUN_ACCESS_KEY --access-key-secret $ALIYUN_SECRET_KEY --region $REGION
                    '''
                }
            }
        }
        stage('Build Angular App') {
            steps {
                script {
                    // Build the Angular app for production
                    sh 'npm run build --prod'
                }
            }
        }
        stage('Create/Check OSS Bucket') {
            steps {
                script {
                    // Check if the bucket exists, and create it if not
                    sh '''
                    if ! aliyun oss ls | grep -q $BUCKET_NAME; then
                        aliyun oss mb oss://$BUCKET_NAME --region $REGION
                    fi
                    '''
                }
            }
        }
        stage('Upload Files to Alibaba Cloud OSS') {
            steps {
                script {
                    // Upload the Angular production build folder to the OSS bucket
                    sh '''
                    aliyun oss cp -r ./$DIST_FOLDER oss://$BUCKET_NAME/
                    '''
                }
            }
        }
        stage('Enable Static Website Hosting') {
            steps {
                script {
                    // Configure the bucket for static website hosting by setting index.html as the entry point
                    sh '''
                    aliyun oss put-bucket-website --bucket-name $BUCKET_NAME --index-document index.html --error-document 404.html
                    '''
                }
            }
        }
        stage('Set Public Permissions') {
            steps {
                script {
                    // Set all files in the bucket to be publicly accessible
                    sh '''
                    aliyun oss set-object-acl oss://$BUCKET_NAME/ --acl public-read --recursive
                    '''
                }
            }
        }
    }
    post {
        always {
            echo 'Deployment to Alibaba Cloud OSS completed.'
        }
    }
}

Prerequisites:

Store your Alibaba Cloud Access Key (aliyun-access-key) and Secret Key (aliyun-secret-key) in Jenkins credentials.
Replace YOUR_BUCKET_NAME, YOUR_APP_NAME, and YOUR_REGION with your actual bucket name, Angular app folder name, and the Alibaba Cloud region.
Ensure that the CLI is installed with correct permissions for interacting with Alibaba Cloud services.

NOTE: This pipeline should be updated according to specific project setup or requirements.

Deploying on IBM Cloud

Install IBM Cloud CLI:

Download and install the IBM Cloud CLI.

Create an Object Storage Bucket:

In the IBM Cloud dashboard, create an Object Storage bucket for hosting.

Upload Files:

Upload the contents of the dist/ folder:

ibmcloud cos upload --bucket YOUR_BUCKET_NAME --key dist/YOUR_APP_NAME --file ./dist/YOUR_APP_NAME

Enable Static Website Hosting:

In the IBM Cloud console, set the bucket as a static website host and define index.html as the entry point.

Configure Permissions:

Ensure the bucket and files are publicly accessible.

Jenkinsfile (CI/CD Pipeline)

pipeline {
    agent any

environment {
        BUCKET_NAME = 'YOUR_BUCKET_NAME' // Replace with your IBM Cloud Object Storage bucket name
        DIST_FOLDER = 'dist/YOUR_APP_NAME' // Replace with your Angular production build folder
        IBM_COS_API_KEY = credentials('ibm-cos-api-key') // Store IBM Cloud Object Storage API key in Jenkins credentials
        IBM_COS_ENDPOINT = 's3.us-south.cloud-object-storage.appdomain.cloud' // Replace with your IBM Cloud Object Storage endpoint
        IBM_COS_INSTANCE_CRN = credentials('ibm-cos-instance-crn') // Store IBM Cloud Object Storage instance CRN in Jenkins credentials
    }
    stages {
        stage('Install Dependencies') {
            steps {
                script {
                    // Install IBM Cloud CLI and necessary dependencies
                    sh '''
                    curl -fsSL https://clis.cloud.ibm.com/install/linux | sh
                    ibmcloud plugin install cloud-object-storage
                    npm install
                    '''
                }
            }
        }
        stage('Login to IBM Cloud') {
            steps {
                script {
                    // Login to IBM Cloud CLI
                    sh '''
                    ibmcloud login --apikey $IBM_COS_API_KEY
                    ibmcloud target -r us-south
                    '''
                }
            }
        }
        stage('Build Angular App') {
            steps {
                script {
                    // Build the Angular app for production
                    sh 'npm run build --prod'
                }
            }
        }
        stage('Create/Check Object Storage Bucket') {
            steps {
                script {
                    // Check if the bucket exists, and create it if not
                    sh '''
                    ibmcloud cos head-bucket --bucket $BUCKET_NAME --region us-south || \
                    ibmcloud cos create-bucket --bucket $BUCKET_NAME --ibm-service-instance-id $IBM_COS_INSTANCE_CRN --region us-south
                    '''
                }
            }
        }
        stage('Upload Files to IBM Cloud Object Storage') {
            steps {
                script {
                    // Upload the Angular production build folder to IBM Cloud Object Storage
                    sh '''
                    ibmcloud cos upload --bucket $BUCKET_NAME --key $DIST_FOLDER --file ./$DIST_FOLDER --region us-south --recursive
                    '''
                }
            }
        }
        stage('Enable Static Website Hosting') {
            steps {
                script {
                    // Enable static website hosting for the bucket
                    sh '''
                    ibmcloud cos put-bucket-website --bucket $BUCKET_NAME --region us-south --website-configuration '{"index_document":{"suffix":"index.html"},"error_document":{"key":"404.html"}}'
                    '''
                }
            }
        }
        stage('Set Public Permissions') {
            steps {
                script {
                    // Set all files in the bucket to be publicly accessible
                    sh '''
                    ibmcloud cos put-bucket-acl --bucket $BUCKET_NAME --region us-south --acl public-read
                    '''
                }
            }
        }
    }
    post {
        always {
            echo 'Deployment to IBM Cloud Object Storage completed.'
        }
    }
}

Prerequisites:

Store your IBM Cloud API Key (ibm-cos-api-key) and Cloud Object Storage instance CRN (ibm-cos-instance-crn) in Jenkins credentials.
Replace YOUR_BUCKET_NAME, YOUR_APP_NAME, and IBM_COS_ENDPOINT with your actual values.

NOTE: This pipeline should be updated according to specific project setup or requirements.

Deploying on Oracle Cloud

Install Oracle Cloud CLI:

Install the Oracle Cloud CLI.

Create an Object Storage Bucket:

In Oracle Cloud, create an Object Storage bucket to store your app files.

Upload Files:

Upload the dist/ folder contents using the following command:

oci os object bulk-upload --bucket-name YOUR_BUCKET_NAME --src-dir ./dist/YOUR_APP_NAME

Enable Static Website Hosting:

Configure the bucket for static website hosting and set index.html as the default page.

Set Permissions:

Make the objects in the bucket publicly accessible to allow users to access the application.

Jenkinsfile (CI/CD Pipeline)

pipeline {
    agent any

environment {
        BUCKET_NAME = 'YOUR_BUCKET_NAME' // Replace with your Oracle Cloud bucket name
        DIST_FOLDER = 'dist/YOUR_APP_NAME' // Replace with your Angular production build folder
        OCI_REGION = 'YOUR_OCI_REGION' // Replace with your Oracle Cloud region
        OCI_TENANCY_OCID = credentials('oci-tenancy-ocid') // Store your Oracle Cloud Tenancy OCID in Jenkins credentials
        OCI_USER_OCID = credentials('oci-user-ocid') // Store your Oracle Cloud User OCID in Jenkins credentials
        OCI_COMPARTMENT_OCID = credentials('oci-compartment-ocid') // Store your Oracle Cloud Compartment OCID in Jenkins credentials
        OCI_KEY_FINGERPRINT = credentials('oci-key-fingerprint') // Store your Oracle Cloud key fingerprint in Jenkins credentials
        OCI_PRIVATE_KEY_PATH = '/path/to/your/private/key.pem' // Replace with the path to your private key file
    }
    stages {
        stage('Install Dependencies') {
            steps {
                script {
                    // Install Oracle Cloud CLI and necessary dependencies
                    sh '''
                    sudo yum install -y python36 python36-oci-cli
                    npm install
                    '''
                }
            }
        }
        stage('Build Angular App') {
            steps {
                script {
                    // Build the Angular app for production
                    sh 'npm run build --prod'
                }
            }
        }
        stage('Configure Oracle CLI') {
            steps {
                script {
                    // Set up the Oracle Cloud CLI configuration
                    sh '''
                    mkdir -p ~/.oci
                    cat <<EOT >> ~/.oci/config
                    [DEFAULT]
                    user=$OCI_USER_OCID
                    fingerprint=$OCI_KEY_FINGERPRINT
                    key_file=$OCI_PRIVATE_KEY_PATH
                    tenancy=$OCI_TENANCY_OCID
                    region=$OCI_REGION
                    compartment=$OCI_COMPARTMENT_OCID
                    EOT
                    '''
                }
            }
        }
        stage('Create/Check Bucket') {
            steps {
                script {
                    // Check if the bucket exists, and create it if necessary
                    sh '''
                    oci os bucket get --bucket-name $BUCKET_NAME --compartment-id $OCI_COMPARTMENT_OCID || oci os bucket create --bucket-name $BUCKET_NAME --compartment-id $OCI_COMPARTMENT_OCID
                    '''
                }
            }
        }
        stage('Upload Files to Oracle Cloud Object Storage') {
            steps {
                script {
                    // Upload the contents of the Angular production build folder to Oracle Cloud Object Storage
                    sh '''
                    oci os object bulk-upload --bucket-name $BUCKET_NAME --src-dir ./$DIST_FOLDER --overwrite
                    '''
                }
            }
        }
        stage('Enable Static Website Hosting') {
            steps {
                script {
                    // Configure the bucket for static website hosting
                    sh '''
                    oci os bucket update --bucket-name $BUCKET_NAME --compartment-id $OCI_COMPARTMENT_OCID --force --public-access-type ObjectRead --metadata '{"indexPage":"index.html","errorPage":"404.html"}'
                    '''
                }
            }
        }
        stage('Set Public Permissions') {
            steps {
                script {
                    // Set permissions to make all files in the bucket publicly accessible
                    sh '''
                    oci os object set-acl --bucket-name $BUCKET_NAME --object-name "index.html" --acl public-read
                    oci os object set-acl --bucket-name $BUCKET_NAME --object-name "404.html" --acl public-read
                    '''
                }
            }
        }
    }
    post {
        always {
            echo 'Deployment pipeline to Oracle Cloud Object Storage completed.'
        }
    }
}

Prerequisites:

Create an Oracle Cloud Object Storage bucket.
Store the Oracle Cloud credentials (Tenancy OCID, User OCID, Compartment OCID, Key Fingerprint) in Jenkins credentials.
Ensure you have a private key for Oracle Cloud CLI authentication and store it securely on your Jenkins server.
Replace YOUR_BUCKET_NAME, YOUR_APP_NAME, YOUR_OCI_REGION, and the private key path with your actual values.

NOTE: This pipeline should be updated according to specific project setup or requirements.

Deploying on DigitalOcean

Create a DigitalOcean Space:

In the DigitalOcean dashboard, create a new Space (DigitalOcean’s object storage).

Upload Files:

Upload the contents of your dist/ folder to your Space via the web interface or use the s3cmd tool:

s3cmd sync ./dist/YOUR_APP_NAME s3://YOUR_SPACE_NAME

Enable Static Website Hosting:

In the Space settings, enable static site hosting and set index.html as the entry point.

Set Permissions:

Ensure all files are publicly accessible.

Jenkins File (CI/CD Pipeline)

pipeline {
    agent any

    environment {
        SPACE_NAME = 'YOUR_SPACE_NAME' // Replace with your DigitalOcean Space name
        S3_ENDPOINT = 'nyc3.digitaloceanspaces.com' // Replace with your Space region endpoint
        DIST_FOLDER = 'dist/YOUR_APP_NAME' // Replace with your Angular production build folder
        ACCESS_KEY = credentials('do-space-access-key') // Store your DigitalOcean access key as a Jenkins credential
        SECRET_KEY = credentials('do-space-secret-key') // Store your DigitalOcean secret key as a Jenkins credential
    }

    stages {
        stage('Install Dependencies') {
            steps {
                script {
                    // Install required tools like s3cmd
                    sh '''
                    apt-get update
                    apt-get install -y s3cmd
                    npm install
                    '''
                }
            }
        }

        stage('Build Angular App') {
            steps {
                script {
                    // Build the Angular app for production
                    sh 'npm run build --prod'
                }
            }
        }

        stage('Configure s3cmd') {
            steps {
                script {
                    // Configure s3cmd for DigitalOcean Spaces using environment variables
                    sh '''
                    cat <<EOT >> ~/.s3cfg
                    [default]
                    access_key = $ACCESS_KEY
                    secret_key = $SECRET_KEY
                    host_base = $S3_ENDPOINT
                    host_bucket = $S3_ENDPOINT
                    bucket_location = nyc3
                    use_https = True
                    EOT
                    '''
                }
            }
        }

        stage('Upload Files to DigitalOcean Space') {
            steps {
                script {
                    // Sync the production build files to DigitalOcean Space
                    sh '''
                    s3cmd sync ./$DIST_FOLDER/ s3://$SPACE_NAME --acl-public --delete-removed
                    '''
                }
            }
        }

        stage('Enable Static Website Hosting') {
            steps {
                script {
                    // Enable static website hosting via s3cmd
                    sh '''
                    s3cmd ws-create s3://$SPACE_NAME --ws-index=index.html --ws-error=404.html
                    '''
                }
            }
        }

        stage('Set Public Permissions') {
            steps {
                script {
                    // Set all files in the Space to be publicly accessible
                    sh '''
                    s3cmd setacl s3://$SPACE_NAME --acl-public --recursive
                    '''
                }
            }
        }
    }

    post {
        always {
            echo 'Deployment pipeline to DigitalOcean Spaces completed.'
        }
    }
}

Prerequisites:

Create your DigitalOcean Space in advance.
Store your DigitalOcean access and secret keys as Jenkins credentials (do-space-access-key and do-space-secret-key).
Replace YOUR_SPACE_NAME and YOUR_APP_NAME with your actual Space name and Angular app name in the pipeline.

NOTE: This pipeline should be updated according to specific project setup or requirements.

Deploying on Salesforce (Heroku)

Install Heroku CLI:

Install the Heroku CLI.

Create a New Heroku App:

Initialize a new Heroku app:

heroku create YOUR_APP_NAME

Push Your Code to Heroku:

Commit your production build files (dist/) and push them to Heroku:

git add . git commit -m "Deploy Angular App" git push heroku master

Serve Angular App with Node.js:

Create a simple server.js file to serve your Angular app with Node.js:

const express = require('express'); const app = express(); const path = require('path');  app.use(express.static(__dirname + '/dist/YOUR_APP_NAME'));  app.get('/*', function(req, res) {   res.sendFile(path.join(__dirname + '/dist/YOUR_APP_NAME/index.html')); });  app.listen(process.env.PORT || 8080);

Deploy:

Once pushed, Heroku will automatically deploy the app. You can check the app via the Heroku domain provided.

Jenkinsfile (CI/CD Pipeline)

pipeline {
    agent any

    environment {
        HEROKU_API_KEY = credentials('heroku-api-key') // Assuming you store your Heroku API key as a Jenkins secret
        HEROKU_APP_NAME = 'YOUR_APP_NAME' // Replace with your Heroku app name
        NODE_ENV = 'production'
    }

    stages {
        stage('Install Dependencies') {
            steps {
                script {
                    // Install Heroku CLI and dependencies
                    sh '''
                    curl https://cli-assets.heroku.com/install.sh | sh
                    npm install
                    '''
                }
            }
        }

        stage('Create/Check Heroku App') {
            steps {
                script {
                    // Create a new Heroku app if it doesn't exist
                    sh '''
                    if ! heroku apps:info -a $HEROKU_APP_NAME; then
                        heroku create $HEROKU_APP_NAME
                    fi
                    '''
                }
            }
        }

        stage('Build Angular App') {
            steps {
                script {
                    // Build the Angular app
                    sh 'npm run build --prod'
                }
            }
        }

        stage('Set Up Node Server') {
            steps {
                // Write the Node.js server configuration
                writeFile file: 'server.js', text: '''
                const express = require('express');
                const app = express();
                const path = require('path');
                
                app.use(express.static(__dirname + '/dist/YOUR_APP_NAME'));

                app.get('/*', function(req, res) {
                  res.sendFile(path.join(__dirname + '/dist/YOUR_APP_NAME/index.html'));
                });

                app.listen(process.env.PORT || 8080);
                '''
            }
        }

        stage('Commit & Push to Heroku') {
            steps {
                script {
                    // Initialize Git, add, commit, and push to Heroku master branch
                    sh '''
                    git init
                    git add .
                    git commit -m "Deploy Angular App"
                    heroku git:remote -a $HEROKU_APP_NAME
                    git push heroku master -f
                    '''
                }
            }
        }
    }

    post {
        always {
            echo 'Pipeline completed.'
        }
    }
}

Prerequisites:

Store your Heroku API key in Jenkins credentials as heroku-api-key.
Replace YOUR_APP_NAME in the HEROKU_APP_NAME and server.js sections with your actual app name.

NOTE: This pipeline should be updated according to specific project setup or requirements.

Conclusion

Deploying an Angular app on cloud platforms requires some understanding of each platform’s hosting services. However, once you grasp the general principles — building your app, configuring the platform, and uploading your production files — you can deploy your Angular app on any of these platforms with ease. With this comprehensive guide, you’re now equipped to deploy your Angular applications across a variety of cloud platforms.

要查看或添加评论，请登录

Sehban Alam的更多文章

Mastering Firebase’s Firestore Security

2024年10月1日

Mastering Firebase’s Firestore Security

Advanced Rules, Permissions, and RBAC Simplified Introduction Firebase Firestore is a powerful cloud-based NoSQL…
Firebase and Angular: The Ultimate Bromance in Web Development

2024年10月1日

Firebase and Angular: The Ultimate Bromance in Web Development

In the bustling, ever-evolving world of web development, few relationships stand the test of time. But there’s one duo…
Google Cloud vs Firebase: A Battle of Clouds, Databases, and Developer Sanity

2024年9月30日

Google Cloud vs Firebase: A Battle of Clouds, Databases, and Developer Sanity

Introduction When choosing cloud infrastructure for modern applications, two Google offerings often come up — Google…
Unlock the Power of CI/CD

2024年9月25日

Unlock the Power of CI/CD

Streamline Your DevOps Workflow In the fast-paced world of software development, efficiency and speed are paramount…
Unlocking DevOps

2024年9月25日

Unlocking DevOps

A Beginner’s Roadmap to Seamless Collaboration and Continuous Delivery. Introduction to DevOps In today’s fast-paced…
Mastering Modular Architecture in Angular

2024年9月23日

Mastering Modular Architecture in Angular

As Angular applications grow in size and complexity, organizing the code efficiently becomes a critical challenge…
Mistakes I Made as a Beginner Angular Developer

2024年9月23日

Mistakes I Made as a Beginner Angular Developer

Starting out with Angular can be a challenging yet rewarding journey. As a beginner, I made several mistakes that were…
TypeScript Design Mastery: Patterns Unlocked

2024年9月23日

TypeScript Design Mastery: Patterns Unlocked

Design patterns are tried and tested solutions to common problems in software design. In TypeScript, design patterns…
Static Site Generation (SSG) in Angular with Angular Internationalization (i18n) and Prerendering

2024年9月23日

Static Site Generation (SSG) in Angular with Angular Internationalization (i18n) and Prerendering

With the increasing demand for fast, SEO-friendly web applications, Static Site Generation (SSG) has become an…

4 条评论
Serverless Architecture: Hype or the Future of Web Development?

2024年9月17日

Serverless Architecture: Hype or the Future of Web Development?

Serverless architecture is everywhere. You can’t attend a tech conference, scroll through a developer forum, or even…

See all articles

Step 1: Build Your Angular Application

Deploying on Google Cloud Platform (GCP)

Jenkinsfile (CI/CD Pipeline)

Prerequisites:

Deploying on AWS S3 with CloudFront

Jenkinsfile (CI/CD Pipeline)

Prerequisites:

Deploying on Microsoft Azure

Jenkinsfile (CI/CD Pipeline)

Prerequisites:

Deploying on Cloudflare Pages

Jenkinsfile (CI/CD Pipeline)

Prerequisites:

Deploying on Vercel

Jenkinsfile (CI/CD Pipeline)

Prerequisites:

Deploying on Firebase Hosting

领英推荐

Jenkinsfile (CI/CD Pipeline)

Prerequisites:

Deploying on GitHub Pages

Jenkinsfile (CI/CD Pipeline)

Prerequisites:

Deploying on Alibaba Cloud

Jenkinsfile (CI/CD Pipeline)

Prerequisites:

Deploying on IBM Cloud

Jenkinsfile (CI/CD Pipeline)

Prerequisites:

Deploying on Oracle Cloud

Jenkinsfile (CI/CD Pipeline)

Prerequisites:

Deploying on DigitalOcean

Jenkins File (CI/CD Pipeline)

Prerequisites:

Deploying on Salesforce (Heroku)

Jenkinsfile (CI/CD Pipeline)

Prerequisites:

Conclusion

Sehban Alam的更多文章

Mastering Firebase’s Firestore Security

Firebase and Angular: The Ultimate Bromance in Web Development

Google Cloud vs Firebase: A Battle of Clouds, Databases, and Developer Sanity

Unlock the Power of CI/CD

Unlocking DevOps

Mastering Modular Architecture in Angular

Mistakes I Made as a Beginner Angular Developer

TypeScript Design Mastery: Patterns Unlocked

Static Site Generation (SSG) in Angular with Angular Internationalization (i18n) and Prerendering

Serverless Architecture: Hype or the Future of Web Development?

社区洞察

其他会员也浏览了

Automating the Launch and Update of a Website Using Cloud Run and GitHub Actions: Part 2

Mastering Serverless Computing for Web Development

Project #1 — AWS Portfolio Website

Secure Three-Tier Web Application with GitHub Actions CI/CD, S3 Hosting, Deployment to Dev and Prod Servers, and Comprehensive Monitoring

Automate Your Django Deployment: GitHub Actions, Docker, AWS EC2, Redis, Celery, ElasticSearch, PostgreSQL

Heroku Free Tier Alternatives

Deploying a MERN Stack Application on AWS with Route 53 and Load Balancing: A Complete Guide

Benefits of Serverless Computing - GCP

Serverless websites on AWS using Lambda and API Gateway - part 1

Top 5 AWS Services You're Not Using—But Should Be