Using codepipeline to create a build and deploy it in aws s3 - amazon-web-services

I have created a codepipeline in aws that creates the build and copies the dist folder in my aws s3. I am able to save all the files inside the dist folder but assets folder is not saving. What should be the buildspec.yml file to copy assets folder in s3.
version: 0.2
env:
variables:
S3_BUCKET: bucketName
APP_NAME: "Walter"
BUILD_ENV : "prod"
phases:
install:
commands:
- echo Installing source NPM dependencies...
- npm install
- npm install -g #angular/cli
build:
commands:
# Builds Angular application. You can also build using custom environment here like mock or staging
- echo Build change this started on this fg date `date`
- ng build --${BUILD_ENV}
post_build:
commands:
# Clear S3 bucket.
- aws s3 rm s3://${S3_BUCKET} --recursive
- echo S3 bucket is cleared.
# Copy dist folder to S3 bucket, As of Angular 6, builds are stored inside an app folder in distribution and not at the root of the dist folder
- aws s3 cp dist/walter s3://${S3_BUCKET}/${APP_NAME} --recursive
- echo Build completed on `date`
artifacts:
files:
- '**/*'
discard-paths: yes
base-directory: 'dist/Walter'

For someone looking to achieve this. I solved it by changing the 'discard-paths' value to 'no'.
Setting its value to 'yes' neglects the folder structure and copies all the files to the specified location. With setting it to 'no', it maintains the folder structure.

Related

How to get CodeBuild project name from buildspec file

This is my buildspec file to build an Angular, React, Vue or similar project through AWS CodeCommit and publish the resulting artifact to an S3 bucket:
version: 0.2
env:
variables:
S3_BUCKET: "my-bucket"
phases:
install:
runtime-versions:
nodejs: 16
pre_build:
commands:
- echo Installing source NPM dependencies...
- npm install
build:
commands:
- echo Build started on `date`
- npm run build
post_build:
commands:
- aws s3 cp dist s3://${S3_BUCKET} --recursive
- echo Build completed on `date`
What I would like to do is to use a subfolder with the name of the project when publishing the result files in the bucket. Now all files go to my-bucket but I would like them to go to my-bucket/name-of-the-project
I could change the post-build command to something like
- aws s3 cp dist s3://${S3_BUCKET}/name-of-the-project --recursive
That way it would be always the same directory name. What I want is to get dynamically the name of the CodeBuild project or from the package.json or similar to make that directory match the project name.
Here are two ways to read a project identifier from the build context at run-time:
Option 1: Read the project name from package.json:
PROJECT_NAME=$(cat package.json | jq -r '.name')
echo $PROJECT_NAME # -> name-of-the-project
Option 2: Extract the CodeCommit repo name from the source URL. Each CodeBuild execution exposes several environment variables, including CODEBUILD_SOURCE_REPO_URL.
echo $CODEBUILD_SOURCE_REPO_URL # -> https://git-codecommit.us-east-1.amazonaws.com/v1/repos/my-repo
REPO_NAME=$(echo $CODEBUILD_SOURCE_REPO_URL | awk -F\"/\" '{print $NF}') # split the url at '/', return the last item
echo $REPO_NAME # -> my-repo
Pass one of the captured names to the S3 command:
aws s3 cp dist s3://${S3_BUCKET}/${PROJECT_NAME} --recursive

How I can deploy a subfolder into my bucket's root path?

For my react App I use the following buildspec.yml to deploy a reast Single Page Application:
version: 0.2
phases:
pre_build:
commands:
- npm install
build:
commands:
- npm run build
cache:
paths:
- /root/.npm/**/*
artifacts:
files:
- ./build/**
I also created an s3 bucket as static website and I deploy it directly via codeploy. But the folder that is deployed is into the ./build istead of the bucket's root. Is there a way to translate the paths of the codebuild's output artifacts into the deployed paths?
The codebuild path is used as a step in a codepipeline.
In order to do that you must specify a base-directory then tell the codebuild to set everything as artifact. This would be your final buildspec.yml:
version: 0.2
phases:
pre_build:
commands:
- npm install
build:
commands:
- npm run build
cache:
paths:
- /root/.npm/**/*
artifacts:
files:
- '**/*'
base-directory: './build'
And you also can safely delete the rogue ./build folder into your s3 bucket.

Copy build artifacts to s3 bucket using Buildspec.yml

I am trying to understand codebuild recently. I am trying to copy the build artifact to S3 bucket. I seen in one of my project's they are copying the files to S3 bucket using the command "aws s3 cp" instead of using the artifact phase.
Cant we achieve this using the artifact phase after post build phase instead of copying using "aws s3 cp" command in post build phase?
What is the purpose of the artifacts phase in Buildspec.yml?
Can we have Buildspec.yml without artifacts?
version: 0.2
env:
variables:
CACHE_CONTROL: "100"
S3_BUCKET: animation-project
BUILD_ENV: dev
phases:
install:
runtime-versions:
nodejs: 10
commands:
- echo Installing source NPM dependencies...
- echo environment printing ${STAGE}
- npm install
- npm install -g #angular/cli
build:
commands:
- echo Build started on `date`
- ng build --configuration=${BUILD_ENV}
# - ng test
- echo build completed
post_build:
commands:
- echo Post Build Started successfully on `date`
- aws s3 cp dist/* s3://${S3_BUCKET} --recursive --acl public-read --cache-control "max-age=${CACHE_CONTROL}"
- echo Build completed on `date`
artifacts:
files:
- '**/*'
base-directory: 'dist*'
discard-paths: yes
Thanks in advance for your answers.

CodeBuild pushes source React files to s3 instead of the build folder

im using CodePipeline with CodeBuild together with a github repository.
CodeBuild builds the project successfully, but he uploads the source react folder like the whole repository without any build folder to S3.
My buildspec.yaml looks like this:
version: 0.2
phases:
build:
commands:
- echo "Installing dependicies..."
- npm install
- echo "Create the build..."
- npm run build
artifacts:
files:
- '**/*'
base-directory: 'build'
What can I do ?

How to upload a generated folder content into S3 using CodeBuild?

I am trying to configure a CodePipeline on AWS that it takes my Nuxt website on Github, run the command npm run generate to generate the static website then upload the dist folder on an S3 bucket.
Here what my buildspec.yml it looks like:
version: 0.2
phases:
install:
commands:
- npm install
build:
commands:
- npm run generate
post_build:
commands:
- aws s3 sync dist $S3_BUCKET
The error I get is: The user-provided path dist does not exist. Is anyone know how to correct this? I read a lot about artefacts but I never use them beforeā€¦
Thanks in advance,
You can use artifacts to upload dist folder to s3. I will suggest not to use post build command to achieve this because the post build command runs even when the build is failed, this is the known limitation of codebuild. Just replace your buildspec with the following.
version: 0.2
phases:
install:
commands:
- npm install
build:
commands:
- npm run generate
artifacts:
files:
- '**/*'
base-directory: 'dist'
'**/*' means it will upload all the files and folder under the base directory "dist". You need to mention your bucket name in your aws console ( browser).
Also make sure that your codebuild IAM role has sufficient permission to access your bucket.