Publish a ViteJS + React web app to production using EC2 and Apache2

Background:

A website can be hosted by following various processes or methods or tools. In this post, I will share the steps I followed to manually deploy a dynamic website in an AWS EC2 instance.

Assumptions:

In order to keep this post to the point as much as possible, I will be assuming few things-

• I have a GitHub repository where my ViteJS + React web app is pushed.
• I have an AWS account and IAM user (not the root user) with “admin” level access.
• I have created an EC2 instance using “Ubuntu” as the operating system. My EC2 instance is using ubuntu v22.x.
• I have started my EC2 instance and it is up and running.
• I have created an Elastic IP from AWS EC2 console and will be using this IP as the public IP of my website.

Steps:

At first, log into the AWS console and connect to the EC2 instance using EC2 Instance connect (this is browser based).

Then run the below commands in sequential order. I will note down the purpose of each command.

# update ubuntu system packages
sudo apt-get update


# install git
sudo apt install git -y


# install nvm, this url is the latest version of nvm 
# at the time of writing this document
# may need to be updated for other versions accordingly
sudo curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.5/install.sh | bash



# adding nvm paths, so that the bash can identity `nvm ...` commands
# below commands are separate commands
# and need to be executed separately

export NVM_DIR="$HOME/.nvm"

[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"

At this point, the EC2 instance needs to be restarted so that the bash terminal can execute the nvm commands.

Once the instance is up and running, connect to it via EC2 instance connect again and run the below commands sequentially.

# install latest version of NodeJS
sudo nvm install --lts


# install Apache2 http server
sudo apt install apache2 -y

At this point, the EC2 instance needs to be restarted again so that the bash terminal can execute the apache2 related commands.

Once the instance is up and running, connect to it via EC2 instance connect again and run the below commands sequentially.

# check if apache2 http server is already enabled or not
sudo systemctl is-enabled apache2


# start the apache2 http server
sudo systemctl start apache2

Now, we should have our http server up and running. It’s time to download our website code from GitHub repository.

In order to connect to the GitHub repository, I need to generate an ssh key inside the EC2 instance and add the public key inside my GitHub profiles’ SSH key list.

# generate ssh key; please follow the prompts accepting default values
ssh-keygen -t rsa

Navigate to the .ssh directory within the bash terminal. This may require moving out of the current directory using “cd ..” command or moving into other directory using “cd <directory_name>” command. You can also check the items inside a current directory using the “ls” command.

When inside the .ssh directory, run the below command

# display the public key of the generated ssh key pair
cat id_rsa.pub

Manually copy the entire public key into the clipboard or a text file.

Now, follow this link https://docs.github.com/en/authentication/connecting-to-github-with-ssh/adding-a-new-ssh-key-to-your-github-account and add the copied key into GitHub account.

Now, once the key is added to the GitHub account, come back to the EC2 instance connect browser window and navigate to the /home/ubuntu/ directory within the terminal. Again, This may require moving out of the current .ssh directory using “cd ..” command or moving into other directory using “cd <directory_name>” command. You can also check the items inside a current directory using the “ls” command.

Once within the /home/ubuntu/ directory, execute below command.

# cloning using the ssh url from github
git clone git@github.com:<your_user_name>/<your_repo_name>.git


# navigate inside your repo folder
cd your_repo_name


# install all project dependencies
npm install


# build project
npm run build

Building the project will generate a dist folder inside your project folder. And the dist folder should contain an index.html file along with some other files and folders.

Now, within the terminal, navigate to the /var/www/html folder by using “cd ..” and “cd <directory_name>” commands as needed.

Once within the /var/www/html folder, run below command.

# rename the existing index.html file to index.html.backup
sudo mv index.html index.html.backup


# copy over every file and folder from your project dist folder
# into the /var/www/html folder
# /var/www/html is the folder apache2 http server uses to serve a website
sudo cp /home/ubuntu/<your_repo_name>/dist/* . -r


# restart the apache2 http server to take effect of the changes
sudo systemctl restart apache2

Now, copy over the public ip of the EC2 instance and paste it in a new browser window. Please ensure that the URL is using http (and not https, as we haven’t configured it).

Then you should see your website is running in the browser.

I hope this helps.