I am very new to deploy Django and AWS. So now I would like to deploy my separate project (drf + react) to AWS.
So How can I deploy the separate project to AWS?
EC2 vs Elastic BeanStalk which one is better for that kind of environment?
I already search for one day but I found nothing useful information and found the similar thing but I don't understand like that=> Deploying Separate React Frontend and Django DRF API
You asked a difficult question. I think I can make it bit easy for you.
First let's look at the differences in the options.
react appIn this option, the Django app will serve your app in a route for e.g /app/. Basically the route /app will load react app's index.html. it's that simple.
In order for this to work, you need to build your react app using npm run build and copy the files to Django's static folder. good so far?
One of the benefits option 1 gives, option 2 doesn't is, you can use the same domain for backend and frontend for e.g www.example.com.
You still need to build the react app using npm run build, but you will not copy that to Django, in other words, you don't want to Django to serve your front end app, you want s3 to serve the static website. this method requires a separate subdomain or domain to host the react app.
Thats is the only difference between the options. Your frontend app will make api calls to the Django api, thats same for both options.My preferred option is option 2 to reduce complexity.
I would pick elasticbeanstalk because it's easy to start with. You can do everything in the elasticbeanstalk console from load balancer to SSL, Healthcheck, Changing EC2 Keypair for EC2 Instance etc. Deployment is very easy. It supports multiple environments, You can use one AWS account for your test and production environments.
Create an amazon aws account
Search ec2- click ec2
Click instances
Click Launch Instance
Quick start - select ubuntu server
Select instance type - select any free tier eligible instance
Key pair login - create new key pair - give a key pai name. Then click create Click launch instance
Click view all instances
Open the .pem file containing folder in terminal. Change the permission of the file using chmod
chmod 400 key_name.pem // prevents accidental overwriting
Get to instance using pem file. Go to console ,then click new created instance. Check to see whether it is running (written). Click ‘connect’ button on top right
Opened a new page showing connect to instance. Click ssh client. Copy the ssh login command . under example Paste this in command prompt // save this ssh client code in docs or txt file
sudo apt-get update
sudo apt-get install nginx // or you can use apache
From the connect to instance , we also get ip address. Copy paste that into new browser tab window. It just showing loading because nginx is not started yet
To start nginx, type sudo systemctl start nginx
To know whether it is started or not , sudo systemctl status nginx // shows starting and started status
We have to add port also in aws console. Nginx runs on port 80. So go to instances detail page . scroll down and click security tab . under security groups , clicck on the link below it.click inbound rules tab. Edit inboundrules click button. Click add rule.
Type- custom tcp - port range -80,source - anywhere, click save rule button. Then port 80 is added
After any change restart nginx, sudo service nginx restart in command prompt Next copy ip then run. Copy auto-assigned ip address ,paste into browser tab, it will open nginx default page
Go to command prompt, activate venv
Clone our project from git repository, git clone https://github.com/***/*****.git
pip install -r requirements.txt
Install wsgi server, pip install gunicorn
Go to route folder (folder containing manage.py) in cmd prompt, type
gunicorn –bind 0.0.0.0:9090 projectname.wsgi //here 9090 is the port
All requests coming to 9090 port of nginx should redirect to port 80 (previously added)
For that, we have to open configuration file of nginx. Configuration file is in etc/nginx/sites-enabled.
So type like below in cmd prompt,
Activate venv. cd $HOME
cd /etc/nginx/sites-enabled/
sudo nano default
Comment the line starting with try_files under location/
Under that type, proxy_pass http://0.0.0.0:9090; // type ctrl+O (O for Owl)
After every change restart nginx. sudo service nginx restart
If error shows, add this ip address in allowed host under settings.py
Go to settings.py containing folder in cmd prompt, sudo nano settings.py,
Allowed hosts =[‘ip address’ ,’0.0.0.0’ ] . restart nginx
gunicorn –bind 0.0.0.0:9090 projectname.wsgi
cd /etc/nginx/sites-enabled/
sudo nano default
Under location /, type
location /static/ {
autoindex on;
alias /home/path_to_static_dir/;
}
//save and close
Restart nginx sudo service nginx restart
cd projectname/projectname/
Run server , gunicorn –bind 0.0.0.0:9090 projectname.wsgi
If forbidden error occurs, then type this in cmd,
ps aux | grep nginx
sudo usermod -a -G ubuntu www-data
sudo chown -R :www-data static
Restart nginx, sudo service nginx restart
