Dev.to

Flask and ReactJS Web App Deployment

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 Open EC2 Click Launce Instance Set a name Select Ubuntu OS Create new key pair -> Set a name -> Select RSA -> Save .pem file Under Network Settings -> Click Edit -> Add ssh(Source type: My IP), HTTP (Source type: Anywhere), and HTTPS(Source type: Anywhere) 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/flaskapp 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

Apr 12, 2025 - 00:19

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

Open EC2
Click Launce Instance
Set a name
Select Ubuntu OS
Create new key pair -> Set a name -> Select RSA -> Save .pem file
Under Network Settings -> Click Edit -> Add ssh(Source type: My IP), HTTP (Source type: Anywhere), and HTTPS(Source type: Anywhere)
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/flaskapp

server {
       server_name ;

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

Step 18: Run Certbot with your subdomain

sudo certbot --nginx -d