Homework answers / question archive / In this assignment, you will create an S3 bucket and copy over the Angular distribution built for running in AWS

In this assignment, you will create an S3 bucket and copy over the Angular distribution built for running in AWS

Computer Science

Share With

In this assignment, you will create an S3 bucket and copy over the Angular distribution built for running in AWS. You will configure S3 as a webserver and eliminate the need for the original server. Along the way, security policies will be set for buckets and objects within the buckets.

Prompt

In Module Two, you forked and cloned the learn-angular-from-scratch-step-by-step code into the lafs-web directory on your computer. Now you need to do some work to make that codebase ready for use on Amazon Web Services.

You will be using the CS 470 Module Three Assignment Guide to set up a static website in the cloud.

Specifically, you must address the following rubric criteria:

• Prepare the Angular application.
• Create the S3 bucket.
• Copy the frontend to S3 file storage.
• Configure the static website.
• Configure S3 Public access.
• Configure the S3 bucket policy.

Guidelines for Submission

Submit screenshots of the following items, which must contain your unique bucket name:

• Static website hosting dialog that shows S3 configured as a server
• Settings showing the permissions of the bucket with public access allowed
• The S3 bucket showing Angular files

In addition, submit a JSON file with the bucket policy showing read-only. Also provide the bucket name URL. There is a template for this: http://{bucket-name}.s3-website-{region-name}.amazonaws.com. So for example, if your bucket name is “example” and region is “us-east-1”, the URL would be “http://example.s3-website-us-east-1.amazonaws.com/ (1,2,3,4,5)”.

Submit all three screenshots, the JSON file, and the bucket URL to Brightspace.

