4002. Deploying Web Applications to Cloud ServicesHeroku, Azure, EC2, Netlify, and Travis CI
Tutorial for how to deploy Angular, React and Node.js applications to cloud services.
1. Deployment
1.1 Deployment Types
Before deploy your apps, you need to first understand what is the app type.
- Static Sites(built with Angular, React, or other front-end frameworks)
- Server(built with Node Express, ASP.NET, PHP, Python, Spring, etc.)
- Full Stack(including both client and server)
1.2 Cloud Services
There are many cloud services where you can deploy angular, react or express applications. Your web applications are served by their servers and can be accessed globally through internet. Some of them provide free cost for hosting your sites. Also, they provide paid options for more advanced features.
- Heroku: https://www.heroku.com/
- Azure: https://portal.azure.com/
- Amazon EC2: https://aws.amazon.com/ec2/
- Netlify(Static sites only): https://www.netlify.com/
2. Tutorials for Deployment
2.1 Static Sites
Angular or React app will be compiled to static files when these kinds of apps are deployed to server. Even if they may call backend server(eg. RESTful services) to fetch data, they are still static sites from the deployment perspective.
- Deploying Text Compare Angular App to Netlify
- Deploying Game Store Angular App to Netlify
- Deploying Game Store React App to Netlify
- Deploying Game Store React App to Azure with FTP
2.2 Server Sites
In the most of cases, when we are talking about Node.js apps, we are actually talking about Express applications. As every productive Node.js app has a web server and express is the best web server for Node.js.
- Deploying Socket.IO App to Heroku
- Deploying Socket.IO App to Azure
- Deploying React and Socket.IO App to Heroku
2.3 Full Stack Sites
We may have the capability to build the entire web application from backend to front end. For example, we use so called MEAN stack (MongoDB+Express+Angular+Node.js) to build an online judge application. In this case, we need to deploy both the client and the server.
2.4 Three Ways to Deploy Angular App to Heroku
For Angular or React apps, we can deploy them as static websites after build them locally. Or, we can let the server to build and serve them with express server. In addition, we can use Travis to deploy them continuously.
- Deploying Angular App to Heroku as Static Website
- Deploying Angular App to Heroku with Express Server
- Continuously Deploy Angular App to Heroku using Travis-CI
3. CI/CD
Continuous integration and continuous delivery.
- Continuously Deploy Angular App to GitHub Pages using Travis-CI
- Continuously Deploy Spring Boot App to Heroku with Travis-CI
- Continuously Deploy Full Stack React App to Heroku and Netlify with Travis-CI
- Continuously Deploy React and Socket.IO App to Heroku with Travis-CI
- Online Judge - Continuously Deploy MEAN Stack App to Heroku and Netlify with Travis-CI
- Continuously Deploy Full Stack React App to Heroku with Travis-CI