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
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.
ng build --prod
This command will create a dist/ folder containing the production-ready code.
Deploying on Google Cloud Platform (GCP)
gcloud auth login
Create a Cloud Storage Bucket:
gsutil mb -p YOUR_PROJECT_ID -l US-CENTRAL1 gs://YOUR_BUCKET_NAME
Deploy Your App:
gsutil rsync -r dist/YOUR_APP_NAME gs://YOUR_BUCKET_NAME
Make the Bucket Public:
gsutil acl ch -u AllUsers:R gs://YOUR_BUCKET_NAME/**
Set Up a Static Website Configuration:
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:
NOTE: This pipeline should be updated according to specific project setup or requirements.
Deploying on AWS S3 with CloudFront
Install AWS CLI:
aws configure
Create an S3 Bucket:
aws s3 mb s3://YOUR_BUCKET_NAME
Upload Files:
aws s3 sync dist/YOUR_APP_NAME s3://YOUR_BUCKET_NAME
Enable Static Website Hosting:
aws s3 website s3://YOUR_BUCKET_NAME --index-document index.html --error-document index.html
Set Up CloudFront (Optional):
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:
NOTE: This pipeline should be updated according to specific project setup or requirements.
Deploying on Microsoft Azure
Install Azure CLI:
az login
Create a Storage Account and Container:
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:
az storage blob upload-batch --destination \$web --account-name YOUR_STORAGE_ACCOUNT --source ./dist/YOUR_APP_NAME
Enable Static Website Hosting:
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:
NOTE: This pipeline should be updated according to specific project setup or requirements.
Deploying on Cloudflare Pages
Login to Cloudflare:
Create a New Project:
Configure Build Settings:
ng build --prod
Deploy:
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:
NOTE: This pipeline should be updated according to specific project setup or requirements.
Deploying on Vercel
Login to Vercel:
Connect Your Repository:
Configure Build Settings:
ng build --prod
Deploy:
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:
NOTE: This pipeline should be updated according to specific project setup or requirements.
Deploying on Firebase Hosting
Install Firebase Tools:
npm install -g firebase-tools
Login to Firebase:
firebase login
Initialize Firebase Hosting:
firebase init
领英推荐
Deploy:
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:
NOTE: This pipeline should be updated according to specific project setup or requirements.
Deploying on GitHub Pages
Install GitHub Pages Angular CLI Plugin:
ng add angular-cli-ghpages
Deploy:
ng deploy --base-href=https://YOUR_USERNAME.github.io/YOUR_REPOSITORY_NAME/
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:
NOTE: This pipeline should be updated according to specific project setup or requirements.
Deploying on Alibaba Cloud
Install the Alibaba CLI:
Create a Bucket:
Upload Your Files:
aliyun oss cp -r ./dist/YOUR_APP_NAME oss://YOUR_BUCKET_NAME/
Enable Static Website Hosting:
Set Permissions:
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:
NOTE: This pipeline should be updated according to specific project setup or requirements.
Deploying on IBM Cloud
Install IBM Cloud CLI:
Create an Object Storage Bucket:
Upload Files:
ibmcloud cos upload --bucket YOUR_BUCKET_NAME --key dist/YOUR_APP_NAME --file ./dist/YOUR_APP_NAME
Enable Static Website Hosting:
Configure Permissions:
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:
NOTE: This pipeline should be updated according to specific project setup or requirements.
Deploying on Oracle Cloud
Install Oracle Cloud CLI:
Create an Object Storage Bucket:
Upload Files:
oci os object bulk-upload --bucket-name YOUR_BUCKET_NAME --src-dir ./dist/YOUR_APP_NAME
Enable Static Website Hosting:
Set Permissions:
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:
NOTE: This pipeline should be updated according to specific project setup or requirements.
Deploying on DigitalOcean
Create a DigitalOcean Space:
Upload Files:
s3cmd sync ./dist/YOUR_APP_NAME s3://YOUR_SPACE_NAME
Enable Static Website Hosting:
Set Permissions:
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:
NOTE: This pipeline should be updated according to specific project setup or requirements.
Deploying on Salesforce (Heroku)
Install Heroku CLI:
Create a New Heroku App:
heroku create YOUR_APP_NAME
Push Your Code to Heroku:
git add . git commit -m "Deploy Angular App" git push heroku master
Serve 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:
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:
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.