Web Tier

1. Install unzip and unzip code from file frontend.zip

2. Same as Application Tier, we also create a directory and user for the frontend project

3. Change the backend url to the ip of Application tier EC2

4. Install node, npm

5. Install nginx

6. Build the project, after the build is completed, a folder named build will be created

npm run build

7. Use nginx as a web server: create an nginx file named react.conf at the path /etc/nginx/conf.d/. Add content (like photos). Then restart nginx

8. Use nginx to revert the proxy: create a file named react_nginx at the path **/etc/nginx/sites-enabled/ with the content:

9. Open additional HTTP port 80 of Security Group - Public subnet

10. nginx will forward requests from port 80 to port 3000 running the project, now access the project using the EC2 Public ip

11. Error 500. This error occurs because we have not granted permission to another user to access the build folder. We just need to check which user nginx is, here it is www-data, then add it to the group frontend

12. Done, our website is already working via EC2’s IP port 80.