Various Ways to Host React App in AWS: EC2(ubuntu)

This Blog is a continuation of earlier series Various Ways to Host React app in AWS infrastructure.

1. Using AWS Amplify
2. Using EC2/Lighsail instance
3. Using S3 bucket

Generally, You might be using tools like vite or create-react-app to install and run your React based app in your local machine. But, Have you wondered on how to run a react app on a production server?

Let's discuss and try to dig into it:

Vite :

Vite is a build tool and development server for react that’s designed to make web development faster. The vite official website describes itself as a Next Generation Frontend Tool. It provides incredibly fast development experience. It’s particularly well-suited for small to medium-sized projects, prototypes, and applications that require quick feedback during development.

It serves two purposes:

• Build Tool: Vite is known for its fast build times. It handles the efficient bundling and building of your project for production(i.e. Bundling javascript , css and assets).

• Development Server: Vite can be used as a development server that supports hot module replacement (HMR), which means changes to the code are reflected automatically in the browser without needing a full page reload which results in a faster and more seamless development experience.

  But in general, Vite or Create-react-app tools are generally used in development environment, so instead of development server like vite, in this blog we will use apache to server webpages in our production environment.

Apache :

Apache a web server, whose major function is to handle the request made by the client(end user) to the web application and returns back the response to the client sent by the web application. The other important uses of web servers other than handling requests are DNS Resolution, Security, Routing, Application Handling and so on but we won’t be discussing here in detail.

Since, in this blog we are moving react app to production from development so, it is obvious you might have a react app ready.

Although there are numbers of web servers available including apache, nginx and so on, in this article we will be using apache server (which is one of the most used web server for production application) ,as apache is a production ready web server which can handle huge number of request to server with other built in features and configuration options.

Step 1: Build the React App

First we need to built the react application using following command:

Go to the application root in your local machine and run the following npm or yarn command based on your preference. Based on package manager you have in your machine npm or yarn:

npm run build

or

yarn build

This will create a folder build in the application root. This is the folder where all of your build files of applications will be residing.

Now we shall focus on setting up our hosting server(ubuntu) by installing web server to handle the request.

Step 2. Apache Installation

To install Apache2 run following commands:

$ sudo apt update 
$ sudo apt install apache2

Step 3. Creating Application Folder and granting permissions (in server)

In Apache server the code is generally paced in folder /var/www/html but it is just a standard practice and you are free to choose the folder but make sure you are not breaching the security by placing this app in a secure location like users folder, which are more restrictive.

Now, we create a folder to place our code inside /var/www/html so our apache server can serve the pages from this folder.

Although you are free to place an application anywhere within your server, but, placing the app in private folders like (user) can raise security concerns, as we need to provide additional permission to the application folder which can expose the folder to inject security loops and increase security risk.

Once an application folder is created wherever may be the location e.g. /var/www/html. These folders are by default owned by the root user, since apache web servers are needed to make some modifications, permissions must be configured to allow apache to make modifications to the files.

The default user for Apache is www-data or apache for ubuntu systems, so we use chown command to change ownership of folder:

$ sudo chown -R www-data:www-data /var/www/html

Now adjust the file and folder permission

$ find /var/www/html -type d -exec chmod 755 {} ;
$ find /var/www/html -type f -exec chmod 644 {} ;

Here we are providing 755 permission to all the directory and 644 permissions to all files.

Step 4: Creating or editing Configurations for the virtual host or default host.

If you need to host multiple applications in this same server, then you need to create virtual configurations for each separate application you require. You can learn how to setup multiple website in this blog: Setting up Multiple Virtual Hosts in Apache server.

Now, edit the default host file using command, this command is responsible to open up a editor in terminal to edit this file:

sudo nano /etc/apache2/sites-available/000-default.conf

Here nano is a command line text editor for ubuntu.

This fill will be opened in a command editor . Update the below code copy paste this code

<VirtualHost *:80>
    ServerAdmin webmaster@localhost
    DocumentRoot /var/www/html/
	ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
</VirtualHost>

Step 5 : Enabling the Virtual Host file

If you check the apache configuration file using command

$ sudo ls /etc/apache2/

You can see folder sites-available and sites-enabled along with other files and folders. The 000-default.conf (or any other web site apache configuration files that you are hosting virtually resides here ) file that you updated earlier is a configuration file for your website which is not enabled by default. The sites-enabled directory contains symbolic links to the configuration files in sites-available that should be made active.

You you don't understand this , its okay you may simply run this commands to enable the virtual host:

sudo a2ensite 000-default.conf

sudo service apache2 restart

To apply configuration changes you need to always restart the apache server as in above code:

Finally,

Step 6: Uploading the code to /var/www/html

Until now we have created and set up a configuration for apache. Now it's time to move the production build application in step 1 to the apache web root. so, once you move the files from the dev server /Your-application/build folder to /var/www/html on the live ubuntu server , your deployment is complete. You can use scp command to move code from local server to production or you may use ftp or some other type of file transfer protocol.

Step 7: Enable Rewrite mode

In the context of Apache HTTP Server, "rewrite mode" typically refers to the state of the mod_rewrite module. Mod_rewrite is an Apache module that provides a powerful way to manipulate URLs or perform other actions on incoming web requests. It is often used to rewrite or modify URLs, perform URL redirection, and implement other URL-related tasks. Apache server by default has rewrite mod disabled .

Now, to enable mod-rewrite run following comand:

sudo a2enmod rewrite

Now change the configuration of your website to allow rewrite rule in .htaccess within your application

Run the command below to update the configuration of apache:

sudo nano /etc/apache2/sites-available/000-default.conf

Your final 000-default.conf file must look like this

<VirtualHost *:80>
ServerAdmin webmaster@localhost
            DocumentRoot /var/www/html/
            ErrorLog ${APACHE_LOG_DIR}/error.log
            CustomLog ${APACHE_LOG_DIR}/access.log combined
         <Directory /var/www/html >
                Options Indexes FollowSymLinks
                AllowOverride All
                Require all granted
           </Directory>
</VirtualHost>

Save the configuration above and restart the server

Step 8 : Updating .htaccess file for url rewrite

.htaccess file is a project specific configuration file for apache, unlink the .conf file discussed above (000-default.conf), this file is placed on root of the application, which is used to change configuration and folder wise behaviour of apache with respect to project.

Finally we add a .htaccess file in application root i.e. /var/www/html in our case so we can define rewrite rules .

 Options -MultiViews
 RewriteEngine On
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteRule ^ index.html [QSA,L]

Congratulations, you have finally moved your react application to production in EC2.

Other Blogs from this series

1. Various Ways to Host React app: AWS Amplify
2. Various Ways to Host React app: Using S3 storage