I have an API maded with express allowed in a EC2 container.
Also theres an app that use this API to get some post or users data.
When they upload images i use multer to save them in a folder in the project, and save the name of image in a MySQL databa, but i dont know how to send the image to front app, o how they can get the image from container.
This is my folders arch:
use express-static on images directory https://expressjs.com/en/starter/static-files.html on images directory or installing nginx or apache and serve images directory
Related
I'm beginner and using MERN. I've successfully deployed frontend and backend separately on render for testing purposes and when a user signs up they can choose a profile picture, now on localhost this works fine and it successfully adds to mongodb and shows in the web application. However when deployed I get an error that I can't 'GET' the image from the specific path.
Now I'm trying to workout with this is the case but could someone explain in ELI5 terms? Also would I need to host my images such as cloudinary? Thank you.
Tried to upload images when deployed but not being fetched.
You should consider using cloudinary or an S3 bucket to store images in production.
First of all, call your /upload api route
Generate a uuid + .extension (png or jpg)
Upload this key as the name with your image file to cloudinary (for exemple)
Then save this key into your database to be able to access it later on.
If you consider using an S3 bucket, you should always configure a CDN between your client and your bucket to avoid billing’s surprises
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.
it was my first time implementing data upload (jpeg files) on nodeserver.
let say i use this RESTapi to store uploaded data.
http://localhost:3000/uploads/
when i was serving my app in localhost (with ng serve command), it works fine. but i got confused while i try to build the project. i mean i store the files on nodejs directory but my angular only read files on it's dist folder.
i just realizing that both nodejs app and angular app has different directory.
my question is, is it right syntax to do this all? should i made http call to read the desired files or should i change upload path to go to my angular assets path?
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.
I have a sails nodejs app running on heroku. I have several images that need to be pulled onto the page i.e. logo. When I had images pulled from photobucket everything works. I moved images to AWS S3. Followed https://devcenter.heroku.com/articles/s3. Images are accessible by their link i.e.:https://s3.amazonaws.com/kenguru/main/kglogoweb.png. But not being pulled when page is loaded.
Any suggestions will be greatly appreciated.