Skip to content

Build Ipe For Dev and Prod

Jump to bottom
WindBeneathYourWings edited this page Dec 29, 2021 · 28 revisions

Summary

This document will explain how to build and deploy the ipe project to dev and production aws environments. The document will also serve as a reference to deploy other independent projects using druid and even angular in general.

concepts

  • Deploy client-side Angular app on s3 / cdn and cloudfront edge distribution
  • Deploy Universal express Angular app on lambda with api gateway using serverless framework
  • Connecting Universal express app with client-side optimized cdn static build files.

technologies:

Architecture

Some background information on how the deployment is structured. The application is broken up into a express application and client side application. The client-side assets including all the JavaScript files will be placed on s3. There is a cloudfront edge distribution that makes those files publicly available. The application can run from the cloudfront distribution domain. However, doing so limits the application to only running in the browser. The second part of the deployment deploys a universal express application as a lambda. This enables the application to served from a lambda using server-side rendering for search optimization and supporting permalinks with preview content since the initial pages content will be physically rendered onto the page as html. Serving static assets from s3 significantly optimizes the application in contract to regenerating those assets with the lambda each and every time. The application also seems to run much more efficiently using cdn tom serve the assets linked to in the html responsible for the modern single page experience. Also this structure is not specific to druid. This structure could be used for any Angular application. Nothing is really tied directly to druid just deploying an universal angular application in the simplest, scalable, cost-effective, optimized and flexible manor that I could come up with.

Local Build

Clone github repo

git clone [email protected]:ng-druid/platform.git druid

Install npm dependencies

cd druid
npm install

Build druid core libraries

cd bin
chmod +x build.sh
./build.sh

Build client, server, and lambda application. Replace xxx with cloudfront distribution for client assets.

ng run ipe:build --deployUrl="https://xxx.cloudfront.net/"
ng run ipe:server --deployUrl="https://xxx.cloudfront.net/"
ng run ipe:lambda:dev  --deployUrl="https://xxx.cloudfront.net/"

AWS

The next part of this is to login to the target (dev or prod) AWS account.

AWS s3

https://aws.amazon.com/s3/

Navigate to s3. The bucket differs per environment. In dev the bucket is classifieds-ui-dev and prod its classifieds-ui-prod. Inside the bucket is a directory called apps. Inside that directory is a directory named ipe. Under the ipe directory is all the releases. The releases are named by the date of the release. Create a new directory for a release. Upload ONLY the client build files inside dist/ipe excluding the server and lambda directory if it exists inside the distribution. Copy the name of the new release directory.

AWS Cloudfront

https://aws.amazon.com/cloudfront/

Navigate to cloudfront. Edit the distribution origin serving the current ipe release. Replace the previous release directory with the one that have been copied. Save the origin.

The distribution status will change to pending as it updates cloud resources. Once the distribution status is complete it will be enabled. Once the distribution is enabled navigate to the invalidations tab. Create a new invalidation for files on the distribution using the pattern "/*".

NOTE: I think that the static assets could be served directly from an s3 bucket instead. This would eliminate the need for cloudfront. Eliminating the need to cloudfront could also ptenetial eliminate the need for a vpc. The majority of costs associated with aws is for the vpc. Eliminating the vpc would provide significant cost reduction.

Serverless Framework

https://www.serverless.com/

AWS services indirectly used:

The current manual modification process is now complete for aws. The last thing to do is upload the lambda to serve the univeral express angular application. To do this requires install serverless framework. Serverless framework should be install globally. After srverless express framework is installed a single command will deploy the lambda.

serverless deploy

Serverless framework setup includes configuring for the target aws environment.

CI/CD

With all this mind and working fairly well. The next step will be to further automate the deployment process. Most likely this will be done using github actions. It is important though to list in detail the entire process to have an understanding of how this can all be moved to an automated deployment mechanism. One that could potentially be reused or extended for other druid applications.

Clone this wiki locally