search

RbAvci / My-Coursework-Planner

1 stars 0 forks source link

[TECH ED] Frontend Deployment #302

Open RbAvci opened 1 month ago

RbAvci commented 1 month ago

From Module-Cloud created by SallyMcGrath: CodeYourFuture/Module-Cloud#1

Link to the coursework

https://github.com/CodeYourFuture/React-Module-Project

Why are we doing this?

Setup Github Actions for CYF Hotel Frontend deployments to S3

  1. Create GitHub Actions Workflow File: In your CYF Hotel repository, create a new YAML file under the .github/workflows directory. Name it something relevant, like frontend-s3-deploy.yml.

  2. Configure AWS Credentials: Utilize GitHub Secrets to securely store your AWS credentials. These secrets will be used in the GitHub Actions workflow to authenticate against AWS.

  3. Write S3 Deployment Steps: In the YAML file, define the steps to install AWS CLI, configure AWS credentials, and sync your build folder to your S3 bucket.

  4. Test the Workflow: Push a change to your repository or manually run the workflow from the GitHub Actions tab to verify that the S3 deployment works as expected.

Maximum time in hours

3

How to get help

If you are doing this for the first time, this will be hard. You must reach out to volunteers to help you. Your ability to ask for help is be actively assessed during this time.

You are not expected to be able to complete this module completely independently. You are expected to get help from volunteers.

How to submit

In this advanced module you will demo your work.

RbAvci commented 4 weeks ago

This project is running in EC2 as a whole project.

http://ec2-16-171-173-118.eu-north-1.compute.amazonaws.com:3000

Ara225 commented 2 weeks ago

Hi Sorry for the delay in answering. I'm afraid EC2 won't do, you need to deploy this to S3 as the ticket asked, these are quite different skill sets and for you to go through to the launch you would be expected to fulfill it as written.

Happy to jump on a call whenever possible to work through

RbAvci commented 2 weeks ago

Hi Sorry for the delay in answering. I'm afraid EC2 won't do, you need to deploy this to S3 as the ticket asked, these are quite different skill sets and for you to go through to the launch you would be expected to fulfill it as written.

Happy to jump on a call whenever possible to work through

Hi Anna, this project (Video recommendation) is not a static website and needs to be set environment variables for configuring backend URL. S3 is not suitable for dynamic configuration. Because of that I used EC2 for Frontend too. i am open to any advice if there is a proper way to deploy a React project to S3. 
Ive deployed my portfolio website to S3 as it is a static website in the first week of the cloud module, it worked seamlessly. Here is the screenshot for that S3 bucket. If you ask me to write actions for this I can deploy it again to S3 and do that as well.

Image

Ara225 commented 2 weeks ago

Hi, I'm afraid you've misunderstood. Environment variables in frontend apps are not like environment variables in backend apps.

Frontend apps have to build to static HTML, JS and CSS, so the environment vars become hard coded in the static files at build time. If you search the js file that npm run build creates for the your backend url, you will find it there. This is why you never put secrets in frontend apps BTW.

Backend apps are very different, the environment vars in .env become actual environment vars to the process.S3 doesn't let you run processes on it it only let's you serve files.

I'm confident you can do this it's just a concept confusion which is easy to make. I would encourage you to do the task in S3 if you have time, otherwise push on