CS 470 Module Three Assignment Guide Part 1 - Preparing the Angular Code In Module Two, you forked and cloned the learn-angular-from-scratch-step-by-step code into a lafsweb directory on your computer. Now you need to do some work to make that codebase ready for use on Amazon Web Services. 1. Open a command shell, such as PowerShell. 2. Change the directory to lafs-web. 3. Build the Angular application for deployment. a. ng build --prod --base-href . b. If you receive the following error, then you need to install the SASS preprocessor. See steps C and D. Otherwise, go to step 4. For more information on this error see Github Angular CLI: 7.0.3 Cannot Find Module 'node-sass'. ERROR in ./src/styles.scss Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js): Error: Cannot find module 'node-sass' c. npm install --save-dev node-sass d. ng build --prod --base-href . 4. You are now done preparing the code. What you did was tell Angular to use the current path (.) instead of the default root path (/) for routing of sub pages on your website. A good reference on the base-href and deploy-url build options for Angular can be found at Angular 4: Use of base-href and deploy-url Build Options. Part 2 – Creating an S3 Bucket In part 1, you prepared your code to be deployed to the cloud. Now you need to create the place to which it will be deployed. In this section, you will create an S3 bucket to be your deployment target. 1. 2. 3. 4. Log into AWS Educate. Select your AWS Account (select it again if a button comes up). Select AWS Console. Type “S3” in the Find Services search bar and select S3, or just select S3 under the Storage heading. 5. Click the Create Bucket button. It does not matter which of the two buttons you select. 6. You will need to create a unique S3 Bucket name. See Rules for Bucket Naming. Some key points: a. Bucket names are unique by AWS Partition (World, China, and the Government). For our purposes, we operate in the "World" partition; your name must be globally unique. b. Do not worry too much about the name. It has no real impact on your applications other than as a "locator" of your bucket. Many companies choose to generate names using a formula. c. If you cannot get your first choice, add some numbers or otherwise make the name slightly more unique. 7. Keep the region as US East (N. Virginia) us-east-1. 1 8. 9. 10. 11. Keep the Block All Public Access check box checked. Do not change anything in advanced settings. Click Create Bucket on the bottom of the page. The console should return you to the list of S3 buckets. You will see your new bucket listed, its region, that it is not public, and a timestamp showing when it was created. Congratulations! You have now created your first serverless cloud “thing”! Part 3 – Deploying Your Website In part 2, you created your S3 bucket to host your website. Now it is time to deploy your application. 1. Click on the link for the bucket name. 2. Click on the blue Upload button. 3. Drag and drop all the files from the lafs-web/dist/learn-angular-from-scratch directory. Make sure you select the contents of the directory and not the directory itself. a. If you cannot or do not want to drag and drop your files, follow these steps to upload manually. i. Select the Create Folder blue box. ii. Type in “assets” (without quotes). Leave all other settings the same. iii. Upload all the files in the lafs-web/dist/learn-angular-from-scratch directory to the S3 bucket root. iv. Upload all the files in the lafs-web/dist/learn-angular-from-scratch/assets directory to the S3 bucket assets folder. 4. Click the blue Upload button in the lower-left corner. If you accidently clicked Next, do not worry. Leave all the settings as they are until the last page, then click the blue Upload button (this time it will be in the lower-right corner). Figure 1: Upload Dialog Box 2 5. You should have 14 objects in your S3 folder. Figure 2: S3 Bucket After File Upload That is it. You have deployed your application. Part 4 – Configuring Your S3 Bucket as a Website In part 3, you deployed your application to your S3 bucket, but it is not a website yet. In this section, you will configure your S3 bucket to operate as a website. 1. Select the Properties tab. 2. Select the Static Website Hosting card. 3. Copy and save the endpoint shown. It will look something like this: http://{your bucket name}.s3-website-us-east-1.amazonaws.com. 4. Select the radio button for Use This Bucket to Host a Website. The Learn More link will provide some details on what we are about to do. 5. The dialog box will now expand and ask for the following: a. Index document. This is your website’s home page. Angular created this file and it is in your folder. You need to type in “index.html” or the Save button will not be enabled. b. Error document. You do not have a custom error page, but if you did, this would be where you would put in the name of it. c. Redirection rules. Leave this blank. 6. Click Save. Congratulations! You have now configured a serverless web server. Go try it by putting in the endpoint you saved into a browser. Note: If you forgot to save the endpoint, don’t worry – we all do that. Just click on the Static Website Hosting card and it will be right there again. 3 Figure 3: HTTP 403 Forbidden Oh No, a 403! Don't worry! You did not make a mistake; in fact, you did it right. Your website is secure by default, so no public access is allowed. We will make it public in the next set of steps. Part 5 – Configuring Security for Your S3 Bucket Website In part 4, you configured your bucket to work as a website, but you are not able to access it from a browser. Not a very good website. We will now configure the security for your bucket so it is public and readable. This is done in two separate steps: making your bucket public, and allowing public access to the read operations. Making Your Bucket Public 1. Select the Permissions tab for your bucket. 2. This tab should have the Block Public Access button in blue, and the Details box showing “Block All Public Access”. 3. Select the Edit button in the upper-right of the Details box. 4. Uncheck the Block All Public Access check box. 5. Click Save. 6. Type Confirm in the dialog box and then click Confirm. This is confirming to AWS that you really want your S3 bucket to be public. 7. Test your end point again. Figure 4: Block Public Access Settings 4 A 403! Again, don't worry! You still did not make a mistake; in fact, you are still doing it right. S3 has two layers of security: the bucket, and the operations on the bucket. You have just opened the security on the bucket, but you did not authorize any operations. Enabling the Read Access Operations 1. Create a bucket policy to enable read access. 2. Select the Bucket Policy button under Permissions for your bucket. 3. You will need to modify the following JSON segment and paste it into the box on the screen. You MUST replace example.com with your bucket name. { "Version": "2012-10-17", "Statement": [ { "Sid": "PublicReadGetObject", "Effect": "Allow", "Principal": "*", "Action": [ "s3:GetObject" ], "Resource": [ "arn:aws:s3:::example.com/*" ] } ] } 4. When the JSON is pasted into the box, click Save. 5. If done correctly, the screen will change, and the Permissions tab and the Bucket Policy button will both show the word "Public". There will also be a new warning that says "This bucket has public access". 6. Now go try your website in the browser again. Figure 5 - AWS Public access warnings 5 Congratulations! You did it: A totally serverless website migrated from desktop to containers and now to the cloud. 6 CS 470 Module Two Assignment One Guide Introduction In this lesson you will build on your previous work with Docker by creating two containers, one to host an Angular frontend application and one to host a Node JS backend REST API. We will be using example applications covered in articles on the Angular Templates website. You do not need to read the articles or build the code by hand; however, the articles do provide useful information to help your study of full stack development. For this assignment, you will make a copy of the published code and deploy it into containers. Summary Steps • Create container for Angular frontend: o Fork the Angular project o Clone your Angular repo: git clone {your_repo} lafs-web o Create dockerfile o docker build -t node-lafs-web o docker run -p 4200:4200 -d node-lafs-web • Create container for MEAN REST API backend o Fork the MEAN project o Clone your MEAN repo: git clone {your_repo} lafs-api o Create dockerfile o docker build -t node-lafs-api o docker run -p 3000:3000 -d node-lafs-api Detailed Steps Frontend Application The frontend application we will use to explore containerization is available on GitHub in the AngularTemplates repository “learn-angular-from-scratch-step-by-step”. To start, you will make a copy of that repository using a process known as “forking”. Ensure that you are logged into GitHub and navigate to the above repository. Click the Fork button on the upper right of the page. You will be taken back to your GitHub account with a new repository, named the same as the original, and a message below the title indicating that it was forked. 1 Clone your new repository into a folder on your computer. > git clone {your-github-repo-url} lafs-web Note: Think of the cloned repository on your computer as a “working copy”. At this point you can optionally run the application on your computer. To do so, you will need to install Node JS and run the following commands: 1. 2. 3. 4. 5. 6. cd lafs-web npm install -g @angular/cli npm install ng serve Open a browser and navigate to http://localhost:4200 Ctrl+C to stop the web server Create a new Docker container by creating a Dockerfile in the top directory of the website. Dockerfile # using Node v10 FROM node:10 # Create app directory WORKDIR /usr/src/lafs # Install app dependencies # A wildcard is used to ensure both package.json AND package-lock.json are copied # where available (npm@5+) COPY package*.json ./ 2 RUN npm install -g @angular/cli RUN npm install # If you are building your code for production # RUN npm ci --only=production # Bundle app source COPY . . # Expose port 3000 outside container EXPOSE 4200 # Command used to start application CMD [ "ng", "serve" ] Note: Refer to the NodeJS article Dockerizing a Node.js web app for more information. Create a Docker Ignore file to indicate the files and folders that will not be copied into the container. .dockerignore .env .git .gitignore node_modules npm-debug.log After creating the dockerfile and Docker Ignore file, use the Docker build command to create a container image using the following command: > docker build -t node-lafs-web . -t assigns a “tag” to the image used when storing in the local Docker repository. Run the Docker container using the following command: > docker run -p 4200:4200 -d node-lafs-web -d means “detach” the console from the container so it runs in the background and lets you use additional commands. -p 4200:4200 means to map port 4200 on your computer to port 4200 inside the container. At this point you can open a web browser on your computer and navigate to http://localhost:4200. 3 Backend REST API The backend application we will use to explore containerization is available on GitHub in the AngularTemplates repository “learn-how-to-build-a-mean-stack-application”. To start, you will make a copy of that repository using a process known as “forking”. Ensure that you are logged into GitHub and navigate to the repository URL: https://github.com/AngularTemplates/learn-how-to-build-a-mean-stack-application. Fork this repository as you did for the frontend application. Clone your new repository into a folder on your computer: > git clone {your-github-repo-url} lafs-api At this point you can optionally run the application on your computer. To do so, you will need to install Node JS and run the following commands: 1. 2. 3. 4. 5. cd lafs-api npm install npm run start Open a browser and navigate to http://localhost:3000/ Ctrl+C to stop the web server Create a Dockerfile in the top directory of the website, similar to what you did for the frontend application. Refer to the NodeJS article Dockerizing a Node.js Web App as needed. 4 After creating the dockerfile and Docker Ignore file, use the Docker build command to create a container image using the following command: > docker build -t node-lafs-api . -t assigns a “tag” to the image used when storing in the local Docker repository. Run the Docker container using the following command: > docker run -p 3000:3000 -d node-lafs-api -d means “detach” the console from the container so it runs in the background and lets you use additional commands. -p 3000:3000 means to map port 3000 on your computer to port 3000 inside the container. At this point you can open a web browser on your computer and navigate to http://localhost:3000/. You will receive an error because the backend REST API is looking for a MongoDB instance to connect to. In the next lesson, you will use more advanced Docker techniques to get multiple containers working together and able to interact over the network. Loopback A helpful aspect of the example application is the use of LoopBack to build the REST API. LoopBack is a framework that saves time by “discovering” the models in your project and automatically generating all the REST endpoints without you having to code every one of them by hand. Another useful feature is the API Explorer, consisting of generated documentation and the ability to test the endpoints right from the documentation pages without having to create client code to invoke the endpoints. Here is an example of the API Explorer from the documentation: 5 6