Using AWS tutorial
Written by Matt Stillwell
For Towson University COSC484
Basic HTML Website
Prerequisites
- Have a text editor and an internet browser (preferable Chrome) installed on the machine
- Be running Linux or MacOS and using the terminal or if on Windows use the (Git terminal application)[https://git-scm.com/download/win]
Creating a basic webpage
- Go to a local directory you would like the files to be saved, then create 2 new files named
index.html
andstyle.css
- Open up the
index.html
file with a text editor and then add this:
<html>
<head>
<title> This is a webpage </title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1> Hello world! </h1>
<p> This is paragraph text </p>
</body>
</html>
- Open up the
styles.css
file with a text editor and then add this:
body {
background-color: wheat;
text-align: center;
font-family: 'Montserrat', sans-serif;
}
h1 {
padding-top: 50px;
}
p {
color: darkslategrey;
}
- Save both of these files and then try opening the
index.html
file in your web browser
Express API
Prerequisites
- Ensure (node)[https://nodejs.org/en/] is installed on your machine
- Ensure (yarn)[https://classic.yarnpkg.com/en/docs/install/#mac-stable] is installed on your machine
Creating a basic API
- Go to a local directory you would like the files to be saved, create a new folder called
basic-api
, go into that directory (cd basic-api
) - Create a new file named
package.json
and set this to be its contents:
{
"name": "basic-api",
"version": "1.0.0",
"description": "",
"main": "server.js",
"dependencies": {
"body-parser": "^1.19.0",
"cors": "^2.8.5",
"express": "^4.17.1",
"http-status-codes": "^2.1.4"
},
"scripts": {
"start": "node server.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "matt",
"license": "ISC"
}
- Run
yarn install
to download dependencies - Create a new file named
server.js
and set this to be its contents:
const HttpStatus = require("http-status-codes");
const bodyparser = require("body-parser");
const cors = require("cors");
const express = require('express');
const app = express();
const port = 3000;
app.use(cors({ origin: true }));
app.use(express.json());
app.use(bodyparser.urlencoded({ extended: false }));
app.use(bodyparser.json());
app.get("/greeting", (req, resp) => {
const name = req.query.name ? req.query.name : ' world' ;
const greeting = `Hello ${name}`;
resp.status(HttpStatus.OK).send({greeting});
});
app.listen(port, () => {
console.log(`Running on port ${port}`);
});
- Test that it runs with
yarn start
React Website using API
Prerequisites
- Ensure (node)[https://nodejs.org/en/] is installed on your machine
- Ensure (create-react-app)[https://reactjs.org/docs/create-a-new-react-app.html#create-react-app] cli is installed on your machine
Creating a react webpage
- Go to a local directory you would like the files to be saved, then run the command
npx create-react-app react-app
- Go into the
react-app
directory (cd react-app/
) - Run
yarn add @material-ui/core
to add nice looking components into project - Run
yarn add axios
to add network request calls and responses - Add this code onto the end of the
App.css
file:
#nameBox {
/* color: white; */
background-color: rgb(214, 214, 214);
}
- Replace contents of
App.js
with this instead:
import React, { useState } from 'react';
import { TextField, Button } from '@material-ui/core';
import logo from './logo.svg';
import axios from 'axios';
import './App.css';
const API_URL = '<YOUR_API_URL_HERE>';
const API_PORT = '3000';
const App = () => {
const [name, setName] = useState('');
const [greeting, setGreeting] = useState('---');
const onTextChange = (event) =>
setName(event.target.value);
const onButtonPress = () =>
axios.get(`${API_URL}:${API_PORT}/greeting`, {params: {name}})
.then(resp => setGreeting(resp.data.greeting));
return (
<div className="App">
<header className="App-header">
<h1> COSC 484 </h1>
<img
src={logo}
className="App-logo"
alt="logo"
/>
<p> Enter your name: </p>
<TextField
id="nameBox"
variant="outlined"
value={name}
onChange={onTextChange}
/>
<Button
variant="contained"
color="primary"
onClick={onButtonPress}
>
Submit
</Button>
<p> {greeting} </p>
</header>
</div>
);
}
export default App;
- Run
yarn build
to build the static html files in thebuild
directory - Run
yarn start
to host the react repo locally, you can see the webpage if you visitlocalhost:3000
in a browser
AWS
Prerequisites
- Log into/ Create AWS account here
- Have ssh cli command installed
- Have rsync cli command installed
Part 1: Basic website deployment with S3
- Ensure you have completed the
Basic HTML Website
section before starting - Click on
Services
at the top, and selectS3
underStorage
- Select
Create Bucket
button - Name it
basic-website
, selectUS East (Virginia)
, uncheckBlock all public access
, checkI acknowledge that the current settings might result in this bucket and the objects within becoming public.
and then leave all the other settings the same. - Select
Create bucket
button - Select
basic-website
, EnsureObjects
tab is selected, clickUpload
button - Drag in the
index.html
and thestyles.css
files from theBasic HTML Website
section, and click theUpload
button - Click the
basic-website
link near the of of the page - Click on the
Objects
tab, and selectindex.html
andstyle.css
and then click theActions
button and selectMake public
- Click on the
Properties
tab, scroll to the bottom, click theEdit
button for theStatic website hosting
section and selectEnable
- Type in
index.html
in the index document textbox and then selectSave changes
button - Now if you scroll down to the bottom of the page again, you should see a url hosting the public static website
Part 2: Basic API deployment with EC2
- Click on
Services
at the top, and selectEC2
underCompute
- Click the orange
Launch instance
button - Select the free, first linux volume type and click continue button
- Ensure the instance type is set to
Free tier eligable
and Click the enter button again - Click
Review and Launch
button, then clickLaunch
button - Select an existing keypair or create a new keypair
- Name it something like
MyKeyPair
, and click theDownload Key Pair
button, then selectLaunch Instances
button - Select the
View Instances
button, click on the new instance - Copy the value under the
Public IPv4 DNS
section and then change theAPI_URL
value in theApp.js
file from theReact Website using API
section to behttp://{YOUR_API_IP_ADDRESS_HERE}
- Copy the
MyKeyPair.pem
file to the directory right above thebasic-api
directory from theExpress API
section - Change the permissions of the
MyKeyPair.pem
file usingchmod 400 MyKeyPair.pem
- On the web browser select
Security Groups
under theNetwork & Security
, and select the orangeCreate Security Group
button - Name it something like
Connected
, description asconnected
and set the inbound rules to includeAll Traffic
on0.0.0.0/0
and selectCreate security group
- Go back to the EC2 dashboard and checkbox the running instance, then select 'Actions
,
Securityand then
Change security groups` dropdowns - From there change add and set the security group of this instance to be
Connected
- Back in the terminal, copy over the files from the
Express API
sections onto the EC2 Cloud computer with `rsync -rave "ssh -i MyKeyPair.pem" "./basic-api" ec2-user@{YOUR_API_ADDRESS_HERE}:/home/ec2-user - Connect into the ec2 instance with this command:
ssh -i "MyKeyPair.pem" ec2-user@{YOUR_API_ADDRESS_HERE}
- Once logged in type in this command to allow the api to run once disconnected from the instance:
screen
- Then navigate to the
basic-api
folder (cd basic-api
) - Install node and yarn on the ec2 instance with
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
- Run
. ~/.nvm/nvm.sh
thennvm install node
- Then run
npm install
and then runnpm start
- Press Control-A D to detach the screen and can now freely disconnect from the screen session
Part 3: Integrated website deployment with S3 interfacing with API on EC2
- Run
yarn build
in the react directory fromReact Website using API
section - Click on
Services
at the top, and selectS3
underStorage
- Select
Create Bucket
button - Name it
react-website
, selectUS East (Virginia)
, uncheckBlock all public access
, checkI acknowledge that the current settings might result in this bucket and the objects within becoming public.
and then leave all the other settings the same. - Select
Create bucket
button - Select
react-website
, EnsureObjects
tab is selected, clickUpload
button - Drag in the contents of
build
directory from theReact Website using API
section, and click theUpload
button - Click the
react-website
link near the of of the page - Click on the
Objects
tab, and select all the files and then click theActions
button and selectMake public
- Click on the
Properties
tab, scroll to the bottom, click theEdit
button for theStatic website hosting
section and selectEnable
- Type in
index.html
in the index document textbox and then selectSave changes
button - Now if you scroll down to the bottom of the page again, you should see a url hosting the public static react website