How to deploy create-react-app in AWS EC2

Question

I am using react-router so I want to host in AWS Ec2. How to deploy the app and run permanently in the background or let me know if any other way

Answer 1

You can build and deploy the React.js app in any cloud VM (Virtual Machine) like ec2 with custom port.

By using it you can deploy multiple react applications on the same machine.

What do you need to deploy the application?

1. Nodejs
2. PM2js
3. Koa.js
4. Koa-static.js

You just need to flow this procedure.

1. In your project run this command npm run build.
2. It will create a build folder in your project.
3. Create zip of the project folder and move it on your VM (ec2) and extract that.
4. Create a Nodejs script file in your project root folder and paste a below script in it.

Filename: buildStart.js

const httpPort = 80;
const httpsPort = 443;
const koa = require( 'koa' );
const serve = require( 'koa-static' );
const http = require( 'http' );
const https = require( 'https' );
const fs = require( 'fs' );
const app = new koa();
const cert = fs.readFileSync( '/ssl/cert.crt' );
const key = fs.readFileSync( '/ssl/private.key' );

app.use( serve( __dirname + '/build', {
    maxage: 365 * 24 * 60 * 60
} ) );

http.createServer( app.callback() ).listen( httpPort, () => console.log( `sever is listening on ${httpPort}` ) );
https.createServer( { cert, key }, app.callback() ).listen( httpsPort, () => console.log( `sever is listening on ${httpsPort}` ) );

OR

The above code will start your react application on both HTTP and HTTPS. if you don't have certificates for https then you can only start it for HTTP.

const httpPort = 80;
const httpsPort = 443;
const koa = require( 'koa' );
const serve = require( 'koa-static' );
const http = require( 'http' );
const https = require( 'https' );
const fs = require( 'fs' );
const app = new koa();

app.use( serve( __dirname + '/build', {
    maxage: 365 * 24 * 60 * 60
} ) );

http.createServer( app.callback() ).listen( httpPort, () => console.log( `sever is listening on ${httpPort}` ) );

Answer 2

I'm a little bit new to React, but I wanna add my experience here. I deployed my CRA app on AWS EC2 using Apache.

• You follow this link to install Apache after launching the EC2 instance.
• Build your react app and upload 'build' folder.

Now done. Finally, make sure to use HashRouter rather than BrowserRouter. Because EC2 didn't allow the .htaccess file to redirect all requests to index.html, but replacing BrowserRouter with HashRouter helped me solve that issue. Hope this helps others save the time. Thanks.