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
Add a comment
|
4 Answers
You can use Amazon S3.
Do npm run build in your local instance.
Upload the files to S3 bucket instance.
Static website hosting can be chosen.
11 Comments
Johnson Samuel
I have deployed my application which uses react-router-dom and it works. You will probably want to use react-router-dom for 99.9% of web dev.
Boopathi kumar
I opened the index.html after prod build in my browser but not worked that’s why i am asking here is it working on s3?
Johnson Samuel
Please use s3 bucket of Amazon to upload the files in build folder and test it. Let me know if it still doesn’t work in s3 and I ll be happy to help you out because I know how much I struggled initially to deploy :D
C Bauer
Note that static hosting a react site that contains credentials of any sort is extremely unsafe
Colin D
The OP asked for EC2, and you responded with S3, and also this answer doesn't contain much convenient automation...
|
I deployed my app on EC2 with the help of the above mentioned link. This link also helped -
2 Comments
Roster
How to make react app to run in the background after deploying the app in ec2. Currently after closing the terminal ec2 url is not accessable.
Prav
@Sravani, please dont use Ec2 if you are a beginner, its way too costly and a little confusing for beginners. You can easily build the whole app using digital ocean's droplets - digitalocean.com/community/tutorials/… Just make sure you complete all the prerequisites mentioned in the link. Now, as for your question, you can use pm2 for running an app forever in the production mode. Step-1 install pm2 with
npm install -g pm2 Step-2 close server running react,run app with pm2 with sudo pm2 start server.jsYou 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.
- In your project run this command
npm run build. - It will create a build folder in your project.
- Create zip of the project folder and move it on your VM (ec2) and extract that.
- 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}` ) );
Comments
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.
