CODEWITHSUNDEEP
node.jsreactjsamazon-ec2
Richard KeMiKaL GeNeRaL Denton
Richard KeMiKaL GeNeRaL Denton

Reputation: 421

React front-end on AWS EC2?

I can't believe how trivial this is, but I can't find any examples where it's not part of a bigger build that just adds further complexity.

I'm putting together a smallish website and while I'm at it, also taking the time to have a play around with some AWS services.

I have a React front-end with no back-end for now, and I'm running it on an EC2 instance. Before everyone starts going crazy telling me it's overkill for what I need, I know I can use Amplify or S3, but like I said, I'm having a play around with something more complex as the project will grow further down the line.

What I want to do...

Run my React front-end on EC2, with some kind of package management (e.g. Forever or PM2 etc) to keep it running when I close my terminal.

Where I'm at...

To my understanding, I need to install Node to serve my React front-end (...but I don't think this is right?).

So, I've:

My problem...

Even though it works, I don't think it's right, and I have an issue.

1) I create the build folder to serve the static files, but still run npm start which is a dev build <- ???

2) When I try and add either Forever or PM2, it doesn't work anymore, as in the site cannot be reached

As I say, it seems so trivial, but the examples I find are also hooking up a database, pulling in things, and hooking up other stuff that I don't need right now, and the documentation doesn't cover it.

Apologies for all the questions, but it saves going back and fore in the comments.

Thanks all :)

Upvotes: 2

Views: 5019

Answers (2)

Richard KeMiKaL GeNeRaL Denton
Richard KeMiKaL GeNeRaL Denton

Reputation: 421

Well! After a bit of fiddling, I managed to do what I wanted.

Basically, what I did was:

1) Created a Node file to serve the static files from React's build folder

2) Installed Node & Forever on EC2

3) Cloned my repo

4) run my Node server file with forever

Here's how...

  • Create a Node server file in the root of your React project to serve the front-end (I called it server.js)
const express = require('express');
const path = require('path');
const app = express();
const port = 3000;

app.use(express.static(path.join(__dirname, 'build')));

app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

app.listen(port, () => console.log(`Running on port ${port}`));

  • Spin up a default Ubuntu EC2 instance with security groups for:

    • SSH - port 20
    • HTTP - port 80
    • HTTPS - port 443
    • Custom - port 3000

  • SSH in to the instance

  • Install Node. These are the steps I used from AWS' pages here

    • curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
    • . ~/.nvm/nvm.sh
    • nvm install node
    • node -e "console.log('Running Node.js ' + process.version)"

  • Install forever

    • npm install -g forever

  • Clone the repo

    • git clone my-repo.git

  • Change into the newly created directory

    • cd my-new-directory

  • Install the project's dependencies

    • npm i

  • Create a production version of the React project

    • npm run build

  • Run the Node server file we created earlier

    • forever start server.js

Your site should now be up and running, with Node serving the production ready build from React's build folder =)

Upvotes: 2

Andy Gaskell
Andy Gaskell

Reputation: 31761

With a static frontend I suppose you could use node, I'd probably not choose to use node for a static website.

Another option would be to install a web server on your EC2 instance like NGINX or Apache. A quick google search will give you plenty of help here - something like "nginx static website".

Since you aren't running a node application PM2 doesn't really make sense. If you ever have a node backend running, you can set up NGINX as an HTTP proxy for your node application.

Upvotes: 1

Related Questions