DEV Community

Cover image for How To Deploy a React / Next.js Application with Apache2 on Ubuntu in AWS EC2 instance?
Mohammad Anisur Rahman
Mohammad Anisur Rahman

Posted on • Edited on

How To Deploy a React / Next.js Application with Apache2 on Ubuntu in AWS EC2 instance?

In this tutorial, you’ll deploy a React / Next.js application on Ubuntu EC2 instance running Apache2. You’ll deploy an application using GitHub repository, use an Apache2 config file to determine where to deploy files, and securely run with apache2 proxy server. By the end of this tutorial, you’ll be able to build and deploy a React application.

Prerequisites
  • You need a ubuntu ec2 instance in AWS server
  • First Install nvm and start to Install Node with nvm 
~ sudo apt-get update

~ sudo curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash
Enter fullscreen mode Exit fullscreen mode
  • Activate the nvm 
~ . ~/.nvm/nvm.sh
Enter fullscreen mode Exit fullscreen mode
  • Install Node.js with nvm and check the version. 
~ nvm install node

~ node -v
Enter fullscreen mode Exit fullscreen mode
  • Install PM2 to manage proxy server 
~ npm i -g pm2
Enter fullscreen mode Exit fullscreen mode

Now you need to create a project directory and change the ownership to ubuntu and give permission to initialize a git repository.

  • Make a directory and change the ownership to ubuntu 
  ~ sudo mkdir project_name 

  ~ sudo chown -R ubuntu:ubuntu directory_name

  ~ sudo chmod 777 DIR_NAME cd DIR_NAME  # change permission
Enter fullscreen mode Exit fullscreen mode
  • Add your Github Repository in your project. If you want to generate SSH key for GitHub check the link. 
~ cd project_directory #go to your project directory

~ git init

~ git remote add origin repository_path #add your repo path

~ git pull origin main
Enter fullscreen mode Exit fullscreen mode

Finally, you are ready to build the project and run it with proxy server.

  • For development mode with next.js application 

~ pm2 start npm --name "project_name" -- run dev
Enter fullscreen mode Exit fullscreen mode
  • For production mode [React / Next.js] - Start or Run node server with pm2 

~ npm run build

~ pm2 start npm --name "project_name" -- start 

~ pm2 start npm --name "project_name" -- start -- --port=3001 #Start project with specific port if needed
Enter fullscreen mode Exit fullscreen mode
  • See logs at 
~ nano /.pm2/logs/XXX-err.log
Enter fullscreen mode Exit fullscreen mode
  • For watching file changes, add below flag with start command 
--watch Synchronous
Enter fullscreen mode Exit fullscreen mode
  • Save the proxy server 

~ pm2 save ***

~ pm2 startup
Enter fullscreen mode Exit fullscreen mode

At the end, to deploy the application, you need to configure the Apache server.

Apache Server Configuration

  • First enable the Proxy Server 
~ sudo a2enmod proxy

~ sudo a2enmod proxy_http
Enter fullscreen mode Exit fullscreen mode
  • Restart the Apache server 
~ sudo service apache2 restart
Enter fullscreen mode Exit fullscreen mode
  • Error log command 
~ tail -10 /var/log/apache2/error.log
Enter fullscreen mode Exit fullscreen mode
  • Make .conf file and configure with your domain on /etc/apache2/sites-available/ 
~ sudo nano example.conf
Enter fullscreen mode Exit fullscreen mode
  • Paste the following configurations and update with your own way. 
<VirtualHost *:80>
    ServerName domain.com
    ServerAlias www.domain.com
    ProxyRequests Off
    ProxyPreserveHost On
    ProxyVia Full
    <Proxy *>
        Require all granted
    </Proxy>
    ProxyPass / http://127.0.0.1:3000/
    ProxyPassReverse / http://127.0.0.1:3000/ 
</VirtualHost>
Enter fullscreen mode Exit fullscreen mode
  • Enable the newly created .conf file and disable the default one. 
~ sudo a2ensite example.conf

~ Sudo a2dissite default.conf
Enter fullscreen mode Exit fullscreen mode
  • Restart the server 
~ sudo service apache2 restart
Enter fullscreen mode Exit fullscreen mode

Done! Now you can browse your application with the domain name.

Top comments (0)

Read next

rimi_jalil2002 profile image

Oracle and Meta Team Up: What It Means for Developers Working with AI Models

Rimsha Jalil -

lahcenassmira profile image

Is URLdn Better Than Bitly for a Short Link?

Assmira Lahcen -

fuzzyreason profile image

Building a Measuring Tool with the Resize Observer API

Vadim Smirnov -

momciloo profile image

Mythbusting: Gatsby isn’t that bad. Maybe your expectations are.

Momcilo -