Reactjs App - Serve images from AWS instead of server folders

I have a react App where users can post images. When a use posts an image, my SQL table get updated. The column imgSRC gets updated with the name of the file.
For example - mysite_1536290516498.jpg

How can the code below be modified to server images from AWS instead of destFile: $root/dist/posts/$filename?

$root/dist/posts/$filename

My server code to post an image and update database is:

const app = require('express').Router(),
db = require('../../../config/db'),
Post = require('../../../config/Post'),
User = require('../../../config/User'),
root = process.cwd(),
upload = require('multer')(
dest: `$root/dist/temp/`,
),
ProcessImage, DeleteAllOfFolder = require('handy-image-processor')

// POST [REQ = DESC, FILTER, LOCATION, TYPE, GROUP, IMAGE(FILE) ]
app.post('/post-it', upload.single('image'), async (req, res) =>
try
let id = req.session,
desc, filter, location, type, group = req.body,
filename = `mysite_$new Date().getTime().jpg`,
obj =
srcFile: req.file.path,
destFile: `$root/dist/posts/$filename`,
,
insert =
user: id,
description: desc,
imgSrc: filename,
filter,
location,
type,
group_id: group,
post_time: new Date().getTime(),


await ProcessImage(obj)
DeleteAllOfFolder(`$root/dist/temp/`)

let insertId = await db.query('INSERT INTO posts SET ?', insert),
fullname = await User.getWhat('fullname', id)

await db.toHashtag(desc, id, insertId)
await User.mentionUsers(desc, id, insertId, 'post')

res.json(
success: true,
mssg: 'Posted!!',
post_id: insertId,
fullname,
filename,
)
catch (error)
db.catchError(error, res)

)


1 Answer
1

You do this using your Http server where you have access to .htaccess file or httpd.conf file in apache http server.

Just redirect all request for /dist/posts/ to AWS Path.

Before this you need to make sure you have same directory structure in AWs S3 bucket.

So when request comes from client for /dist/posts/image it will go to
http://aws/dist/posts/

This is also known as CDN if you google.

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.