This project is for CIS 181 class in City Colleges of Chicago

Backend Requirements
  • AWS Account
  • AWS EC2
  • A flask application

Step 1: Create EC2 instance

  1. Open EC2
  2. Click Launce Instance
  3. Set a name
  4. Select Ubuntu OS
  5. Create new key pair -> Set a name -> Select RSA -> Save .pem file
  6. Under Network Settings -> Click Edit -> Add ssh(Source type: My IP), HTTP (Source type: Anywhere), and HTTPS(Source type: Anywhere)
  7. Click Launch Instance

Step 2: Connect to EC2 instance

We can connect using SSH or we can also simply use EC2 connect for a simpler connection.

Step 3: Prepare the environment

Once in the instance, it is always recommended to update the system first

sudo apt-get update

Step 4: Install virtual environment for Python 

sudo apt-get install python3-venv

Step 5: Copy flask application folder from local computer to AWS EC2 using SSH 

scp -i "my-key-pair.pem" -r my-flask-app ec2-user@:/home/ec2-user/

Step 6: Activate the new virtual environment in a flask app directory

  • Go to the flask app directory 
cd my-flask-app
  • Create the virtual 
python3 -m venv venv
  • Activate the virtual environment 
source venv/bin/activate

Step 7: Install required libraries using requirements.txt file 

pip install -r requirements.txt

Step 8: Verify if it works by running 

python app.py
Run Gunicorn WSGI server to serve the Flask Application When you “run” flask, you are actually running Werkzeug’s development WSGI server, which forward requests from a web server. Since Werkzeug is only for development, we have to use Gunicorn, which is a production-ready WSGI server, to serve our application

Step 9: Install Gunicorn 

pip install gunicorn

Step 10: Run Gunicorn 

gunicorn -b 0.0.0.0:8000 app:app
Gunicorn is running (Ctrl + C to exit gunicorn)
Use systemd to manage Gunicorn Systemd is a boot manager for Linux. We are using it to restart gunicorn if the EC2 restarts or reboots for some reason. We create a .service file in the /etc/systemd/system folder, and specify what would happen to gunicorn when the system reboots.
We will be adding 3 parts to systemd Unit file-Unit, Service, Install
  • Unit — This section is for description about the project and some dependencies
  • Service — To specify user/group we want to run this service after. Also, some information about the executables and the commands.
  • Install — tells systemd at which moment during boot process this service should start.
  • With that said, create a unit file in the /etc/systemd/system directory, and name the service as flaskapp.service 
sudo nano /etc/systemd/system/flaskapp.service

Step 11: Add these code into the file

Change the folder name if it's not flaskapp

[Unit]
Description=Gunicorn instance for our Flask app
After=network.target
[Service]
User=ubuntu
Group=www-data
WorkingDirectory=/home/ubuntu/flaskapp
ExecStart=/home/ubuntu/flaskapp/venv/bin/gunicorn -b localhost:8000 app:app
Restart=always
[Install]
WantedBy=multi-user.target
CTRL + O -> prompt user to set a filename, just press enter -> CTRL + X

Step 12: Enable the service 

sudo systemctl daemon-reload
sudo systemctl start flaskapp
sudo systemctl enable flaskapp

Step 13: Check if the app is running 

curl localhost:8000
Run Nginx Webserver to accept and route request to Gunicorn. Finally, we set up Nginx as a reverse-proxy to accept the requests from the user and route it to gunicorn.

Step 14: Install Nginx 

sudo apt-get install nginx

Step 15: Start the Nginx service and go to the Public IP address of your EC2 on the browser to see the default nginx landing page 

sudo systemctl start nginx
sudo systemctl enable nginx

Step 16: Install Certbot and Get SSL certificate 

sudo apt install certbot python3-certbot-nginx

Step 17: Edit nginx file 

sudo nano /etc/nginx/sites-available/default
server {
       server_name ;

       location / {
                proxy_pass http://localhost:8000;
       }
}

Step 18: Run Certbot with your subdomain 

sudo certbot --nginx -d
Frontend Requirements
  • AWS Account
  • AWS Amplify
  • ReactJS application uploaded in GitHub

Step 1: Open AWS Amplify

Step 2: Click deploy an App

Step 3: Connect GitHub account that has the ReactJS application repository

Step 3: Select repository

Step 4: Go to Hosting -> Build settings -> Environment variables

Step 5: Insert necessary environment variables

Step 6: Deploy web app