S3 App File Storage

This part should be relatively easy since we've already done most of the work to get this part working.

Why S3?

Currently, all the images for the qr app are stored in the EC2 instance. This is not a good idea for a few reasons:

1. It's not scalable. If we want to horizontally scale the app, we would need to distribute the images across multiple EC2 instances.
2. It's not durable. If the EC2 instance fails, the images will be lost.
3. It's cheaper to store the images in S3 than to store them on an EC2 instance's EBS volume.
4. It's often better to have users access the images directly from S3 to save on bandwidth and reduce the load on the EC2 instance. And if we connect the S3 bucket to a CloudFront distribution, we can even speed up delivery of the images.

Setup

We already setup the bucket and the IAM policy to allow the EC2 instance to access the bucket. Now we just need to tell the qr code app to store images there instead of the file system.

Fortunately, the qr code app is already able to store images in S3, it just needs some environment variables to be set. The code in the app basically looks like this:

const bucketName = process.env.BUCKET_NAME;
const bucketRegion = process.env.BUCKET_REGION;

if (!bucketName || !bucketRegion) {
  // save the image to the local file system
} else {

  const s3Client = new S3Client({
    region: bucketRegion
  });

  const key = `qr-codes/${name}`
  const command = new PutObjectCommand({
    Bucket: bucketName,
    Key: key,
    Body: buffer,
    ContentType: "image/webp",
  });
  await s3Client.send(command);
  const url = `https://${bucketName}.s3.amazonaws.com/${key}`;
}

Where as long as the BUCKET_NAME and BUCKET_REGION environment variables are set, the app will store the images in S3 instead of the file system.

sudo vim /etc/app.env

MYSQL_URL='mysql://my_app_user:StrongPassword123!@localhost:3306/my_app'
BUCKET_NAME='your-bucket-name'
BUCKET_REGION='your-bucket-region'

sudo systemctl daemon-reload
sudo systemctl restart myapp.service

Now try out the app. Add a new photo and click the SaveQRCode button. Then check out the S3 bucket to see if the images were stored in S3.

If the images are not stored in S3, check the following:

1. Make sure the BUCKET_NAME and BUCKET_REGION environment variables are set correctly in the app.env file.
2. Check the application logs to see if there are any errors.
3. Make sure the app has the correct permissions to access the S3 bucket. This was setup previously in the IAM EC2 part.