14. Deploying Your Code to the Web

Activity 14.01: Adding CI/CD with GitLab to a Book Search App and Deploying to Amazon S3 and CloudFront

Solution

Perform the following steps to complete the activity:

Note

To access the code files for this activity, refer to https://packt.live/36ZecBT.

1. To start, we'll want to run a production build locally. We can use the regular command used to build all Vue CLI projects for production. We'll also want to check that the relevant assets (JavaScript, CSS, and HTML) are generated correctly.

   The production build command is npm run build, as seen in the following screenshot:

   Figure 14.65: The npm run build output for the initial book-search Vue CLI project

   The npm run build command builds a dist directory with contents as in the following screenshot. It contains CSS, JavaScript, and HTML assets, as well as sourcemaps (.js.map files) and favicon:

   Figure 14.66: Sample contents of the dist folder (generated using the tree...