Deploying create-react-app with Nginx and Ubuntu

  • Nginx: Lightweight and high performance Web server or Reverse Proxy. It is mainly used to act as a reverse proxy to quickly serve static files and send requests to proxied web servers or act as a load balancer.
  • Ubuntu 16.04: A very popular Linux Distro. Version 16.04 is the latest Long Term Support Version and will be until 2021.
  • DigitalOcean: A Cloud Infrastructure Company that allows you to create a droplet/server in the “cloud”. It starts off at $5/month, making it very affordable.
sudo apt-get update

Install Node.js & npm

I like using the Current Stable version of Node.js, which is currently in version 8, but if you want to install a different version you can change the 8 to whatever version you’d like.

curl -sL https://deb.nodesource.com/setup_8.x | sudo -E bash -
sudo apt-get install -y nodejs

Clone your repository on your machine

I have been using the LAMP stack for a while so I like putting my web app files in /var/www/.

sudo mkdir /var/www
cd /var/www/
sudo mkdir /www 
cd /www
sudo gpasswd -a "$USER" www-data
sudo chown -R "$USER":www-data /var/www
find /var/www -type f -exec chmod 0660 {} \;
sudo find /var/www -type d -exec chmod 2770 {} \;
git clone [Your repository URL]
cd [Your Repository Name]
sudo npm install
sudo npm run build

Install and Configure Nginx to serve your application

sudo apt-get install nginx
server {
listen 80 default_server;
root /var/www/[Your repo name]/build;
server_name [your.domain.com] [your other domain if you want to];
index index.html index.htm;
location / {
}
}
location /files/ { 
autoindex on;
root /var/www/[your repo name]/files;
}
server {
listen 80 default_server;
root /var/www/[Your repo name]/build;
server_name [your.domain.com] [your other domain if you want to];
index index.html index.htm;
location / {
}
}
location /files/ {
autoindex on;
root /var/www/[your repo name]/files;
}
sudo service nginx start
sudo service nginx restart

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store