How To Upload Files To Google Bucket From Angular 6

This is a guest post written by Suren Konathala. "My mission is to simplify technology adoption for organizations. I'm a developer, architect, consultant and managing director. I dearest to write and talk about engineering science. Connect with me on LinkedIn or Twitter."

Athwart is i of the most widely used javascript frameworks. Merely though the builds are easy, developers face issues when configuring deployments and setting up CI/CD pipelines. This post outlines the steps required to deploy an Angular application to a Google VM using Bitbucket Pipelines.

What are Pipelines?

Bitbucket Pipelines allows developers to configure continuous delivery (in the deject) of source files to examination/product servers. These pipelines are configured to connect to the production server using YML scripts.

Why I used Pipelines?

For users to be able to access the application, the source lawmaking needs to be deployed to a server. The server from which the spider web awarding is rendered/delivered to users is chosen a Production server. And before the application reaches the production server, it goes through many iterations of development and testing. These iterations are usually deployed to a Evolution server or a Stage server.

For an application to exist deployed to each of the above servers, at that place are several steps involved that tin can get cumbersome.

• Copy the code files to the server
• Run the build and deploy scripts
• Repeat the aforementioned on each server. Sometimes teams have multiple servers for each stage.

Okay! The above has been automated to some extent by tools similar Jenkins merely the drawback is that developers/admins have to install another software on top of their servers, and learn to utilise and administer it.

Pipelines simplifies the above process, and in fact automates the entire build and deploy process ? also known as CI/CD (Continuous Integration / Continuous Deployment). The best part with Bitbucket Pipelines is that applications tin can be built and deployed directly from the Bitbucket repository to any destination server.

The entire copy, build and deploy procedure can be defined using unproblematic YAML based scripts without the need for any boosted software or a solution. All we need to do is to pick the docker image (like NodeJs, Java, etc.) for the pipeline to employ to build your project and select the frequency (east.grand. transmission, or automatically when files are updated in the source repository). This saves a lot of fourth dimension and resource for teams and organizations.

Tutorial: Configure an Angular Project on Bitbucket

This tutorial covers how to deploy an Angular based web awarding to a Google Cloud Virtual Machine (VM). Source lawmaking for the application is in a Bitbucket repository and this VM volition demand to be connected to using SSH security keys.

Pre-requisites

• External server (or VM) with private and public SSH keys. This will the hosting machine for the website or web application.
• Repository on Bitbucket with project sources files. These volition exist used to build & deploy to the server.

Pace 1: Setup SSH Keys

Nether Bitbucket > Project source repository > Settings > Pipelines > SSH Keys

Add private and public keys. You need to get these from the external server that you lot need to connect to.

Add Known hosts (this volition be the IP accost of the external server you desire to push button the code to. In our example, we used a VM on Google Cloud)

Stride ii: Define the YML deployment script

Become to Project source repository > Pipelines > New pipeline and define the script. Here is an instance script:

          # Sample build file # @author Suren Konathala # ----- image: node:8 pipelines:   default: - step:      caches:        - node      script: # Modify the commands below to build your repository.        - repeat "$(ls -la)"        - npm install        - npm install -one thousand @athwart/cli        - ng build --prod        - echo "$(ls -la dist/)"        - scp -r dist/ user@34.73.227.137:/projects/commerce1        

The above script performs the required commands/steps to build an Athwart project. Once done, it pushes/deploys the contents of the build files nether the dist binder to an external server.

In this case, we used an SCP command to push code to an external server. Since the SSH keys are already ready in step 1 above, your local repo can now connect to the server and copy the files over.

Stride three: Run the pipeline

Save and "run the pipeline". You tin run across the running log and status of the pipeline.

On successful completion, you can verify if the files actually being copied to the external server by either by testing your alive application and checking if the latest updates are reflected or you tin can manually check if the files on the server were updated (no demand to do this for every push).

Troubleshooting/Info

To update NodeJS version in the pipeline.. change the version of the docker node image to node:eight in the YML script.

          image: node:eight        

To know what binder you are in and what files are being generated, you can use echo commands. Some examples..

          echo "Starting the deployment.."        

          echo "$(ls -la)"        

This postal service shows how to add SSH Keys on a Linux server/VM.

The source files for this project are shared here.

Learn more near building Angular projects hither.

Love sharing your technical expertise? Acquire more about the Bitbucket writing program.

Source: https://bitbucket.org/blog/deploying-an-angular-app-on-a-google-vm-using-bitbucket-pipelines

Posted by: leeagnsur.blogspot.com

Share this post