Explore

Add a new SPA

Every SPA in our repository have to make done some tasks before release every change on each environment. The workflow allows us to coordinate these tasks with other project to ensure the pull request, compilation and finally deployment, happens in the correct moment.

Continuos integration: we use this phase to verify the code developed before merge.

Continuos delivery: we use this phase to build the distribution files, create a docker image with them and finally deploy the image to ECR.

Continuos deployment: we use this phase to create a new Kubernetes Job that deploys the new docker image to push the distribution files into S3 and invalidate the cloud front cache. Argocd allow us to execute this job after all services are deployed.

We use a docker image to save the distribution files because this allows us to guarantee the SPA version works with the other services in the configuration as well when each feature was developed.

Requirements

⁠

manypkg⁠

installed globally.

Access to edit the monorepo repository.

Access to edit the argocd repository.

Access to create new Elastic Container Repository in AWS

(optional) AWS CLI command line tool installed and configured.

(optional) Docker installed.

Procedure

To prepare the process follow the next steps:

Create a new ECR repository to store the SPA docker images that will be generated.

Add new ECR repository⁠

Move or creates the new SPA code folder into de apps folder in the monorepo repository. If you copy those files from another repository, delete the .git and .github folder. If that repository was using eslint, you have to delete those dependencies from the pakcage.json file.

From the root of the repository install the dependencies. Then, use “manypkg” command to prevent to use different versions of the same packages with other projects. Finally, reinstall the dependencies.

> npm i

> manypkg check

> sudo manypkg fix

From the root of the new SPA folder, rename or delete the package-lock.json file. Then create a copy of .env file named .env.production.

Test the lint command and highlighting of your text editor.

Test the application development environment.

Rename the build script command to build:front on the package.json file. Then create a new build script command with the name of the ECR repository.

...

"scripts": {

"lint": "npx eslint --ext .js,.vue ./src",

"serve": "vue-cli-service serve",

"build": "../../scripts/containerBuilder.sh -r doctores-spa -n {args.n}",

"build:front": "vue-cli-service build"

...

Test the build:front script command. If you have AWS CLI configurated and docker installed, test the build command and make sure the image is created on ECR.

Review the changes and commit into a new branch.

Continuous integration

Push the new branch to the remote origin and then make a pull request to the main branch. This will trigger the mainCI github action and the lint command of this new project will be executed.

Make sure there are no errors on github actions pull request resumen.

Continuous delivery

Approve the changes that has been made on continuos integration process and make sure the stCD action is triggered creating the new image in ECR. Take note of the version tag.

On argocd repository, there are some configurations for each environment under overlays folder. Edit the staging and production kustomization.yaml file on each environment to add the new image repository and the version tag.

# overlays/staging/kustomization.yaml

...

images:

- name: 350572149155.dkr.ecr.us-east-1.amazonaws.com/doctores-spa

newTag: "st1707835434"

...

Make a change on the new SPA on repository main branch. The stCD action will be triggered and at the end of the action process, check the change on argocd repository staging kustomization file. The image tag has to be changed.

Continuos deployment

Into staging overlay folder into argocd respository, use the 0-spas-config.env file to add the s3 bucket where the spa will be deployed and add the cloudfront id that the cache has to be invalidated. Use a descriptive name for the new environment configs.

# overlays/staging/0-spas-config.env

DOCTORES_SPA_CLOUDFRONT_ID=E1PBXJMWZ16BW6

DOCTORES_SPA_S3_BUCKET=s3://doctores.1doc3.com

Into base jobs folder create a new job specification with de following content and replace the name and the image URL and environment variables that will be used. Use a valid image tag to create this first version.

# base/jobs/doctores-spa.yaml

apiVersion: batch/v1

kind: Job

metadata:

annotations:

argocd.argoproj.io/sync-wave: "2"

spec:

template:

spec:

serviceAccountName: my-service-account

containers:

- name: doctores-spa-deployer

image: 350572149155.dkr.ecr.us-east-1.amazonaws.com/doctores-spa:st1706807041

envFrom:

- configMapRef:

command: ["/bin/sh", "-c"]

args:

- |

echo $DOCTORES_SPA_S3_BUCKET $DOCTORES_SPA_CLOUDFRONT_ID

aws s3 sync ./dist $DOCTORES_SPA_S3_BUCKET

aws cloudfront create-invalidation --distribution-id $DOCTORES_SPA_CLOUDFRONT_ID --paths "/*"

restartPolicy: Never

backoffLimit: 4

Into staging overlay folder edit the kustomization file to add the previews job specification and add a patch to edit the name of the job. This patch ensures all jobs will have different names for each of its versions.

resources:

- ../..base/jobs/doctores-spa.yaml

...

patches:

- patch: |-

apiVersion: batch/v1

kind: Job

metadata:

target:

kind: Job

options:

allowNameChange: true

...

Save the changes and commit them into the main branch. It will trigger the argocd synchronization and it will create a job that will deploy the spa. At the end of the process, the container will be deleted but you can review the logs using the job resource in the UI. Make sure the SPA has been deployed.

If the previews steps have been completed successfully, we are ready to create the configurations into the other environments. To do that, follow the next steps.

Add the configurations to the spas config file under the overlay folder (environment) as is described before.

Remove the reference to the job specification from staging overlay kustomization file.

Add a reference to the job into the base kustomization file.

Add the patch configuration into the kustomization file under the overlay folder (environment).

Finally commit the changes and verify the correct deployment.

After these steps we can test the expected result from the continuos integration phase to the continuos delivery for each environment.

Want to print your doc?
This is not the way.

Try clicking the ··· in the right corner or using a keyboard shortcut (

CtrlP

) instead.