I've enabled the accelerated transfer feature of my s3 bucket and I want to use its endpoint to read and write in that bucket. I am using AWS amplify to access the s3 bucket but cannot find enough resources on this issue.
The Amplify team is tracking this recent feature request here: https://github.com/aws-amplify/amplify-js/issues/4468
Related
It is my first time using AWS S3. I am trying to store images (jpg/png etc.) on S3 and have the URL stored on a database. The application essentially logs the user's session and S3's URL when they submit a picture (profile picture), and when they want to update the profile picture, the original S3 stored picture will be deleted and replaced with a new one.
Currently I am using https://next-s3-upload.codingvalue.com/setup next-s3-upload, which successfully uploads images onto S3 but not deleting. The entire tech stack is NextJS, Prisma and Planetscale, to be hosted on Vercel.
Any tips on how to operating CRUD for S3 would be appreciated, as I am stuck on reading up AWS-SDK but no joy on React/NextJS.
Read the AWS SDK for JavaScript Developer Guide. This will teach you how to perform AWS operations using the AWS SDK for JavaScript, including many Amazon S3 operations.
What's the AWS SDK for JavaScript?
This SDK can be used with React too.
Getting started in React Native
For Amazon S3 operations, see:
Amazon S3 examples using SDK for JavaScript V3
To delete an object, see this topic that shows you the code example:
https://docs.aws.amazon.com/sdk-for-javascript/v3/developer-guide/javascript_s3_code_examples.html#w4aac23b9c25c13
You can also find Amazon S3 code examples in Github here:
https://github.com/awsdocs/aws-doc-sdk-examples/tree/main/javascriptv3/example_code/s3/src
I am looking for some advices, I am using Next.js to serve static pages that can be updated frequently, my app uses all kind of rendering : SSG, SSR and iSSG (new Incremental Static Site Generation feature).
Exemple of AWS architecture I thought:
EC2 to deploy a node.js server running next.js app
(if it is possible) Store/update static pages generated by Next.js
SSR/iSSG in a S3 bucket
Cloudfront to cache pages (using either EC2 or S3 bucket if it is
possible)
Do you know what is the best AWS architecture I could use according to my needs?
Edit: Maybe AWS Elastic Beanstalk is the solution, I am taking a look.
Next.js 11 + SST + Lambda#Edge
Serverless deployment was introduced in Next.js 8. This makes it easier for you to deploy your Next.js app to AWS Lambda functions, and take advantage of the serverless architecture. It's often much cheaper to host this way, and faster because you are serving the pages behind a CloudFront CDN network.
The SST framework makes it easy to help build and deploy your Next.js app to your AWS account using a combination of S3, Lambda#Edge and CloudFront. It also helps you configure a custom domain for the endpoint.
Here's an example walking through the setup - https://serverless-stack.com/examples/how-to-create-a-nextjs-app-with-serverless.html
I am looking to host several sites for people on a single S3 bucket. I understand that one could use Cloudfront and HAProxy to direct people to a specific location on an S3 bucket. My question is, what is the best means to build a react app on the fly, then send the 'build' folder to S3?
Is this even possible? I guess it's more of what's an efficient way to do this given the resources. Would I need to setup my own server or is there some serverless means using Lambda etc.
#bearsworth It is easy to host React applications on S3 with a tool called AWS Amplify. One thing that would require some clarification is why you would like to host several sites from the same bucket?
With amplify you can start with:
npx create-react-app myappname
then install amplify and its react tools with:
npm i -s aws-amplify aws-amplify-react
next run(follow prompts):
amplify configure
followed by:
amplify init
Afterward go to the AWS Console and search for Amplify. You will see a screen like this one Where is says get the most out of the Amplify console complete the second step to link your domain name. Click the Add a custom domain with a free SSL certificate link. It should look like this You can also connect a branch to your favorite code repository and your off to the races!!!
The downside to your request is each site would be in a separate S3 bucket. Amplify is a serverless platform so zero EC2 instances are needed. Going this route has saved me hundreds of dollars per month in infrastructure costs. The Amplify platform takes the stress out of provisioning instances, Kubernetes clusters, DNS configuration, API development, Authentication flows, and storage retrieval. For the full-stack React developer I feel it is a great resource.
Some features to try are:
Amplify add storage
Amplify add API
Amplify add hosting
Amplify add Auth
happy coding
I've an existing web application developed in angularjs 1.5. And now, I'm planning to deploy it in a serverless architecture on AWS.
I've been googling around to get leads on how to achieve this. But, most of the links/tutorials that come up in Google search, suggest using ng-toolkit. However, when I start following those links/tutorials, I realize that those tutorials use angular2.0. These links/tutorials are not helpful, as my angular version is 1.5 and I know, angular2.0 is way different from it's predecessor.
So, my question is -
Is it possible to have my existing angularjs 1.5 application, to be deployed in a serverless architecture on AWS? If yes, can you share some links, that will help me set this?
We have successfully deployed our Angular 1.x web applications to an AWS S3 bucket, and then configure the bucket to support static website hosting.
You will want to give your bucket the same name as the URL of your desired website. Your bucket contents will need to be public, so be careful with what you push to this bucket. Should only be your Angular website bits.
You can then go to Route53 and create an alias A record to point to your S3 bucket. But note that is will only give you http:// support. To support https://, you will need to create a certificate in AWS CertificateManager and a corresponding AWS CloudFront distribution. You can source your CloudFront distribution to pull from your S3 bucket, and use the new certificate to support https://. You will then need to go into Route53 and point your A record to the CloudFront URL.
Deploying an angular 1.x application on a serverless architecture is like deploying any static website. You create an AWS S3 bucket, configure it for static website hosting, then set up CloudFront with https (use the CertificateManager to get a free certificate) to point to the public url of the bucket as origin.
Then you can set up Route53 to point your domain to the CloudFront URL. Here is a YouTube-Tutorial describing the whole process: https://www.youtube.com/watch?v=uwgB_sIhIko
I have some questions regarding deploy a React Application on cloud front.
How the caching and updating of front end website hosted on Cloud Front works?
When I upload a new files to the bucket I will see the changes IMEDIATELY after accessing the site again? If not, how long it will take?
I need to make an invalidate request to see the changes working on the website? If yes, how long it will take?
What is the best approach to deal with cache and update of Single Page applications in Cloud Front? (I am using a React Application and Webpack)
What you need to do is purge the cache of the bucket or "invalidating" a file.
https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Invalidation.html
So install the aws cli and run the following command:
aws cloudfront create-invalidation --distribution-id $CDN_DISTRIBUTION_ID --paths "/*"
I'd suggest you use your S3 bucket for development.