# Travis CI with S3 TravisCI is free only in open source projects. It is an easy to use and highly popular service. Using GitHub, we will be able to manage the Continuous Deployment process. For this, we will use Amazon’s S3 and CloudFront services. ![pipeline setup for travis CI/CD Setup](https://cdn-images-1.medium.com/max/1600/1*afI2jwtMsp-wil-j0u0aAA.png) ## S3 Now, as a first step, we should create a bucket in S3 service and edit its policy to make it public. You can add this code using the editor. Be sure to change the `example-bucket`field to your bucket name. * * Then, enable `static website hosting` in the properties area. You now have a public S3 bucket. By the way, don’t forget change the `index document` field to your root HTML file name. Finally S3 bucket is ready, let’s it ready CloudFront now. ``` { "Version": "2012-10-17", "Statement": [ { "Sid": "AllowPublicRead", "Effect": "Allow", "Principal": { "AWS": "*" }, "Action": [ "s3:AbortMultipartUpload", "s3:DeleteObject", "s3:GetObject", "s3:GetObjectAcl", "s3:PutObject", "s3:PutObjectAcl" ], "Resource": "arn:aws:s3:::bucket/*" } ] } ``` ## CloudFront Next step, you have to open the CloudFront service and create a new distribution. In this area, you should edit the `Origin Domain Name` field to choose name of S3 Bucket’s you want to use and must be write into `Default Root Object` field your root HTML file name. This will take some time to be ready. Don’t worry. Don’t forget the `Distribution ID`, we will need it. Please, take a note. ## IAM Using `IAM`, to access S3 and CloudFront from the TravisCI we need to allow. So we need to add `AmazonS3FullAccess` and `CloudFrontFullAccess`permissions our account. ![](https://cdn-images-1.medium.com/max/1600/1*_FgIEcjvvztfe4bM1515rg.png) ## TravisCI We need to create a `.travis.yml` file and we will configure this file. We’re going to need some secret keys, we need to add them on the Travis. ![](https://cdn-images-1.medium.com/max/1600/1*7ragBlqh06I6ADX1mQVX-w.png) Our `.travis.yml` file should be as shown below: ``` warnings_are_errors: false language: node_js node_js: - '10' - node install: - yarn global add travis-ci-cloudfront-invalidation - yarn script: - CI=false yarn build deploy: provider: s3 access_key_id: $AWS_ACCESS_ID secret_access_key: $AWS_SECRET_ID bucket: 'catchtheday.com' local_dir: build region: us-west-2 skip_cleanup: true on: branch: master after_deploy: - travis-ci-cloudfront-invalidation -a $AWS_ACCESS_ID -s $AWS_SECRET_ID -c $CF_ID -i '/*' -b $TRAVIS_BRANCH -p $TRAVIS_PULL_REQUEST ``` Why did we use the `travis-ci-cloudfront-invalidation` package? You can read this source for the answer: {% embed url="" %} {% embed url="" %} ![](/files/-LiN2zcH1oZiaeJT78fP) ``` Search for the keywords to learn more about each warning. To ignore, add // eslint-disable-next-line to the line before. File sizes after gzip: 65.1 KB build/static/js/2.5e5cab2f.chunk.js 2.67 KB build/static/js/main.f4d26a5b.chunk.js 1.74 KB build/static/css/main.e818454e.chunk.css 762 B build/static/js/runtime~main.a8a9905a.js The project was built assuming it is hosted at the server root. You can control this with the homepage field in your package.json. For example, add this to build it for GitHub Pages: "homepage" : "http://myname.github.io/myapp", The build folder is ready to be deployed. You may serve it with a static server: yarn global add serve serve -s build Find out more about deployment here: https://bit.ly/CRA-deploy Done in 13.69s. The command "CI=false yarn build" exited with 0. dpl_0 2.45s$ rvm $(travis_internal_ruby) --fuzzy do ruby -S gem install dpl Successfully installed dpl-1.10.11 1 gem installed 8.57s dpl.1 Installing deploy dependencies Successfully installed jmespath-1.4.0 Successfully installed aws-eventstream-1.0.3 Successfully installed aws-sigv4-1.1.0 Successfully installed aws-sdk-core-2.11.304 Successfully installed aws-sdk-resources-2.11.304 Successfully installed aws-sdk-2.11.304 Successfully installed mime-types-data-3.2019.0331 Successfully installed mime-types-3.2.2 Successfully installed dpl-s3-1.10.11 9 gems installed Logging in with Access Key: ****************&&&& Beginning upload of 12 files with 5 threads. dpl.2 Preparing deploy dpl.3 Deploying application uploading "index.html" with {:content_type=>"text/html"} uploading "static/js/runtime~main.a8a9905a.js.map" with {:content_type=>""} uploading "asset-manifest.json" with {:content_type=>"application/json"} uploading "precache-manifest.a945bef9e23e3fdfdd3a5bc84ed1654a.js" with {:content_type=>"application/javascript"} uploading "service-worker.js" with {:content_type=>"application/javascript"} uploading "static/js/main.f4d26a5b.chunk.js" with {:content_type=>"application/javascript"} uploading "static/js/main.f4d26a5b.chunk.js.map" with {:content_type=>""} uploading "static/js/runtime~main.a8a9905a.js" with {:content_type=>"application/javascript"} uploading "static/js/2.5e5cab2f.chunk.js" with {:content_type=>"application/javascript"} uploading "static/js/2.5e5cab2f.chunk.js.map" with {:content_type=>""} uploading "static/css/main.e818454e.chunk.css.map" with {:content_type=>""} uploading "static/css/main.e818454e.chunk.css" with {:content_type=>"text/css"} after_deploy 0.47s$ travis-ci-cloudfront-invalidation -a $AWS_ACCESS_ID -s $AWS_SECRET_ID -c $CF_ID -i '/*' -b $TRAVIS_BRANCH -p $TRAVIS_PULL_REQUEST 2019-06-27T08:27:13.419Z - error: Error invalidating CloudFront Cache: {"message":"User: arn:aws:iam::736998360651:user/testCI is not authorized to perform: cloudfront:CreateInvalidation","code":"AccessDenied","time":"2019-06-27T08:27:13.416Z","requestId":"5d5c67a7-98b5-11e9-b947-ed27eb0a7763","statusCode":403,"retryable":false,"retryDelay":68.32954804381812} Done. Your build exited with 0. ``` --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://tkssharma-devops.gitbook.io/devops-training/devops-01-continuous-integration/continuous-integration-and-continuous-delivery/ci-cd-using-travis-github/travis-ci-with-s3.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.