I want to use Amazon S3 to serve my static files (images, fonts,...) to client rather than storing them directly in the web host. I've created a bucket and uploaded my files. I've read other questions and tutorials on how to do this and I got confused since I haven't served files from external storage before.
How do I do this in a secure and standard way? I don't know if this should be done in frontend by directly including URLs to objects or having the server request the files using SDK or other options...
I'm using Node, Express and React.
It is very simple.
configure your bucket to be used to serve static content. You can find the steps here.
configure your build process to add your static files to the react bundle.
build your react app and upload the dist/build folder to the root of the bucket.
That will allow you to serve your static files and your Rect App from S3. Your URL will be a little bit ugly: it will be something like: http://bucket-name.s3-website-region.amazonaws.com.
If you want to have a special URL, like www,yourappname.com you'll need to perform a few more steps:
You'll need to create an SSL public certificate.
You'll need to configure a CloudFront Distribution.
Here you can find more info about these extra steps.
IMPORTANT: S3 does not support Express/Node. For that, you'll need a web server.
Related
I have a MEVN Stack app. This requires to upload media files to the database. From the client-side, I am posting a multipart type form which will send the file to the server through Axios. I don't know how to store that in the MongoDB database and retrieve the same.
What you are looking for, is creating an API in node.js to handle uploaded file. (You can use express.js to make your life easier if you are not already using it)
In Vue.js create a component to upload a file and store the files in the file system on the server might be in a folder that is accessible through the web server (like in a public folder).
Finally, save the URL to access the file in MongoDB so, you can reference it later. You can google for tutorials on this, an example is here.
Re-using question from How can I serve static web site from s3 through node expressjs? but used in the context of Firebase.
Currently I use app.use(express.static('public')) and my files located in the public folder of my node js express app and its working good. However, I would like to store those files (index.html, etc) in in our Firebase Hosting (so multiple apps can use this website). I tried
app.get('/', function(req, res) {
res.sendfile('*-firebaseapp.com/index.html');
});
Are there any specific methods for a static website hosted in Firebase to be rendered to an Express App?
Thanks for the help!
The res.sendFile() method defines its path parameter as:
path must be an absolute path to the file.
Your Express function is running in Cloud Functions, which is a serverless container on Google's infrastructure. Firebase Hosting is running in a different infrastructure, with much of the serving happening on edge caches.
The Cloud Functions code doesn't have access to the file system of the hosting infrastructure.
So if you want to serve files from Firebase Hosting, you will have to request them through HTTP(S), similar to what any client will have to do. Alternatively, you can consider deploying the HTML files into your Cloud Functions container, by putting them inside the folder where you have your index.js/index.ts file too.
My goal is to upload a profile picture. I did this in development mode using multer in Node.js. Multer asks for a path where to save the new picture.
In development mode, my Angular frontend and my Node.js backend were in the same file (see below for the project structure). The destination path used in Multer worked for development mode.
I then deployed my backend and frontend separately and now this path doesn't work. How can I make sure that the uploaded profile pictures end up in the same map as it did in development?
This is the structure in development mode. SRC map contains the Angular frontend code and backend contains the Node.js backend.
This is the path I used to store uploaded profile pictures with Multer. The problem now is that I deployed my backend and frontend separately to Heroku and so this path doesn't work anymore.
How can I change my path so that my uploaded profile pictures still get added to this assets/images/profile-pictures map?
The filesystem that Heroku provides is ephemeral: any changes you make to it will be lost the next time your dyno restarts. This happens frequently (at least once per day).
Instead of storing uploaded files on the local filesystem, Heroku recommends storing them on a third-party service like Amazon S3. The multer-s3 library should let you do that fairly easily.
Once the files have been stored you can access them via Amazon's SDK or, if you've configured your uploads accordingly, via HTTP. Regular HTTP access can be authenticated or anonymous.
Sorry, It might be very novice problem but I am new to node and web apps and just have been stuck on this for couples of days.
I have been working with a API called "Face++" that requires user to upload images to detect faces. So basically users needed to upload images to my webapps backend and my backend would do an API request with that image. I somehow managed to upload the files at my node's backend using tutorial provided below but now I am struggling how to use those image files. I really don't know how to have access to those files. I thought writing just the filepath/filename would help but it did not. I am really new at webapps.
I used tutorial from here: https://coligo.io/building-ajax-file-uploader-with-node/
to upload my files at back-end.
thanks
You can also use the Face++ REST API node client
https://www.npmjs.com/package/faceppsdk
As per in documentation it requires a live URL on web. Then you have to upload your files into remote location (You may upload files to a Amazon S3 Bucket)
And also you check the sample codes from Documentation where you can upload directly to Face++
The users in my site need to be able to upload a bunch of files and folders into S3 while maintaining the folder structure.
Say they have the following files in their local boxes.
/file1.jpg
/some_folder/file2.jpg
After upload, I need their s3 urls to be
http://s3bucket.amazon.com/usersfolder/file1.jpg
http://s3bucket.amazon.com/usersfolder/some_folder/file2.jpg
How can i do this ? To make matters a little more complicated, Upload from client side can be initiated only after they download an upload policy.
Edit: I would like to know a solution for the front end part of this question. Looks like on server i can use a wildcard character to specify access permissions, so i am good on that part.
I am using Node.JS/Express JS as a backend