Django rest-framework uses aws s3 to save image. How to pass image data from React Native
I am using aws s3 to store images on Django rest-framework. Work perfect on Django App but cannot work from React Native App pass image data to Django backend. Do I have to make aws s3 image url on React Native App and pass that url to Django database?
Related
I created a python flask api which accepts image uploading. Something similar to the following:
#app.route("/image_upload", methods=['POST'])
def image_upload():
image = request.files['image']
image_data = image.read()
base64encoded = base64.b64encode(image_data).decode('utf-8')
return base64encoded
I deployed it to okteto, and if I upload image against the okteto endpoint, it works well.
I then add an AWS API gateway to proxy the requests to the okteto endpoint:
I then try to upload the same image through the API gateway endpoint, then the image received in the flask will be corrupt.
I noticed that the payload seems twice as big as without the API gateway. And the base64 string can NOT be rendered as an image anymore.
So how does the API Gateway handle the file uploading? I tried searching in both google and AWS documents, there are many saying how to use API Gateway to upload files to S3. But I don't want to upload to S3. I just want the API Gateway forward the payload to my Flask app.
The image can be as small as needed. So it's far less than the limit of the gateway.
Fixed by adding the binary media types to the gateway.
Detail explained (in Chinese though):
https://zhuanlan.zhihu.com/p/595401224
I am looking for the recommended ways to create vanity URLs in AWS, I know of a way to create shortened links redirects using CloudFront + S3 as explained here:
https://www.intricatecloud.io/2019/09/create-your-own-short-link-redirects-using-cloudfront-s3/
What else?
I recently created a similar project which was completely serverless.
you can check it out at https://web.trym.fi/
I have divided it into 2 parts backend and frontend
Backend:-
using sls framework to deploy lambda and api gateway.
backend langauge nodejs/express
lambda custom authorizer along with auth0 to handle authentication
dynamodb to store original url and redirect url( short url)
route 53 to create alias for api domain.
Front end
frontend has been created using react
it has been hosted by amplify which uses cloudfront behind the scenes
CI/CD
has been handled by github actions, as well as staging for dev and production
architecture brief -
user visits frontend app
send request to backend api\
backend converts url and stores to dynamodb
sends back response to frontend
Note :- for trying api use this https://trym.fi/api-docs/
I'm new to AWS environment. I've few questions regarding AWS deployment. An important point to remember here is that I am using free tier of AWS. So I've limitations about resources.
Question1:
I've developed a web app on my local server (using VM with centos Linux) which uses React-SSR for the frontend using Express server. React CSR and SSR is generated using webpack. Backend uses Django as main framework, postgreSQL for database. Frontend and backend communicate with the help of Django Rest Framework. Gunicorn is used to run backend server. I want to use Nginx as reverse proxy server. How can I deploy this app on AWS Elastic Beanstalk? Can Amazon S3 be used to run React-SSR frontend?
Question 2:
This app serves images which'll be uploaded through backend. What's the proper way to handle images and static files with this kind of app? Should images be handled by nginx, react or django? How should I configure Django so that it stores image paths properly in its model(ImageField is used)? Where does Amazon S3 fit in this?
Question 3:
Can this app be made region agnostic under free tier?
The answer to the first question: React can be deployed on AWS S3, if you configure webpack for generate static files (HTML + CSS + JS), or use the NextJS for generate static on build.
The answer to the second question: To use AWS S3 for storing statiс use django-storages
We need to save product's images in AWS. There are 2 ways, it can be uploaded from frontend(website or mobile application) or from backend.
On frontend side we need to store AWS credentials, which can be an issue. So, we want to go with upload on AWS from backend. The flow will be: user select an image, and upload it to backend, and backend upload it to AWS.
Is this ok? What issues can appear?
There is nothing wrong with uploading it to your backend, presumably an ec2 instance, and then having the ec2 instance upload the file to s3 - thats a secure way of doing it and a method I often use.
However, you do not need to expose your aws credentials to the browser if you would prefer to do the upload directly from your browser to s3 - you would just need to add AWS Cognito to the equation.
Using cognito you can get temporary credentials that will allow you to do the upload without compromising security.
https://aws.amazon.com/sdk-for-browser/
You can also used a pre-signed S3 URL (see: Uploading Objects Using Pre-Signed URLs) which you generate in the backend and pass to the frontend app. Then the flow would be something like this:
Request a pre-signed URL from your backend service
The frontend app PUTs the file to the signed URL
Signing the URL on the backend would look something like this (Ruby):
s3 = Aws::S3::Resource.new(region: 'us-east-1')
url = s3.bucket('my-bucket').object('name-of-file').presigned_url(:put)
And on the frontend you could simply do something like this using fetch:
fetch(signedUrl, { method: 'PUT', body: file })
Sorry for doing this kind of question.. but I´m a bit lost here....
I have an app which consist in an Angular4 as frontend and Java app as Backend.
But I´m planning to use AWS Lambda as I´m interested after seeing the videos in Amazon.
The issue is that I don´t know how to get the best from AWS.
My Java app has a very time consuming task to process some images (which takes several seconds).
But I'm not sure if I can deploy all my app in Lambda, or if the idea is to use a EC2 server and then the specific task for the image processing in the lambda. Can anyone please shed some light here?
Also, the frontend app can be deploy in a lambda, or again, lambda is just for specific task?
EDIT:
The application flow would be:
The user in the angular app upload an image, the image goes to the backend server in Java and it´s stored in (maybe) a AWS bucket.. Then the Java app with imagemagick process the image and the result is store in (maybe) another bucket.
So the question is when I need to use Lambda? just to convert the image or if the full backend (and maybe frontend) app would be there?<
I'm asking because I cannot find enough information about that...
First of all you can deploy your Angular frontend to Amazon S3. Also you can use AWS CloudFront to add custom domains and free SSL certificates from Amazon using Amazon Certificate Manager for your domain. For more details refer the article Deploying Angular/React Apps in AWS.
If you don't need to show tge image processing results immediately in frontend
For the image processing backend you can use AWS API Gateway and Lambda along with S3. For this recommended flow is you can use the API Backend to get an Signed URL or AWS STS in Lambda (Or Use Cognito Federated Identities) to get temporary access to Amazon S3 Bucket to Upload the image directly to S3 from Angular App. For more details on this refer the article Upload files Securely to AWS S3 Directly from Browser.
Note: AWS recently released a JavaScript Library called AWS Amplify to simplify the implementation of the above tasks.
After Uploading the image to S3 you can setup an event driven workflow by using Amazon S3 triggers to invoke an Lambda function to perform the image processing and save the process image back to S3 (If you need to store the result).
If you need to show the result immediately
Still use tge previous approach upto Upload to S3 from frontend and then invoke an API Gateway Lambda function passing the file path in S3 to process the image.
To understand the details in connecting both frontend and backend with AWS serverless technologies refer the article Full Stack Serverless Web Apps with AWS.
As a side note, you should be able to implement the required functionality with AWS Lambda without using AWS EC2.